Associations uniques d’étiquettes

Silktide vérifie les étiquettes de formulaire qui nomment leur champ au moyen d’un identifiant (ID) et signale les étiquettes qui partagent le même ID avec une autre étiquette. Chaque champ devrait avoir exactement une étiquette qui pointe vers lui, afin qu’il soit toujours annoncé de la même façon.

En , un élément <label> est lié à son champ de formulaire en définissant l’attribut for de l’étiquette sur l’id du champ. Lorsque deux étiquettes ou plus utilisent la même valeur for, elles revendiquent toutes le même champ — généralement parce qu’un formulaire a été copié-collé et que les ID n’ont jamais été mis à jour.

<!-- Problème : les deux étiquettes pointent vers id=\"name\" -->
<label for=\"name\">Votre nom</label>
<input id=\"name\">

<label for=\"name\">Nom de l’entreprise</label>
<input id=\"company\">

Pourquoi c’est important

Les doivent choisir quelle étiquette annoncer pour le champ, et différents font des choix différents — certains lisent la première, d’autres lisent les deux. Entre-temps, le champ visé par la deuxième étiquette se retrouve sans étiquette et est donc annoncé comme un champ sans nom. Cliquer sur une étiquette place aussi le focus sur son champ; un visiteur qui clique sur « Nom de l’entreprise » pourrait se retrouver à saisir du texte dans la mauvaise case.

Comment corriger

Donnez à chaque champ de formulaire son propre id unique.
Faites pointer l’attribut for de chaque étiquette vers l’ID du seul champ qu’elle décrit :

<!-- Correction : chaque étiquette pointe vers son propre champ -->
<label for=\"name\">Votre nom</label>
<input id=\"name\">

<label for=\"company\">Nom de l’entreprise</label>
<input id=\"company\">

Si plusieurs morceaux de texte décrivent réellement un seul champ, conservez une seule balise <label> et reliez le texte supplémentaire avec aria-describedby plutôt qu’une deuxième étiquette.

Comment Silktide vérifie cela

Repérer sur chaque page tous les éléments <label> ayant un attribut for.
Regrouper les étiquettes par la valeur de leur attribut for.
Lorsque deux étiquettes ou plus partagent la même valeur, signaler chaque étiquette du groupe.

Dépannage

Les étiquettes se trouvent dans des formulaires distincts

Les identifiants doivent être uniques sur toute la page, pas seulement à l’intérieur d’un formulaire. Deux formulaires qui contiennent chacun <label for=\"email\"> sur la même page entrent quand même en conflit — renommez les identifiants pour qu’ils diffèrent, par exemple signup-email et newsletter-email.