Alternatives textuelles

Les zones d’une image réactive ont besoin d’une alternative textuelle

Règle: area-alt
Gravité: Critique
Niveau WCAG A

Pourquoi c’est important

Chaque zone cliquable d’une image réactive est un lien. Sans alternative textuelle, un lecteur d’écran énonce l’URL de destination : une carte de l’Europe devient une liste de chemins de fichiers.

Comment corriger

Donnez à chaque <area> un attribut alt qui nomme la destination, pas l’apparence.
Reprenez la formulation des liens textuels équivalents ailleurs sur la page.
Si une zone ne doit pas être cliquable, retirez son href plutôt que de laisser un alt vide.

Dans le balisage

Échoue

<map name="europe">
  <area shape="rect" coords="0,0,60,40" href="/de">
</map>

Réussit

<map name="europe">
  <area shape="rect" coords="0,0,60,40" href="/de" alt="Germany">
</map>

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.4.4 Fonction du lien (dans le contexte) (s’ouvre dans un nouvel onglet) — Niveau WCAG A
4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur area-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.