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

doit être identique à la balise title
<svg role="img" aria-label="la propriété aria-label pour labelliser">
 <title>doit être identique à la balise title</title>
 […]
</svg>
Restitution pour l’implémentation minimale requise par le RGAA 3
NVDA 2018.1.1 JAWS 18 JAWS 2018 VoiceOver (macOS High Sierra 10.13.4)
Firefox 60 restitution conforme : aria-label « la propriété aria-label pour labelliser graphique la propriété aria-label pour labelliser » non applicable restitution non conforme : élément ignoré non applicable
Internet Explorer 11 restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » restitution conforme : balise <title> « doit être identique à la balise graphique » restitution conforme : <title> « graphique doit être identique à la balise titre » non applicable
Edge 42 restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » non applicable restitution conforme : aria-label « la propriété aria-label pour labelliser graphique la propriété aria-label pour labelliser » non applicable
Chrome 67 restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » non applicable
Safari 11.1 non applicable non applicable non applicable restitution conforme : aria-label puis <title> « la propriété aria-label pour labelliser groupe doit être identique à la balise title »

Mobile

Restitution sur mobile pour l’implémentation minimale requise par le RGAA 3
VoiceAssistant Talkback (6.1) VoiceOver (iOS 10.3.3)
Firefox 60 restitution conforme : aria-label « graphique graphique graphique la propriété aria-label pour labelliser graphique » non applicable non applicable
Internet 7 / 6.4 restitution conforme : aria-label « la propriété aria-label pour labelliser élément graphique » restitution conforme : aria-label « la propriété aria-label pour labelliser élément graphique » non applicable
Chrome 66 restitution conforme : aria-label « la propriété aria-label pour labelliser élément graphique » restitution conforme : aria-label « la propriété aria-label pour labelliser élément graphique » non applicable
Safari non applicable non applicable restitution conforme aria-label (accès par lignes) « la propriété aria-label pour labelliser »

2. Implémentation minimale et attribut title

doit être identique à la balise 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>
Restitution pour l’implémentation minimale avec l’attribut title
NVDA 2018.1.1 JAWS 18 JAWS 2018 VoiceOver (macOS High Sierra 10.13.4)
Firefox 60 restitution conforme : aria-label « la propriété aria-label pour labelliser graphique la propriété aria-label » non applicable restitution non conforme : élément ignoré non applicable
Internet Explorer 11 restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » restitution conforme : <title> « graphique doit être identique à la balise title » restitution conforme : <title> « graphique doit être identique à la balise titre » non applicable
Edge 42 restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » non applicable restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » non applicable
Chrome 67 restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » restitution conforme : aria-label « graphique la propriété aria-label pour labelliser » non applicable
Safari 11.1 non applicable non applicable non applicable restitution conforme : aria-label puis balise <title> « groupe la propriété aria-label pour labelliser groupe doit être identique à la balise title »

Mobile

Restitution sur mobile pour l’implémentation minimale avec l’attribut title
VoiceAssistant Talkback (6.1) VoiceOver (iOS 10.3.3)
Firefox 60 restitution conforme : aria-label « graphique graphique graphique la propriété aria-label pour labelliser graphique » restitution conforme : aria-label « graphique graphique graphique la propriété aria-label pour labelliser graphique » non applicable
Internet 7 / 6.4 restitution conforme : aria-label puis attribut title « la propriété aria-label pour labelliser et à l’attribut title de la balise élément graphique » restitution conforme : aria-label puis attribut title « la propriété aria-label pour labelliser et à l’attribut title de la balise élément graphique » non applicable
Chrome 66 restitution conforme : aria-label « la propriété aria-label pour labelliser élément graphique » restitution conforme : aria-label « la propriété aria-label pour labelliser élément graphique » non applicable
Safari non applicable non applicable restitution conforme aria-label (accès par lignes) « la propriété aria-label pour labelliser »

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

labellisation par la balise title et la balise 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>
Restitution pour l’implémentation d’une alternative avec aria-labelledby
NVDA 2018.1.1 JAWS 18 JAWS 2018 VoiceOver (macOS High Sierra 10.13.4)
Firefox 60 restitution conforme : contenu de <title> puis <desc> « labellisation par la balise title et la balise desc graphique labellisation par la balise title et la balise desc graphique » non applicable non applicable non applicable
Internet Explorer 11 non applicable restitution conforme : contenu de <title> puis <desc> « graphique labellisation par la balise title graphique et la balise desc » restitution conforme : contenu de <title> puis <desc> « labellisation par la balise title » et après avoir déplacé le curseur à nouveau « graphique la balise desc » non applicable
Edge 42 non applicable non applicable restitution conforme : contenu de<title> « labellisation par la balise title » non applicable
Chrome 67 restitution conforme : contenu de<title> puis <desc> « labellisation par la balise title et la balise desc graphique labellisation par la balise title et la balise desc graphique » restitution conforme : contenu de <title> puis <desc> « graphique labellisation par la balise titleet la balise desc » restitution conforme : contenu de <title> puis <desc> « labellisation par la balise title et la balise desc » non applicable
Safari 11.1 non applicable non applicable non applicable restitution conforme : contenu de <title> puis <desc> « labellisation par la balise title et la balise desc groupe et la balise desc »

Mobile

Restitution sur mobile pour l’implémentation d’une alternative avec aria-labelledby
VoiceAssistant Talkback (6.1) VoiceOver (iOS 10.3.3)
Firefox 60 (Android 8.0.0) restitution conforme : les deux textes reliés par aria-labelledby « graphique graphique graphique labellisation par la balise title et la balise desc et la balise desc graphique » restitution conforme : les deux textes reliés par aria-labelledby « graphique graphique graphique la balise title et la balise desc et la balise desc graphique » non applicable
Internet 7 / 6.4 restitution conforme : les deux textes reliés par aria-labelledby « labellisation par la balise title et la balise desc élément graphique » restitution conforme : les deux textes reliés par aria-labelledby « labellisation par la balise title et la balise desc élément graphique » non applicable
Chrome 66 restitution conforme : les deux textes reliés par aria-labelledby « labellisation par la balise title et la balise desc élément graphique » non applicable
Safari non applicable non applicable restitution conforme : les deux textes reliés par aria-labelledby (accès par lignes) « labellisation par la balise title et la balise desc »

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