svg : comment bien faire ?

Dans cet article, nous vous expliquons comment traiter les balises svg :

  • qui embarquent du contenu décoratif ;
  • qui véhiculent de l’information ;
  • intégrées dans des liens.

Nous ne traiterons pas ici de la méthode pour déterminer si une image véhicule ou non de l’information. Pour cela, nous vous renvoyons au « Guide du concepteur RGAA 3 » de la DINSIC.

Si l’élément ne véhicule pas d’informations

Dans ce cas, il faut définir sur la balise svg la propriété aria-hidden="true" qui informe les APIs d’accessibilité que l’élément doit être ignoré et donc que les lecteurs d’écran ne doivent pas le restituer.

Exemple

 [1]
<svg aria-hidden="true">
<g>
 <path d="..."/>
</g>
</svg>

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. Vous devez donc vérifier l’absence, pour la balise <svg> ou un de ses enfants :

  • de la balise <title> ;
  • de la balise <desc> ;
  • des attributs title, aria-label, aria-labelledby ou aria-describedby.

Et c’est tout !

Note : la balise svg reçoit de nombreux autres attributs (xmlns, viewbox, xml:space) qui n’intéressent pas l’accessibilité et que nous éludons donc volontairement dans les extraits de code présentés pour en faciliter la lecture.

Si l’élément véhicule de l’information

1. Définir le rôle de la balise svg

La balise svg n’est pas toujours reconnue comme étant une image. C’est dans ces situations qu’ARIA est un outil indispensable. On va donc définir le rôle de la balise svg comme étant celui d’une image : role="img". Sans cet attribut, dans certaines configurations, la balise svg est tout simplement ignorée et n’est pas restituée aux utilisateurs de lecteurs d’écran.

&lt;svg role="img"&gt;
[path...]
&lt;/svg&gt;

2. Définir le nom accessible de la balise svg

Maintenant que la balise svg est une image, il faut définir l’alternative textuelle qui sera restituée par les technologies d’assistance. Vous devez au minimum implémenter :

  • la propriété aria-label ;
  • la balise <title> ;
  • les deux doivent avoir le même contenu, et celui-ci doit évidemment être pertinent.

Exemple

Et donc, le résultat final, pour un svg porteur d’information, accessible :

Access42
&lt;svg role="img" aria-label="Access42"&gt;
&lt;title&gt;Access42&lt;/title&gt;
[path...]
&lt;/svg&gt;

Si vous décidez de mettre l’attribut title (qui n’est pas obligatoire) sur la balise svg, assurez-vous que son contenu soit identique au contenu de la propriété aria-label et de la balise <title>.

&lt;svg role="img" aria-label="Access42" title="Access42"&gt;
&lt;title&gt;Access42&lt;/title&gt;
[path...]
&lt;/svg&gt;

Si l’élément est un lien

Dans le cas où le svg est le seul contenu d’un lien, son alternative textuelle devient l’intitulé du lien. Il n’y a alors pas de différence avec l’implémentation pour une image porteuse d’information, il faut toujours :

  • un attribut aria-label sur la balise svg qui donne la fonction du lien ;
  • un élément title identique à aria-label.
&lt;a href="http://access42.net"&gt;
&lt;svg role="img" aria-label="Access42"&gt;
 &lt;title&gt;Access42&lt;/title&gt;
 [path...]
&lt;/svg&gt;
&lt;/a&gt;

Comme pour le title sur la balise svg, si vous voulez ajouter un title sur le lien (la balise <a>), assurez-vous que son contenu soit identique à la propriété aria-label.

En résumé, pour toutes les méthodes de labellisation reconnues (aria-label, <title>, ou attribut title sur la balise svg ou le lien), vous devez toujours implémenter le même contenu.

Autres implémentations

Nous détaillons en priorité les implémentations reconnues par le RGAA 3.0 (version 2017). Aujourd’hui par exemple, le support d’aria-labelledby est correct sur l’ensemble des technologies d’assistance et navigateurs reconnus par la base de référence du RGAA. Il pourrait donc devenir conforme, à l’avenir, de labelliser votre svg porteur d’information grâce à cette méthode :

&lt;svg role="img" aria-labelledby="svg1"&gt;
 &lt;title id="svg1"&gt;Access42&lt;/title&gt;
 [path...]
&lt;/svg&gt;

Compatibilité avec les lecteurs d’écran

Le support d’ARIA et de svg étant particulièrement changeant, toutes les implémentations de balises svg doivent être testées.

Afin de pouvoir suivre l’évolution des restitutions par les lecteurs d’écran, nous avons construit des pages de test qui donnent pour chaque couple navigateur / lecteur d’écran la compatibilité et les restitutions associées, pour les propriétés et balises :

Références documentaires

Tests RGAA 3 associés

Normes internationales