svg

1. Implémentation minimale requise par le RGAA : aria-label et balise <title>

<svg role="img" aria-label="la propriété aria-label pour labelliser">
 <title>doit être identique à la balise title</title>
 […]
</svg>

2. Implémentation minimale et attribut title

<svg role="img" aria-label="la propriété aria-label pour labelliser" title="et à l’attribut title de la balise">
<title>doit être identique à la balise title</title>
[...]
</svg>

3. aria-labelledby référençant les balises title et desc

<svg aria-labelledby="svg1 svg2" role="img">
 <title id="svg1">labellisation par la balise title</title>
 <desc id="svg2">et la balise desc</desc>
 [...]
</svg>

Notes annexes

Balise <title> et attribut title

La spécification SVG indique que l’agent utilisateur doit utiliser le contenu de la balise title pour créer le tooltip affiché au survol de la souris, et ce même si un attribut title est défini.

Sur Firefox 60 et Safari 11.1, c'est bien le contenu de la balise title qui est utilisé pour créer l’infobulle.

Sur Internet Explorer et Edge, aucun tooltip n’est disponible quelle que soit l’implémentation.

Concernant VoiceAssistant

Lorsqu'on navigue sur un élément svg porteur d’information avec VoiceAssistant, l’interaction est différente avec les navigateurs Firefox et Internet. Avec Firefox, VoiceAssistant va parcourir les noeuds enfants de l’élément svg en restituant pour chacun « graphique ». Il est nécessaire, dans Firefox, de réaliser plusieurs balayages pour s'extraire de l’élément. À l’inverse, l’interaction avec les éléments svg dans le navigateur Internet est logique. Il n’y à qu'une prise de focus sur l’élément svg, le prochain balayage déplaçant le focus sur l’élément suivant.

Concernant VoiceOver sur iOS

Selon le mode d’accès, la balise svg n’est pas reconnue. Par exemple, en simple glisser, VoiceOver n’accède pas au svg. Par contre, lorsque l’on choisit « Lignes » avec le rotor, et que l’on navigue avec les flèches haut et bas, on accède au svg. C'est ce que nous avons indiqué dans le tableau par « accès par lignes »

Ressources

• RGAA 3 :
  • 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) ?