Sémantique
Le nom accessible doit contenir le texte visible
- Règle:
label-content-name-mismatch - Gravité: Sérieux
- Niveau WCAG A
Pourquoi c’est important
Qui utilise la commande vocale dit ce qu’il voit : « clique Valider la commande ». Si aria-label dit « Envoyer » à la place, la commande ne trouve rien et le composant devient impossible à actionner à la voix.
Comment corriger
- Faites en sorte que le nom accessible commence par le texte visible, ou le contienne mot pour mot.
- Ajoutez les précisions après le texte visible au lieu de le remplacer (« Valider la commande maintenant »).
- Quand un nom apporte du contexte, préférez aria-describedby pour que le texte visible reste le nom.
Dans le balisage
<button aria-label="Submit">Place order</button><button aria-label="Place order now">Place order</button>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 :
- 2.5.3 Intitulé dans le nom (s’ouvre dans un nouvel onglet) — Niveau WCAG A
Pour aller plus loin
Deque University sur label-content-name-mismatch (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.