Esta verificación marca los controles en los que los usuarios (y las API) no pueden determinar de manera confiable el propósito del campo. Cada control interactivo necesita un nombre accesible, generalmente de una etiqueta visible asociada, aria-labelledby o, solo cuando no existe una etiqueta visible, aria-label.
Las comprobaciones automatizadas comparan cada control de formulario con las reglas de etiquetado de WCAG: los controles deben tener un nombre determinable mediante programación que coincida con lo que ven los usuarios videntes (o una alternativa de texto intencional cuando no se utiliza una etiqueta visible).
El informe enumera elementos concretos (por ejemplo, entradas sin una etiqueta coincidente o identificadores duplicados que rompen la asociación de etiquetas). Primero solucione esos casos y luego vuelva a ejecutar el rastreo para confirmar que la advertencia desaparezca.
En el informe, use este elemento como evidencia. No lo trate como una regla independiente a menos que el contexto de la página respalde la misma conclusión.
Cómo interpretarlo
Cada campo de texto, selección, área de texto y control personalizado tiene una <label> visible vinculada con for/id, una <label> envolvente, aria-labelledby que apunta al texto visible o un aria-label documentado cuando no es posible ninguna etiqueta visible.
Los grupos de campos relacionados utilizan un conjunto de campos y una leyenda (o un patrón de agrupación equivalente) para que la relación sea clara.
Los botones que solo contienen íconos incluyen un nombre accesible (texto visualmente oculto, aria-label o aria-labelledby).
Patrón
Cuando usarlo
<label for="id"> + input id
Valor predeterminado para campos individuales; Lo mejor para lector de pantalla y control por voz.
Envolviendo <etiqueta>
Marcado simple cuando la etiqueta envuelve exactamente un control.
aria-labelledby
Cuando el texto es visible en otra parte de la página, nombra el campo (debe hacer referencia a los identificadores de elementos).
aria-label
Raro: sin texto visible; Mantenga los hilos cortos y pruebe con tecnología de asistencia real.
Depender del texto del marcador de posición como única descripción del campo.
Etiquetas en las que se puede hacer clic que no están asociadas con la identificación del control, por lo que hacer clic en la etiqueta no enfoca la entrada.
Duplicar valores de identificación en una página, lo que rompe la asociación de etiquetas para el primer o segundo control.
Ocultar la única etiqueta con display:none de manera que la elimine del árbol de accesibilidad sin proporcionar otro nombre.
No. Los marcadores de posición desaparecen cuando el campo tiene un valor y, a menudo, se omiten o son difíciles de escuchar en la tecnología de asistencia. Utilice una etiqueta visible persistente o un nombre programático equivalente.
¿Cuándo es aceptable aria-label?
Utilice aria-label solo cuando no haya un texto visible adecuado al que hacer referencia y agregar texto visible rompería el diseño en un caso poco común y documentado; prefiera etiquetas visibles para casi todos los formularios.