Alternatives textuelles

Les images SVG ont besoin d’un nom

Règle: svg-img-alt
Gravité: Sérieux
Niveau WCAG A

Pourquoi c’est important

Un <svg> marqué role="img" est annoncé comme une image sans description : une icône en ligne ou un graphique ne transmet alors rien.

Comment corriger

Ajoutez un élément <title> comme premier enfant du <svg>.
Ou utilisez aria-label sur le <svg> lui-même.
Pour une icône décorative à côté d’un texte visible, retirez role="img" et ajoutez aria-hidden="true".

Dans le balisage

Échoue

<svg role="img" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

Réussit

<svg role="img" viewBox="0 0 24 24">
  <title>Download</title>
  <path d="..."/>
</svg>

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 svg-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.