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

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

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 de type submit est sa value. D’autres éléments, comme un simple <div> ou un champ caché, ne peuvent pas recevoir d’étiquette de cette manière.

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

Pourquoi c’est important

Quand un contrôle a deux sources pour son nom — son propre texte et une étiquette qui pointe vers lui — différents navigateurs et lecteurs d’écran résolvent le conflit différemment. Le contrôle peut être annoncé deux fois, annoncé avec le mauvais texte, ou se comporter de façon inattendue quand on clique sur l’étiquette. Supprimer l’étiquette redondante fait en sorte que chaque visiteur entende exactement ce que le contrôle dit.

Comment corriger

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

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

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

Comment Silktide teste cela

1. Trouver chaque élément <label> avec un attribut for sur chaque page.
2. Repérer l’élément dont l’id correspond. Les étiquettes pointant vers des ID qui n’existent pas sont ignorées ici — elles sont plutôt signalées par ID d’étiquette valides.
3. Signaler l’étiquette lorsque sa cible est l’un des éléments suivants :
   • un élément <button>,
   • un <input> avec un 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 pointant vers des champs ordinaires — champs texte, <select>, <textarea> et similaires — réussissent.

Pour en savoir plus

• Comprendre le critère de succès 1.3.1 : Informations et relations (WCAG 2.2)
• Technique H44 : Utiliser les éléments label (WCAG)
• L’élément label (MDN)
• Étiquettes de champs