Éviter les étiquettes sur les contrôles non étiquetables

Silktide vérifie les étiquettes de formulaire qui pointent vers un autre élément par ID, et signale celles qui visent des éléments qui ne devraient pas en avoir — des boutons, des champs de type bouton, et des éléments qui ne peuvent pas du tout recevoir d’étiquette. Ces éléments sont nommés par leur propre texte ou valeur, et une étiquette séparée crée des noms en conflit.

Dans HTML, un <label> nomme un champ de formulaire via son attribut for. Mais certains contrôles portent déjà leur propre nom : le nom d’un bouton est son texte, et le nom d’un champ input de type submit est sa value. D’autres éléments, comme un simple <div> ou un champ masqué (hidden), ne peuvent tout simplement pas être étiquetés de cette manière.

<!-- Problème : le bouton indique déjà "Enregistrer" ; l’étiquette entre en conflit -->
<label for="save">Enregistrer</label>
<button id="save">Enregistrer</button>

Pourquoi c'est important

Lorsqu’un contrôle a deux sources pour son nom — son propre texte et une étiquette qui pointe vers lui — les navigateurs et les lecteurs d'écran résolvent le conflit différemment. Le contrôle peut être annoncé deux fois, annoncé avec un texte erroné, ou se comporter de façon inattendue lorsque l’étiquette est cliquée. Supprimer l’étiquette redondante permet à chaque visiteur d’entendre exactement ce que dit le contrôle.

Comment corriger

1. Pour les boutons et les champs de type bouton, supprimez l’élément <label> et fiez-vous au texte ou à la value du contrôle :

<!-- Corrigé : le bouton se nomme lui-même -->
<button id="save">Enregistrer</button>
<input type="submit" value="Envoyer">

2. Pour une étiquette qui pointe vers un champ masqué, supprimez l’étiquette — les champs masqués ne sont jamais affichés ni annoncés, ils n’ont donc pas besoin de nom.
3. Si vous étiquetiez un élément qui n’est pas un champ de formulaire, comme un <div> utilisé comme contrôle personnalisé, utilisez plutôt ARIA : donnez à l’élément un aria-labelledby pointant vers le texte qui le nomme.

Comment Silktide teste ceci

1. Trouver chaque élément <label> avec un attribut for sur chaque page.
2. Rechercher l’élément dont l’id correspond. Les étiquettes pointant vers des IDs qui n’existent pas sont ignorées ici — elles sont signalées par ID d’étiquette valides à la place.
3. Signaler l’étiquette lorsque sa cible est l’un des éléments suivants :
   • un élément <button> ;
   • un <input> de type button, submit, reset, image ou hidden ;
   • tout élément qui ne peut pas recevoir d’étiquette, comme un <div> ou un titre.
4. Les étiquettes visant des champs ordinaires — champs texte, <select>, <textarea> et éléments similaires — sont valides.

En savoir plus

• Understanding Success Criterion 1.3.1: Info and Relationships (WCAG 2.2)
• Technique H44 : Utilisation des éléments label (WCAG)
• L’élément label (MDN)
• Étiquettes de champ