L'accessibilité des images SVG

Voici quelques recommandations techniques pour vous aider à intégrer des images SVG accessibles.

Important : quelle que soit la solution retenue, le support navigateurs/aides techniques évoluant très rapidement, pensez à tester vos implémentations sur les configurations les plus utilisées par vos utilisateurs.

Image de décoration #

SVG dans une balise img #

HTML

<img src="XXX.svg" alt="" aria-hidden="true">

SVG en ligne (inline) #

HTML

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

Vous devez vous assurer que la balise svg ou un de ses enfants (<g>, <path>…) ne possède aucun attribut visant à lui fournir un nom accessible (title, desc, aria-*…).

Note : historiquement, l'attribut focusable="false" devait aussi être présent pour éviter toute prise de focus sur le SVG par Internet Explorer et Edge (avant Chromium), ceci n'est plus utile sur les navigateurs actuels (sauf si vos utilisateurs utilisent encore des anciens navigateurs mentionnés).

Image informative (hors lien ou bouton) #

SVG dans une balise img #

La solution la plus efficace consiste à utiliser l'attribut alt :

HTML

<img src="XXX.svg" role="img" alt="texte de remplacement">

en second choix, utiliser aria-label (mais cela enfreint la première règle d'ARIA, à savoir, ne pas utiliser d'ARIA si une solution native HTML existe) :

HTML

<img src="XXX.svg" role="img" aria-label="texte de remplacement">

Note : Afin d'assurer un support optimal par les aides techniques et navigateurs, éviter l'usage de aria-labelledby pointant sur un texte masqué :

HTML

<p id="alt-text" class="visually-hidden">texte de remplacement</p>
<img src="XXX.svg" role="img" aria-labelledby="alt-text">

Note : On rajoute role="img" pour s'assurer que l'élément soit bien considéré comme une image par les technologies d'assistance.

SVG en ligne (inline) #

Le meilleur support pour les SVG est l'affichage en ligne (balise <svg>).

HTML

<svg role="img">
  <title>texte de remplacement</title>
  ...
</svg>

<svg role="img" aria-labelledby="alt-text">
  <title id="alt-text">texte de remplacement</title>
  ...
</svg>

<svg role="img" aria-label="alt-text">
  ...
</svg>

Si besoin, pour des images dont le contenu nécessite une description détaillée, il est possible d'utiliser aria-labelledby en référençant le « title » et la « desc » :

HTML

<svg role="img" aria-labelledby="alt-text description">

  <title id="alt-text">texte de remplacement court</title>

  <desc id="description">
    Description détaillée de l'information portée par l'image.
  </desc>
  ...
</svg>

Note : afin d'assurer un support optimal par les aides techniques et navigateurs, éviter l'usage de aria-describedby pour la description.

Si vous utilisez l'élément <use> pour cloner plusieurs versions du SVG, pensez à le masquer avec aria-hidden :

HTML

<svg role="img">
  <title>texte de remplacement</title>
    <use href="some-id" fill="blue" x="5" y="5" aria-hidden="true" />
  ...
</svg>

Les SVG dans des liens ou boutons #

S'il est possible d'afficher du texte à proximité, la meilleure solution est de simplement masquer le SVG à l'aide de l'attribut aria-hidden :

HTML

<button>
  <svg aria-hidden="true"><!--...--></svg>
  Texte visible
</button>

<a href="/Rechercher">
  <svg aria-hidden="true"><!--...--></svg>
  Texte visible
</a>

Mais comme il n'est pas toujours possible d'afficher un texte (contrainte graphique/design/marketing…), il est conseillé de cacher visuellement un texte tout en le laissant lisible par les aides techniques via aria-labelledby :

HTML

<button aria-labelledby="label"> 
  <span id="label" hidden>Texte masqué</span>
  <svg aria-hidden="true"><!--...--></svg>
</button> 

<a href="/Rechercher">
  <span id="label" hidden>Texte masqué</span>
  <svg aria-hidden="true"><!--...--></svg>
</a>

La classe visually-hidden permet également de présenter le texte uniquement aux utilisateurs d'aide technique (masquage accessible).
La solution suivante est similaire à la précédente, mais à tester systématiquement dans vos environnements de navigation ciblés (couples navigateur/aide technique).

HTML

<button>
  <svg aria-hidden="true"><!--...--></svg>
  <span class="visually-hidden">Rechercher</span>
</button>

<a href="/Rechercher">
  <svg aria-hidden="true"><!--...--></svg>
  <span class="visually-hidden">Rechercher</span>
</a>

Il est aussi possible d'utiliser l'attribut aria-label :

HTML

<button aria-label="Rechercher">
  <svg aria-hidden="true"><!--...--></svg>
</button>

<a href="/Rechercher" aria-label="Rechercher">
  <svg aria-hidden="true"><!--...--></svg>
</a>

Dernier mot… #

En résumé, s'il ne fallait retenir qu'un seul conseil pour du SVG accessible, ce serait TESTER et tester encore !

Webographie (articles qui m'ont bien, bien aidés) #

Creating Accessible SVGs - Deque (en)
Accessible SVG test page (en)
Contextually Marking up accessible images and SVGs - Scott O'Hara (en)
SVG Icons and Screen Reader Accessibility (en)
SVG Accessible ! - Github Jeremie Patonnier
Accessible Icon Buttons - Sara Soueidan (en)
Accessible SVGs: Perfect Patterns For Screen Reader Users - Smahsing Magazine (en)