Warning Controles de formulario sin etiqueta accesible
Por qué todo input, select y textarea necesita un nombre accesible vía <label>, aria-label o aria-labelledby, y cómo funciona cada opción.
El validador revisa los controles de formulario visibles (inputs de texto, selects, textareas — no los inputs ocultos, submit, reset, button o image) en busca de un nombre accesible, mediante un <label> envolvente o asociado, aria-label, o aria-labelledby.
Ejemplo
<!-- Asociado por for/id -->
<label for="email">Email</label>
<input id="email" type="email">
<!-- Label envolvente, no necesita id -->
<label>Email <input type="email"></label>
<!-- Sin etiqueta visible — aria-label en su lugar -->
<input type="search" aria-label="Buscar productos">Por qué importa
Un placeholder no es una etiqueta — desaparece en el momento en que el usuario empieza a escribir, y muchos lectores de pantalla no lo anuncian de forma consistente como sí hacen con una etiqueta real. Sin alguno de los tres métodos de asociación de arriba, un usuario de lector de pantalla solo escucha "editar texto" sin ninguna indicación de para qué es el campo. Una <label> real también amplía el área clicable/tocable, ya que hacer clic en el texto de la etiqueta enfoca el input asociado — útil sobre todo para checkboxes y radio buttons pequeños.
Frequently asked questions
¿Un placeholder es suficiente en vez de una etiqueta?
No. El texto del placeholder desaparece en cuanto el usuario empieza a escribir, no se expone de forma confiable a la tecnología de asistencia como sí lo hace una etiqueta, y suele tener menos contraste — falla como único medio para identificar un campo.
¿Cuándo debería usar aria-label en vez de un <label> visible?
Cuando una etiqueta visible sería redundante o no encaja con el diseño — un input con solo un ícono de búsqueda, por ejemplo. aria-label da el mismo nombre accesible sin texto visible. Prefiere siempre un <label> real cuando haya espacio para uno.