Comment intégrer du SVG de manière accessible ?

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’information

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 !

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.

<svg role="img">
[path...]
</svg>

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 :

<svg role="img" aria-label="Access42">
<title>Access42</title>
[path...]
</svg>

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

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.

<a href="http://access42.net">
<svg role="img" aria-label="Access42">
<title>Access42</title>
[path...]
</svg>
</a>

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, balise 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 :

<svg role="img" aria-labelledby="svg1">
<title id="svg1">Access42</title>
[path...]
</svg>

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 :

• attribut aria-hidden ;
• balise svg.

Références documentaires

Tests RGAA 3 associés

Images de décoration

Test 1.2.4 : Chaque image vectorielle (balise svg) de décoration, sans légende, vérifie-t-elle ces conditions ?

Images porteuses d’information

• Test 1.3.8 : Chaque image vectorielle (balise svg) porteuse d’information, en l’absence d’alternative, vérifie-t-elle ces conditions (hors cas particuliers) ?
• Test 1.3.9 : Pour chaque image vectorielle (balise svg) porteuse d’information et possédant une alternative, cette alternative est-elle correctement restituée par les technologies d’assistance ?

Images CAPTCHA

• Test 1.4.8 : Chaque image vectorielle (balise svg) utilisée comme CAPTCHA ou comme image-test, en l’absence d’alternative, vérifie-t-elle ces conditions ?
• Test 1.4.9 : Pour chaque image vectorielle (balise svg) utilisée comme CAPTCHA ou comme image-test, possédant une alternative, cette alternative est-elle correctement restituée par les technologies d’assistance ?

Normes internationales

• aria-hidden dans la spécification ARIA 1.1.