Images SVG accessibles : title, desc, role et aria-label expliqués

Les SVG posent des défis spécifiques d'accessibilité

Contrairement aux images raster (<img>), les SVG peuvent être inline (intégrés dans le HTML) ou en tant qu'attribut src. Les règles d'accessibilité diffèrent selon le cas et selon le rôle de l'SVG.

SVG décoratif

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

aria-hidden="true" masque l'SVG aux lecteurs d'écran. focusable="false" est nécessaire pour IE11 (sinon l'SVG reçoit le focus clavier).

SVG informatif

<svg role="img" aria-labelledby="titre-svg">
  <title id="titre-svg">Graphique des ventes Q1 2025</title>
  <desc>Les ventes ont augmenté de 15% par rapport à Q1 2024.</desc>
  ...
</svg>

SVG bouton interactif

<button type="button">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="sr-only">Fermer</span>
</button>

Le label est porté par le button, pas le SVG. Le span.sr-only est invisible visuellement mais lu par les lecteurs d'écran.

SVG utilisé comme <img src>

<img src="logo.svg" alt="RefAudit — Retour à l'accueil">

Traité comme une image normale : l'attribut alt est obligatoire pour les images informatives.