Warning El atributo for de un label apunta a un id inexistente
Por qué un <label for="..."> que no coincide con el id de ningún elemento falla en silencio al asociarse con un control de formulario.
El validador marca un <label for="x"> donde ningún elemento del documento tiene id="x".
Ejemplo
<!-- Incorrecto: error de tipeo en el id, "emial" vs "email" -->
<label for="emial">Email</label>
<input id="email" type="email">
<!-- Correcto -->
<label for="email">Email</label>
<input id="email" type="email">Por qué importa
El emparejamiento for/id es una de las tres formas de asociar una etiqueta con un control (las otras son envolver el control en la etiqueta, o usar aria-labelledby), y es la más común. Cuando el id no coincide con nada, el navegador no da error — simplemente falla en crear la asociación, en silencio. El efecto visible es sutil: hacer clic en el texto de la etiqueta ya no enfoca el input, y los usuarios de lector de pantalla pierden por completo el nombre del campo, a menudo la única señal de que algo está mal. Esto suele ser un error de tipeo en alguno de los dos ids, o un valor de for que quedó de un campo que se renombró o se eliminó.
Frequently asked questions
¿Esto rompe la página visualmente?
No — un par for/id desajustado no tiene ningún efecto visual, que es exactamente por qué es fácil publicarlo sin notarlo. Los únicos síntomas son de comportamiento: hacer clic en la etiqueta no enfoca el campo, y los lectores de pantalla anuncian el campo sin nombre.
¿Hay una forma de evitar este tipo de error por completo?
Envolver el input directamente dentro del <label> en vez de usar for/id — una etiqueta envolvente se asocia automáticamente sin ningún id que mantener sincronizado, a costa de un poco menos de flexibilidad de layout.