Alternatives textuelles
Les éléments avec role="img" ont besoin d’un nom
- Règle:
role-img-alt - Gravité: Sérieux
- Niveau WCAG A
Pourquoi c’est important
role="img" annonce « ceci est une image » puis n’a rien à en dire. Une notation en étoiles dessinée en CSS devient une image annoncée mais vide.
Comment corriger
- Ajoutez aria-label décrivant ce que la composition transmet (« Noté 4 sur 5 »).
- Utilisez aria-labelledby quand la description existe déjà en texte visible.
- Si c’est purement décoratif, supprimez role="img" et ajoutez aria-hidden="true".
Dans le balisage
<div role="img" class="star-rating"></div><div role="img" class="star-rating" aria-label="Rated 4 out of 5"></div>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 :
- 1.1.1 Contenu non textuel (s’ouvre dans un nouvel onglet) — Niveau WCAG A
Pour aller plus loin
Deque University sur role-img-alt (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.