Identifiants d’étiquette valides pour les fragments

Silktide vérifie les étiquettes de formulaire qui renvoient à un autre élément par son ID et signale celles dont l’ID n’existe nulle part dans la page. Une étiquette qui ne pointe vers rien ne peut nommer quoi que ce soit.

En HTML, un <label> nomme un champ de formulaire en définissant son attribut for avec l’id du champ. Cette vérification contrôle seulement que l’ID référencé existe quelque part dans la page - une vérification complémentaire, Identifiants d’étiquette valides, va plus loin et confirme que la cible est un champ de formulaire pouvant recevoir une étiquette.

<!-- Problème : aucun élément de la page n’a id="food" -->
<label for="food">Plat préféré</label>

Pourquoi c’est important

Une étiquette avec une référence brisée ne sert à rien : un lecteur d’écran ne peut pas l’associer à un champ, donc le champ visé est annoncé sans nom, et cliquer l’étiquette ne lui donne plus le focus. Comme la page semble inchangée, ces bris apparaissent souvent en douce lorsque des ID sont renommés ou que le balisage est restructuré, et seule une vérification automatisée les détecte.

Comment corriger

1. Repérez l’élément que l’étiquette devait décrire et définissez la valeur for de l’étiquette avec l’id exact de cet élément (les ID sont sensibles à la casse) :

<!-- Corrigé : l’étiquette pointe vers un ID réel -->
<label for="food">Plat préféré</label>
<input type="text" id="food">

2. Si l’élément cible n’a pas d’id, ajoutez-en un.
3. Si l’étiquette est un vestige qui ne décrit plus rien, supprimez-la.

Comment Silktide vérifie cela

1. Repérer chaque élément <label> dont l’attribut for n’est pas vide sur chaque page.
2. Chercher n’importe où dans la page un élément dont l’id correspond.
3. Signaler l’étiquette si aucun élément correspondant n’existe.

En savoir plus

• Comprendre le critère de réussite 1.3.1 : Informations et relations (WCAG 2.2)
• L’élément label (MDN)
• Identifiants d’étiquette valides