Exemples de SVG accessibles

Page d'accompagnement de svg-accessibles.md. Chaque exemple est à tester avec un lecteur d'écran.

1. SVG décoratif

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

2. SVG informatif simple

Évolution des ventes 2024 Hausse de 12 % entre janvier et décembre. 
<svg role="img" aria-labelledby="t1 d1" focusable="false">
  <title id="t1">Évolution des ventes 2024</title>
  <desc id="d1">Hausse de 12 % entre janvier et décembre.</desc>
  …
</svg>

role="img" n'est pas strictement obligatoire, mais il garantit un traitement comme image quel que soit le navigateur.

3. SVG complexe avec alternative textuelle

Ventes par trimestre en 2024 (détail dans le tableau)
Ventes par trimestre, 2024.
Données du graphique
TrimestreVentes (k€)
T140
T255
T370
T485

4. Icône dans un bouton

<button type="button" aria-label="Fermer">
  <svg aria-hidden="true" focusable="false" …>…</svg>
</button>

Le nom accessible est porté par le bouton, pas par le SVG.

<a xlink:href="…" xlink:title="Agence de Paris">
  <circle cx="60" cy="50" r="18" …/>
</a>

Selon SVG-AAM (Working Draft), xlink:title est la quatrième source du nom accessible d'un lien, après aria-labelledby, aria-label et le <title> enfant direct. Cet attribut est déprécié dans SVG 2. Un <title> enfant du lien est une alternative plus sûre. Le <svg> porte ici role="group" et non role="img", car img rend ses enfants présentationnels et masquerait les liens. Les liens restent focusables, mais leur rendu visible au focus est à prévoir en CSS.