label-for-valid

L’attribut for d’un label devrait nommer un contrôle qu’il peut étiqueter

manualconfiance : mediumgravité : minorunderstandable

Signale, pour une revue manuelle, un label dont l’attribut for ne nomme aucun élément, ou un élément qui ne peut pas être étiqueté, si bien que le label n’étiquette rien.

Applicabilité. Éléments <label> que la page affiche, dotés d’un attribut for non vide.

Attendu. HTML : un label doté de for étiquette l’élément qui porte cet id dans son arbre, si cet élément est étiquetable, et rien sinon, quel que soit le contenu du label.

for nomme un élément étiquetable (button, input autre que hidden, meter, output, progress, select, textarea) ou un élément personnalisé, qui peut être associé à un formulaire : pass.
for ne nomme aucun élément : cantTell (LABEL_FOR_TARGET_MISSING).
for nomme un élément qui ne peut pas être étiqueté : cantTell (LABEL_FOR_NOT_LABELABLE).

Dans les deux cas, le label n’étiquette rien. Vérifiez à quel contrôle il était destiné : ce contrôle peut être nommé d’une autre façon, ce que jugent les règles de nom, ou rester sans le libellé visible qui lui était destiné.

Ce que rapporte un constat.

for : l’id que nomme le label.
targetElement : pour LABEL_FOR_NOT_LABELABLE, la balise de l’élément nommé.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

pass

<label for="email">Email</label>
<input id="email" type="email">

for nomme le champ input, le label l’étiquette donc.

can't tell

<label for="e-mail">Email</label>
<input id="email" type="email">

for ne nomme aucun élément, le label n’étiquette donc rien. Une personne vérifie à quel contrôle il était destiné.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

`LABEL_FOR_NOT_LABELABLE`

Repérez le label indiqué par le rapport et l’élément vers lequel pointe son attribut for (le rapport donne sa balise).
Déterminez à quel contrôle de formulaire le label était destiné.
Lisez le nom calculé de ce contrôle dans le panneau Accessibilité, et cliquez sur le label pour voir s’il donne le focus au contrôle.

Réussite. Le label est corrigé pour pointer vers le contrôle qu’il décrit, ou ce contrôle a déjà le même nom par un autre moyen et le label n’est qu’un texte visible.

Échec. Le label pointe vers un élément qui ne peut pas être étiqueté : le contrôle auquel il était destiné n’en reçoit ni nom ni focus, un manquement aux bonnes pratiques selon les règles HTML sur les contrôles étiquetables.

`LABEL_FOR_TARGET_MISSING`

Repérez le label indiqué par le rapport et l’id présent dans son attribut for.
Cherchez cet id parmi les éléments de la page ; vérifiez si le contrôle apparaît plus tard, par exemple après l’exécution d’un script.
Déterminez à quel contrôle le label était destiné, lisez son nom calculé dans le panneau Accessibilité, et cliquez sur le label pour voir s’il donne le focus à ce contrôle.

Réussite. L’id existe une fois la page prête, et le label nomme son contrôle et lui donne le focus.

Échec. Aucun élément ne porte cet id : le label n’étiquette rien et son contrôle reste privé de ce nom, un manquement aux bonnes pratiques selon les règles HTML sur les contrôles étiquetables.

Voir le code source