Identifiants d’étiquette valides

Silktide vérifie les étiquettes de formulaire qui nomment leur champ à l’aide d’un ID et confirme que cet ID existe sur la page et qu’il appartient à un élément qui peut effectivement recevoir une étiquette. Une étiquette qui pointe vers rien, ou vers le mauvais type d’élément, laisse silencieusement un champ sans nom.

En , un <label> est relié à son champ de formulaire en définissant l’attribut for de l’étiquette à l’id du champ. La liaison se brise lorsque l’ID est mal saisi, lorsque l’ID du champ change ou lorsque la cible n’est pas du tout un champ de formulaire.

<!-- Problème : aucun élément avec id="fullname" n'existe -->
<label for="fullname">Nom complet</label>
<input type="text" id="full-name">

Pourquoi c’est important

L’étiquette est la façon dont un annonce un champ. Lorsque la référence for est brisée, l’étiquette et le champ sont deux éléments sans lien : la personne entend un « champ d’édition » sans nom et doit deviner ce qu’il faut y entrer. Rien ne change visuellement — l’étiquette se trouve toujours à côté de son champ —, donc ces ruptures passent inaperçues jusqu’à ce que quelqu’un qui dépend de cette liaison essaie d’utiliser le formulaire.

Comment corriger

Trouvez le champ visé par l’étiquette et faites en sorte que la valeur for de l’étiquette corresponde exactement à l’id du champ (les ID respectent la casse) :

<!-- Corrigé : la référence correspond à l’id du champ -->
<label for="full-name">Nom complet</label>
<input type="text" id="full-name">

Si l’étiquette pointe vers quelque chose qui ne peut pas recevoir d’étiquette — par exemple un <div> agissant comme un contrôle personnalisé —, utilisez plutôt : donnez à l’élément un attribut aria-labelledby qui renvoie au texte qui le nomme.
Si l’étiquette est orpheline, sans champ, supprimez-la.

Comment Silktide teste ceci

Trouver chaque élément <label> doté d’un attribut for sur chaque page.
Rechercher l’élément dont l’id correspond à la valeur de for.
Signaler l’étiquette si aucun élément correspondant n’existe.
S’il existe, signaler l’étiquette si la cible n’est pas un élément de formulaire pouvant recevoir une étiquette — un bouton, un champ de saisie (input, sauf hidden), une liste déroulante, une zone de texte, une jauge (meter), une sortie (output) ou une barre de progression.

Dépannage

Le champ est ajouté par des scripts

Silktide examine chaque page telle qu’elle est rendue. Si le champ cible n’existe que dans certains états de la page — après l’ouverture d’un panneau, par exemple —, la cible de l’étiquette peut être absente lors du test. Envisagez d’afficher l’étiquette et son champ ensemble.