Les images SVG sont de plus en plus utilisées sur le web mais qu’en est-il de leur accessibilité ?

Voici quelques pistes sachant que le support navigateurs/aide techniques évolue très rapidement !
Important : Pensez donc à tester vos implémentations sur des cibles navigateurs /aides techniques les plus utilisées par vos utilisateurs, cela, quel que soit la solution pour laquelle vous optez. ;

Image de décoration #

SVG dans une balise img #


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

SVG en ligne (inline) #


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

On utilise focusable="false" pour éviter toute prise de focus sur le SVG par IE (>10 et Edge)

De plus, 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-*…).

Image informative (hors lien ou bouton) #

SVG dans une balise img #


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

en second choix :


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

On rajoute role="img" pour s’assurer qu’avec macOS Safari, VoiceOver (anciennes versions) annonce bien « image ».

SVG en ligne (inline) #


<svg viewBox="0 0 440 540" version="1.1" role="img"
  lang="fr" xml:lang="fr"
  aria-labelledby="title description">

  <title id="title">Revenus bruts 2019</title>

  <desc id="description">
    Ce schéma présente les revenus de l’année 2019, en pourcentage du total et en valeur absolue. Le total des revenus est de 20,3 millions d’Euros et se divise en 6,9 millions (34%) pour le premier trimestre, 2,1 millions (10%) pour le second, 10,3 millions pour le troisième (51%) et 1 million au dernier trimestre (5%).
  </desc>

  ...
</svg>

Le meilleur support pour les SVG est de les afficher inline.

Il faut utiliser aria-labelledby en premier choix en référençant le « title » et la « desc » (éviter aria-describedby pour la « desc », support encore mauvais) pour assurer un support maximal.
Les SVG servant de lien ou de bouton

Plusieurs choix possibles :


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

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

On utilise focusable="false" pour éviter toute prise de focus sur le SVG (en plus du lien a) par IE> 10 et Edge.
C’est la meilleure solution, la plus robuste mais pas toujours possible d’afficher un texte (contrainte graphique/design/marketing…).
Alors, voici une alternative qui permet de cacher visuellement le texte pour un bouton ou un lien tout en le laissant lisible par les aides techniques via aria-labelledby :


<button aria-labelledby="label"> 

  <span id="label" hidden>Rechercher</span>

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

</button>

Enfin, ces deux solutions suivantes sont équivalentes et de toute façon à tester dans vos environnements de navigation (couples navigateur/aide technique) ciblés.


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

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

La class visually-hidden permet de cacher le texte sauf aux utilisateurs d’aide technique (masquage accessible).

ou


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

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

ou, mais beaucoup plus risqué…
<button>
  <svg aria-labelledby="rechercher-icon-title" focusable="false" role=”img”>
    <title id="rechercher-icon-title">Rechercher</title>
    <!--...-->
  </svg>
</button>

Dernier mots… #

En résumé, un seul conseil pour du SVG accessible, ce serait TESTER et tester encore !

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