Étiquette de champ de formulaire

L'étiquette de champ de formulaire est le texte qui indique la donnée attendue par un champ de saisie (« Nom », « Courriel », « Mot de passe »). Pour être accessible, ce texte doit être relié au champ dans le code HTML, via l'élément label ou les attributs ARIA. Sans cette liaison, les lecteurs d'écran restituent un champ muet, sans indication sur ce qu'il faut saisir.

Un lecteur d'écran arrive sur un champ de formulaire. Il annonce… rien. L'utilisateur ne sait pas ce qu'on lui demande. Ce silence a une cause technique précise : le champ n'a pas d'étiquette reliée dans le code.

#Quatre façons de relier une étiquette

Le glossaire du RGAA reconnaît quatre méthodes pour donner un nom accessible à un champ. Elles ne se valent pas toutes.

L'élément <label> (méthode à privilégier)

<label for="courriel">Courriel</label>
<input id="courriel" type="email">

La technique H44 du W3C précise que cette association satisfait quatre critères WCAG, dont le 3.3.2 Labels or Instructions (niveau A). Le <label> offre un bonus qu'ARIA ne donne pas : cliquer sur le texte active le champ. Sur mobile, cette zone cliquable élargie change tout.

Variante : le label implicite, où le champ est imbriqué dans l'élément <label>. Le résultat est identique pour les lecteurs d'écran, mais le label explicite (for et id) reste la convention dans les projets React ou Vue, où label et input vivent rarement dans le même composant.

aria-label (texte invisible)

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

Réservé aux champs dont le contexte visuel rend l'étiquette superflue : barres de recherche, champs de filtrage avec une icône explicite.

aria-labelledby (référence un texte existant)

<h2 id="titre-contact">Contact</h2>
<span id="label-nom">Nom</span>
<input type="text" aria-labelledby="titre-contact label-nom">

Permet de composer un nom accessible à partir de plusieurs fragments de texte déjà présents dans la page.

L'attribut title (dernier recours)

Le title est restitué par les lecteurs d'écran, mais invisible à la navigation ordinaire. Access42 le déconseille sauf situation très spécifique.

La règle : <label> d'abord. ARIA ensuite. title jamais (ou presque).

#Le texte posé à côté ne suffit pas

Un texte « Courriel » visible à côté du champ, sans liaison dans le code ? Le lecteur d'écran l'ignore.

<!-- ❌ Texte visible mais non relié -->
<span>Courriel</span>
<input type="email">
 
<!-- ✅ Label correctement relié -->
<label for="courriel">Courriel</label>
<input id="courriel" type="email">

Le WebAIM Million 2025 relève que 48,2 % des pages d'accueil ont au moins un champ sans étiquette. Troisième erreur d'accessibilité la plus fréquente sur le web.

L'étiquette doit aussi être pertinente. « Champ 1 » ou « Saisie » ne renseignent personne. Décrivez la donnée attendue : « Adresse courriel », « Numéro de téléphone ».

#En résumé

Utilisez <label> par défaut. Réservez aria-label et aria-labelledby aux cas où le HTML natif ne couvre pas le besoin. Chaque champ a besoin d'un nom accessible relié dans le code, pas d'un texte posé à côté.