Formulaires
Les listes déroulantes ont besoin d’un nom
- Règle:
select-name - Gravité: Critique
- Niveau WCAG A
Pourquoi c’est important
Une liste déroulante sans étiquette est annoncée « zone de liste, Allemagne » : la valeur en cours, sans indice sur ce qui est sélectionné.
Comment corriger
- Ajoutez un <label for="…"> correspondant à l’id du select.
- Si la maquette ne prévoit pas d’étiquette visible, utilisez aria-label.
- Une première option « Choisissez un pays » n’est pas une étiquette : elle disparaît dès qu’un choix est fait.
Dans le balisage
<select id="country">...</select><label for="country">Country</label>
<select id="country">...</select>L’exigence sous-jacente
Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :
- 4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A
Pour aller plus loin
Deque University sur select-name (s’ouvre dans un nouvel onglet)
Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.
Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.