Fallo común Fallos comunes WCAG 2.2

F111Fallo de los criterios de conformidad 2.5.3 y 4.1.2 debido a un control con una etiqueta visible pero sin nombre accesible

En resumen

Este fallo se produce cuando un botón, enlace o campo muestra un texto visible que lo identifica, pero ese texto no está vinculado al control como nombre accesible (sin label, aria-label o aria-labelledby válidos). Quienes usan reconocimiento de voz no pueden activarlo diciendo lo que ven, y los lectores de pantalla no lo anuncian. Revise que cada control tenga un nombre accesible que incluya su etiqueta visible.

Ejemplo práctico

Ocurre en formularios maquetados a mano o con constructores visuales, como los de cita previa o contacto: el texto que hace de etiqueta se ve encima del campo, pero no está asociado a él, o se asocia con un aria-labelledby que apunta a un id que no existe.

Así no: Etiquetas visibles sin asociar al campo

«Nombre y apellidos» es un div sin relación con el campo, y el aria-labelledby del teléfono apunta a etiqueta-tel, un id inexistente (el real es etq-tel). Los campos no tienen nombre accesible: con control por voz la orden «pulsar Nombre y apellidos» no funciona, y el lector de pantalla anuncia solo «edición». Para notarlo, use el lector de pantalla o el panel Accesibilidad del navegador.

<style>
  .cita div { margin-top: 10px; font-weight: bold; }
  .cita input { display: block; margin-top: 4px; padding: 6px; border: 1px solid #555; }
  .cita button { margin-top: 12px; padding: 8px 14px; background: #412c56; color: #fff; border: 0; }
</style>
<form class="cita" action="#">
  <div>Nombre y apellidos</div>
  <input type="text" id="nombre" autocomplete="name">
  <div id="etq-tel">Teléfono</div>
  <input type="tel" id="tel" aria-labelledby="etiqueta-tel" autocomplete="tel">
  <button type="submit">Pedir cita</button>
</form>

Captura de pantalla del ejemplo incorrecto: Etiquetas visibles sin asociar al campo — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Así sí: Etiquetas visibles asociadas con label

Los textos visibles son ahora elementos label vinculados con for al id de cada campo, así que su nombre accesible coincide con la etiqueta visible. La orden de voz «pulsar Teléfono» lleva al campo y el lector de pantalla anuncia «Teléfono, edición».

<style>
  .cita label { display: block; margin-top: 10px; font-weight: bold; }
  .cita input { display: block; margin-top: 4px; padding: 6px; border: 1px solid #555; }
  .cita button { margin-top: 12px; padding: 8px 14px; background: #412c56; color: #fff; border: 0; }
</style>
<form class="cita" action="#">
  <label for="nombre">Nombre y apellidos</label>
  <input type="text" id="nombre" autocomplete="name">
  <label for="tel">Teléfono</label>
  <input type="tel" id="tel" autocomplete="tel">
  <button type="submit">Pedir cita</button>
</form>

Pruébelo aquí:

Cómo comprobarlo

Control por voz (Voice Control de macOS o Acceso por voz de Windows)

Decir la orden de activación seguida del texto visible de cada control, por ejemplo «Clic Teléfono» o «Pulsar Pedir cita».
Comprobar que el foco va al control indicado; si no reacciona o pide elegir entre números, el control no tiene un nombre accesible que contenga la etiqueta visible.

Lector de pantalla (NVDA o VoiceOver)

Recorrer el formulario con Tab y escuchar lo que se anuncia al entrar en cada campo.
Comprobar que se oye el mismo texto que figura como etiqueta visible.

Debería anunciar: «Nombre y apellidos, edición» y «Teléfono, edición»

Herramientas del navegador

Abrir las herramientas de desarrollo (F12), seleccionar cada campo y mirar el campo Nombre del panel Accesibilidad.
Si el nombre sale vacío, revisar si existe label for, y si se usa aria-labelledby, buscar con document.getElementById que el id referenciado existe.

Validación automática

axe DevTools detecta los campos sin nombre accesible con la regla label, también cuando aria-labelledby apunta a un id inexistente; WAVE lo marca como «Missing form label».
La coincidencia entre etiqueta visible y nombre accesible solo la revisa la regla experimental label-content-name-mismatch de axe, que hay que activar; en la práctica se comprueba a mano.

Errores frecuentes en auditorías

Usar div, span o p como etiqueta visible sin label for ni aria-labelledby.
aria-labelledby o label for que apuntan a un id mal escrito o duplicado tras copiar y pegar un bloque del formulario.
Confiar en el placeholder como etiqueta: desaparece al escribir y no siempre se usa como nombre accesible.
Botones de icono con texto visible en una imagen o en un pseudoelemento ::before sin ningún nombre accesible equivalente.

Técnica completa: traducción al español del texto del W3C

Aplicabilidad

Todas las tecnologías que incluyan controles interactivos (como enlaces o campos de formulario).

Descripción

El objetivo de este fallo es describir las situaciones en las que los usuarios de entrada por voz no pueden pronunciar de forma fiable el nombre de un control porque, aunque tiene una etiqueta visible, carece de nombre accesible.

Cuando los usuarios de entrada por voz interactúan con una página web, normalmente pronuncian una orden seguida de la referencia a alguna etiqueta visible (como el texto de un botón o de un enlace, o el texto que etiqueta un campo). Si el control carece de nombre accesible, los usuarios de voz no podrán activarlo usando su etiqueta visible.

Ejemplos

Un campo de texto con una etiqueta visible, pero sin nombre accesible

El campo de texto va precedido de una etiqueta de texto visible, "Enter name" (introduzca el nombre), pero el texto no está marcado como <label> del campo y no existe ninguna otra forma (p. ej., aria-label) de proporcionar al campo un nombre accesible.


					<p>Enter name</p>
					<input type="text">

Un campo de texto con una etiqueta visible y un aria-labelledby que apunta a un id inexistente

El campo de texto va precedido de una etiqueta de texto visible, "Enter name" (introduzca el nombre). El contenedor del texto tiene un id con valor nameEntry, pero el campo tiene un aria-labelledby que hace referencia a un id inexistente, name-entry. Como resultado, el campo carece por completo de nombre accesible.


					<p id="nameEntry">Enter name</p>
					<input type="text" aria-labelledby="name-entry" >

Pruebas

Procedimiento

Para todos los controles con una etiqueta visible (p. ej., texto de enlace, texto de botón, etiqueta vinculada por software, imágenes con texto dentro de enlaces o botones, etc.), comprobar que:

El control tiene una etiqueta de texto visible.
El control tiene un nombre accesible.
El nombre accesible contiene el texto que aparece como etiqueta visible.

Resultados esperados

Si la comprobación n.º 1 es falsa, el criterio de conformidad no es aplicable.
Si la comprobación n.º 1 es verdadera, pero las comprobaciones n.º 2 o n.º 3 (o ambas) son falsas, el contenido falla el criterio de conformidad.
Si todas las comprobaciones son verdaderas, el contenido cumple el criterio de conformidad.

Cómo lo comprobamos en ADDAW

Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F111 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.