Ce que c'est
Une étiquette correctement codée est un texte explicitement lié à un champ de formulaire précis dans le code sous-jacent de la page (généralement via un attribut for correspondant à l'id du champ), de sorte qu'un lecteur d'écran annonce cette étiquette dès que le visiteur place le focus sur le champ — "Adresse e-mail, champ de texte", par exemple. C'est une exigence plus stricte et plus technique que le simple fait d'avoir un texte ressemblant à une étiquette visible près du champ, ce qui est l'angle traité dans notre guide général sur l'étiquetage des champs de formulaire axé sur les taux de conversion.
Un champ peut sembler parfaitement étiqueté pour un visiteur voyant (un texte placé juste à côté de la case) tout en n'ayant aucun lien réellement codé entre ce texte et le champ — c'est exactement l'écart que recherche cette vérification axée sur l'accessibilité.
Pourquoi c'est important
Un lecteur d'écran ne voit pas la mise en page visuelle d'une page — il lit la structure du code sous-jacent, donc une étiquette seulement proche visuellement d'un champ mais non explicitement liée à lui dans le code pourrait ne jamais être annoncée quand un utilisateur de lecteur d'écran atteint ce champ. Sans entendre à quoi sert un champ, il est réduit à deviner ou à le sauter complètement, ce qui peut signifier qu'un utilisateur de lecteur d'écran ne peut tout simplement pas remplir un formulaire qu'un visiteur voyant trouve parfaitement simple.
C'est l'une des exigences les mieux établies et les plus précisément nommées des WCAG (les directives d'accessibilité standard que beaucoup d'organisations doivent légalement respecter), précisément parce que les formulaires sont si centraux pour accomplir réellement une tâche sur le web — s'inscrire, payer, prendre contact.
Comment le corriger
- Pour chaque champ de formulaire, ajoute un élément
<label>avec un attributforcorrespondant exactement à l'attributidde ce champ. - Autre solution : place le champ directement à l'intérieur de la balise
<label>elle-même, ce qui crée le même lien explicite sans avoir besoin de faire correspondre les ID. - Pour un champ sans aucune étiquette visible par design (un champ de recherche uniquement composé d'une icône, par exemple), utilise
aria-label="Rechercher"directement sur le champ pour qu'un lecteur d'écran continue d'annoncer son rôle. - Évite de te reposer uniquement sur le texte de substitution (placeholder) comme remplacement d'une vraie étiquette — les lecteurs d'écran le gèrent de façon incohérente, et il disparaît de toute façon dès qu'un texte est saisi.
- Teste en parcourant ton formulaire uniquement au clavier (tabulation) avec un lecteur d'écran gratuit (NVDA, VoiceOver) pour confirmer que chaque champ annonce un objectif clair.