Critère 11.2
Pertinence de l'étiquette
Chaque étiquette associée à un champ de formulaire doit être pertinente.
En Bref : L'essentiel à retenir
- L'étiquette d'un champ doit clairement indiquer la nature de l'information attendue.
- Une bonne étiquette est précise et ne laisse pas de place à l'ambiguïté, comme le montre l'exemple de la date.
- Le texte visible de l'étiquette et le nom accessible (via `aria-label` ou `aria-labelledby`) doivent être cohérents.
- La mise en œuvre de ces principes vise à améliorer l'accessibilité web et est liée aux critères du RGAA (Référentiel Général d'Accessibilité pour les Administrations).
Objectif
S'assurer que l'étiquette permet de comprendre sans ambiguïté la nature de la saisie attendue.
Solution Technique
1. Clarté de l'étiquette
L'étiquette doit décrire précisément la donnée attendue.
<!-- ❌ Mauvais -->
<label for="d1">Date</label>
<input type="text" id="d1" />
<!-- ✅ Bon -->
<label for="d2">Date de naissance (JJ/MM/AAAA)</label>
<input type="text" id="d2" />
2. Cohérence avec l'intitulé visible
Si un champ a une étiquette visible et un nom accessible (via aria-label ou aria-labelledby), le nom accessible doit contenir le texte visible.
<!-- ✅ Bon -->
<label for="search">Recherche</label>
<input type="search" id="search" aria-label="Recherche sur le site" />