Critère 1.5

Images vectorielles (SVG)

Les images SVG porteuses d'information doivent avoir une alternative textuelle accessible.

En Bref : L'essentiel à retenir

Pour rendre les SVG accessibles, utilisez `role="img"` et `aria-label` (ou `aria-labelledby`) pour les SVG informatifs.
Pour les SVG décoratifs, utilisez `aria-hidden="true"` et `focusable="false"` pour les cacher aux lecteurs d'écran.
La balise `<title>` peut également être utilisée pour la description des SVG informatifs, mais elle est moins robuste.
L'accessibilité des SVG est liée au critère 1.1.5 du RGAA.

Objectif

Les images SVG sont souvent utilisées pour des icônes ou des graphiques. Elles doivent être accessibles aux lecteurs d'écran si elles portent une information.

Solution Technique

1. SVG informatif

Utilisez role="img" pour indiquer qu'il s'agit d'une image, et aria-label (ou aria-labelledby) pour la description.

<!-- ✅ Recommandé : aria-label -->
<svg role="img" aria-label="Menu principal" viewBox="0 0 24 24">
  <path d="..." />
</svg>

Alternative avec la balise <title> (moins robuste sur certains anciens navigateurs/lecteurs) :

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

2. SVG décoratif

Si le SVG est décoratif, cachez-le.

<svg aria-hidden="true" focusable="false" viewBox="...">
  <path d="..." />
</svg>

Ressources

Critère 1.1.5 du RGAA