label-for-valid
El atributo for de un label debería nombrar un control que pueda etiquetar
Marca un label cuyo atributo for no nombra ningún elemento, o nombra un elemento que no se puede etiquetar, de modo que el label no etiqueta nada, para revisión manual.
Ámbito de aplicación. Elementos <label> que la página muestra con un atributo for no vacío.
Resultado esperado. HTML: un label con for etiqueta el elemento con ese id de su árbol, si ese elemento es etiquetable, y nada en otro caso, contenga lo que contenga el label.
fornombra un elemento etiquetable (button,inputque no sea hidden,meter,output,progress,select,textarea) o un elemento personalizado, que puede estar asociado a formularios:pass.forno nombra ningún elemento:cantTell(LABEL_FOR_TARGET_MISSING).fornombra un elemento que no se puede etiquetar:cantTell(LABEL_FOR_NOT_LABELABLE).
En ambos casos el label no etiqueta nada. Comprueba a qué control iba destinado: ese control puede tener otro nombre, que evalúan las reglas de nombre, o quedarse sin la etiqueta visible pensada para él.
Qué informa un hallazgo.
for: el id que nombra el label.targetElement: conLABEL_FOR_NOT_LABELABLE, la etiqueta del elemento nombrado.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<label for="email">Email</label><input id="email" type="email">
for nombra el input, así que el label lo etiqueta.
<label for="e-mail">Email</label><input id="email" type="email">
for no nombra ningún elemento, así que el label no etiqueta nada. Una persona comprueba a qué control iba destinado.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
LABEL_FOR_NOT_LABELABLE
- Localizar la etiqueta que indica el informe y el elemento al que apunta su atributo for (el informe da su etiqueta HTML).
- Deducir a qué control de formulario estaba destinada la etiqueta.
- Leer el nombre calculado de ese control en el panel Accesibilidad, y hacer clic en la etiqueta para ver si pone el foco en el control.
Se cumple. La etiqueta se corrige para que apunte al control que describe, o ese control ya tiene el mismo nombre por otra vía y la etiqueta es solo texto visible.
No se cumple. La etiqueta apunta a un elemento que no se puede etiquetar, así que el control al que estaba destinada no recibe de ella ni nombre ni foco, un incumplimiento de buena práctica según las reglas de HTML sobre controles etiquetados.
LABEL_FOR_TARGET_MISSING
- Localizar la etiqueta que indica el informe y el id de su atributo for.
- Buscar ese id entre los elementos de la página; comprobar si el control aparece más tarde, por ejemplo después de que se ejecute un script.
- Deducir a qué control estaba destinada la etiqueta, leer su nombre calculado en el panel Accesibilidad y hacer clic en la etiqueta para ver si pone el foco en ese control.
Se cumple. El id existe una vez lista la página, y la etiqueta da nombre a su control y le pone el foco.
No se cumple. Ningún elemento tiene ese id, así que la etiqueta no etiqueta nada y su control se queda sin ese nombre, un incumplimiento de buena práctica según las reglas de HTML sobre controles etiquetados.