Étiquettes de formulaire manquantes : pourquoi le texte indicatif ne suffit pas

Une personne voyante qui regarde un formulaire d'inscription voit « E-mail » écrit juste au-dessus d'un champ de saisie et comprend immédiatement le lien : la proximité visuelle fait le travail. Un lecteur d'écran ne voit pas la proximité. Il lui faut une association réelle et exploitable par programme entre le texte de l'étiquette et le champ, sans quoi il annonce simplement « zone d'édition », sans aucune indication de ce qu'il faut saisir.

C'est le deuxième problème le plus souvent invoqué dans les contentieux d'accessibilité web fondés sur l'ADA : environ 72 % des plaintes le mentionnent, juste derrière les alternatives textuelles manquantes.

Pourquoi le texte indicatif ne règle pas le problème

Le texte indicatif (l'indication grisée à l'intérieur d'un champ vide) est souvent pris pour une étiquette, mais il échoue sur deux points : il disparaît dès le début de la saisie, de sorte que toute personne interrompue perd le contexte ; et - point décisif pour cette non-conformité - certaines combinaisons de lecteur d'écran et de navigateur ne l'annoncent pas de façon fiable comme nom du champ. Un attribut placeholder ne remplace pas un <label>.

Comment le corriger

La correction la plus robuste est un <label> explicite dont l'attribut for correspond à l'id du champ :

<!-- Avant : visuellement correct, annoncé comme « zone d'édition » -->
<span>Adresse e-mail</span>
<input type="email" name="email">

<!-- Après : association exploitable par programme -->
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">

Englober le champ dans l'étiquette fonctionne également, sans avoir à faire correspondre un id :

<label>
  Adresse e-mail
  <input type="email" name="email">
</label>

Lorsqu'une étiquette visible ne fait réellement pas partie de la maquette (un champ de recherche réduit à une icône, par exemple), utilisez aria-label pour lui donner un nom accessible sans modifier l'affichage :

<input type="search" name="q" aria-label="Rechercher sur le site">

Les éléments <select> demandent exactement le même traitement : une liste déroulante sans étiquette associée pose le même problème qu'un champ de saisie.

Un échec voisin : l'étiquette par attribut title seul

Certains formulaires utilisent le seul attribut title (sans étiquette visible ni aria-label) pour nommer un champ. Cela fournit techniquement quelque chose aux technologies d'assistance, mais les WCAG considèrent l'étiquetage par title seul comme insuffisant : ce texte est annoncé de façon inégale selon les lecteurs d'écran et disparaît dès lors qu'aucun texte visible à l'écran n'y correspond, si bien qu'une personne voyante et une personne utilisant un lecteur d'écran n'ont pas la même compréhension du formulaire.

Références officielles

• Deque University : label
• Deque University : select-name
• Technique W3C H44
• Technique W3C H65