C'est quoi
Le critère RGAA 11.2 va plus loin que le 11.1 (présence d'une étiquette) : il exige que chaque étiquette décrive clairement la donnée attendue.
"Nom de famille", "Adresse e-mail", "Numéro de téléphone" sont pertinentes. "Saisir ici", "Champ", "Texte" ne le sont pas.
La règle s'applique à tous les mécanismes d'étiquetage : l'élément <label>, les attributs aria-label, aria-labelledby et title. Peu importe le moyen utilisé, ce qui est annoncé au lecteur d'écran doit être explicite.
Le critère correspond aux critères de succès WCAG 1.3.1 (Information et relations, niveau A) et 3.3.2 (Étiquettes ou instructions, niveau A).
Qui est touché
- Les personnes aveugles utilisant un lecteur d'écran : sans étiquette pertinente, elles entendent "Saisir ici" et ne savent pas quelle information mettre.
- Les personnes ayant des troubles cognitifs : une étiquette vague augmente la charge mentale et multiplie les erreurs de saisie.
- Les personnes utilisant la saisie vocale (Dragon NaturallySpeaking ou équivalent) : elles activent un champ en prononçant son étiquette visible. Si elle est générique, la commande ne fonctionne pas.
Impact business
Un champ mal étiqueté bloque la saisie. L'utilisateur de lecteur d'écran doit deviner la donnée attendue, tenter quelque chose, puis subir un message d'erreur qui ne l'aide pas davantage. Le formulaire devient une impasse.
Les formulaires de contact, d'inscription et de commande sont les premiers touchés. C'est souvent là que se joue l'abandon ou la conversion.
Le WebAIM Million identifie les erreurs de formulaire comme parmi les causes les plus fréquentes de blocage pour les utilisateurs de technologies d'assistance.
Comment le détecter
- Audit Mynto : le scan détecte les champs dont l'étiquette associée est vide ou identique pour plusieurs champs distincts.
- Manuel : parcours le formulaire avec un lecteur d'écran (NVDA + Firefox ou VoiceOver + Safari). À chaque champ, écoute ce qui est annoncé. Si l'annonce ne décrit pas clairement la donnée attendue, l'étiquette n'est pas pertinente.
- Inspecte les attributs
aria-labeldans les DevTools : une valeur comme "input1" ou "champ" est aussi non pertinente qu'un label vide.
Comment corriger
<!-- Étiquette non pertinente -->
<label for="champ1">Saisir ici</label>
<input type="text" id="champ1"><!-- Étiquette pertinente -->
<label for="nom-famille">Nom de famille</label>
<input type="text" id="nom-famille" autocomplete="family-name">Reformule chaque étiquette pour décrire précisément la donnée attendue. Évite les formulations génériques : "Saisir ici", "Champ", "Texte".
Sur WordPress, les plugins de formulaire (Contact Form 7, Gravity Forms, WPForms) génèrent les étiquettes à partir des libellés saisis dans leur interface. Corrige-les directement dans le constructeur du formulaire.
Si tu utilises aria-label à la place d'un <label> visible, applique la
même règle : la valeur doit décrire précisément la donnée attendue, pas
servir d'identifiant technique.
Questions fréquentes
Peut-on utiliser le placeholder comme étiquette ?
Non. Le placeholder disparaît dès que l'utilisateur commence à saisir. Une personne ayant des troubles de mémoire ne peut plus retrouver ce qui était attendu. Le placeholder complète une étiquette, il ne la remplace pas.
RGAA 11.2 s'applique-t-il aux boutons radio et cases à cocher ?
Oui. Chaque option doit avoir une étiquette pertinente. "Option 1" ne l'est pas. Utilise des libellés explicites comme "Par carte bancaire" ou "Par virement bancaire".
Comment masquer une étiquette visuellement tout en la gardant accessible ?
Utilise une classe CSS de type sr-only qui masque l'élément à l'écran mais le laisse lisible par les lecteurs d'écran. Le <label> reste dans le HTML avec un texte pertinent.
À lire aussi
Cette erreur est-elle sur ton site ?
Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.