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 appartient à un élément pouvant effectivement recevoir une étiquette. Une étiquette pointant vers rien, ou vers un type d'élément inadapté, laisse silencieusement un champ sans nom.

En , un <label> est relié à son champ de formulaire en définissant l'attribut for de l'étiquette sur l'id du champ. La liaison se rompt 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. Quand la référence for est rompue, l'étiquette et le champ sont deux éléments sans lien : le visiteur entend une "zone d'édition" sans nom et doit deviner ce qu'il faut y saisir. Rien ne change visuellement - l'étiquette reste à côté de son champ - si bien que ces ruptures passent inaperçues jusqu'à ce que quelqu'un qui dépend de cette liaison tente d'utiliser le formulaire.

Comment corriger

Trouvez le champ auquel l'étiquette était destinée et faites correspondre exactement la valeur for de l'étiquette avec l'id du champ (les ID sont sensibles à 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 - comme un <div> servant de contrôle personnalisé - utilisez plutôt : donnez à l'élément aria-labelledby pointant vers le texte qui le nomme.
Si l'étiquette est un vestige sans champ, supprimez-la.

Comment Silktide teste cela

Rechercher chaque élément <label> avec 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 de ce type 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 input (autre que hidden), une liste déroulante, une zone de texte, un indicateur (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 au moment du test. Envisagez d'afficher l'étiquette et son champ ensemble.