Fallo común WCAG 2.2
F111Controles con etiqueta visible pero sin nombre accesible
Nombre oficial en el W3C: Fallo 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 pocas palabras
Un campo o un botón muestra un texto que lo identifica, pero ese texto no está unido al control en el código. El control se queda sin nombre accesible, que es el nombre que reconocen el navegador y los lectores de pantalla. Quien maneja la web con la voz no puede activarlo diciendo lo que ve.
Por qué es importante
Las personas que manejan el ordenador con la voz dicen órdenes como «pulsar Enviar» o «clic Teléfono». El programa busca un control con ese nombre. Si el control no tiene nombre, la orden no funciona.
También afecta a quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla): oye «edición» y no sabe qué dato se pide. Pasa mucho con etiquetas hechas con div o con un aria-labelledby que apunta a un id mal escrito.
Cómo evitarlo
- Una cada etiqueta visible con su campo mediante
<label for="id-del-campo">. - En botones y enlaces, ponga el texto dentro del propio elemento. Si es una imagen con texto, dele un
altcon ese mismo texto. - Si usa
aria-labelledby, compruebe que elidal que apunta existe y está escrito igual. - Haga que el nombre accesible contenga el texto visible, mejor al principio. Si el botón dice «Buscar», no le ponga
aria-label="Lupa". - Al copiar y pegar bloques de un formulario, revise que los
idno se repitan.
Ejemplo práctico
Ocurre en formularios hechos a mano o con constructores visuales, como los de cita previa o contacto. El texto de la etiqueta se ve encima del campo, pero no está unido a él. O se une 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. El aria-labelledby del teléfono apunta a etiqueta-tel, un id que no existe (el real es etq-tel). Por eso los campos no tienen nombre accesible. Con control por voz, la orden «pulsar Nombre y apellidos» no funciona. El lector de pantalla solo dice «edición». A simple vista no se nota: hay que usar el lector de pantalla o el panel Accesibilidad del navegador.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Etiquetas visibles asociadas con label
Los textos visibles son ahora elementos label, unidos con for al id de cada campo. Su nombre accesible coincide con la etiqueta visible. La orden de voz «pulsar Teléfono» lleva al campo. El lector de pantalla dice «Teléfono, edición».
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
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 repetido tras copiar y pegar un bloque del formulario.
- Usar el placeholder como etiqueta. Desaparece al escribir y no siempre sirve como nombre accesible.
- Botones de icono cuyo texto visible está en una imagen o en un pseudoelemento ::before, sin ningún nombre accesible equivalente.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F111 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F111 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.