Critère 11.1
Étiquette de champ
Chaque champ de formulaire doit avoir une étiquette (label) associée.
En Bref : L'essentiel à retenir
- Pour indiquer aux utilisateurs ce qu'ils doivent saisir dans un champ, il faut utiliser des étiquettes explicites.
- La balise `<label>` avec l'attribut `for` est la méthode standard pour associer une étiquette à un champ.
- Pour les champs sans étiquette visible, utilisez `aria-label` ou `aria-labelledby` pour l'accessibilité.
- L'attribut `title` peut servir d'étiquette de secours, mais est moins recommandé que les autres solutions.
Objectif
Permettre aux utilisateurs de savoir ce qu'ils doivent saisir dans un champ. Une étiquette explicite est indispensable pour les utilisateurs de lecteurs d'écran et améliore l'utilisabilité pour tous.
Solution Technique
1. Utilisation de la balise <label>
La méthode standard consiste à utiliser la balise <label> avec l'attribut for correspondant à l'attribut id du champ.
<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" />
2. Attribut aria-label
Si une étiquette visible n'est pas souhaitée (par exemple pour un champ de recherche avec une loupe), utilisez aria-label.
<input type="search" aria-label="Rechercher sur le site" />
<button type="submit">Rechercher</button>
3. Attribut aria-labelledby
Permet de lier un champ à un texte existant dans la page.
<h2 id="newsletter-title">Inscription à la newsletter</h2>
<input type="email" aria-labelledby="newsletter-title" />
4. Attribut title
L'attribut title peut servir d'étiquette de secours, mais il est moins robuste que les solutions précédentes.
<input type="text" title="Votre numéro de téléphone" />