Intégrer des Scalable Vector Graphics (SVG) de manière accessible.

Ce que j’ai fait :

• lire l’article SVG : comment bien faire ?(lien externe) d’Access42
• lire la notice Gérer l’alternative des SVG(lien externe) d’AcceDe Web
• lire l’article Le vaste monde des alternatives textuelles : la balise <title> et les images SVG(lien externe) de Julie Moynat

Ce que j’ai appris

SVG décoratifs

Dans le cas d’un SVG décoratif, celui-ci doit être ignoré par les technologies d’assistance. Pour ce faire, le SVG doit être intégré de la manière suivante :

• ajouter un attribut aria-hidden="true" sur la balise <svg> pour que les lecteurs d’écran ne restituent pas le SVG

• ajouter un attribut focusable="false" sur la balise <svg> pour empêcher le SVG de recevoir le focus clavier sous Internet Explorer

• s’assurer que la balise <svg> ou un de ses enfants (<g>, <path>…) ne possède aucune balise <title> ou <desc> et aucun attribut title, aria-label, aria-labelledby ou aria-describedby

Par exemple :

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

SVG porteurs d’information

Si le SVG a un rôle informatif, il doit être intégré de la manière suivante :

• ajouter un role="img" sur la balise <svg> pour que le SVG soit bien reconnu comme une image par les différentes technologies d’assistance

• ajouter un attribut focusable="false" sur la balise <svg> pour empêcher le SVG de recevoir le focus clavier sous Internet Explorer

• ajouter un attribut aria-label qui contient l’alternative textuelle permettant d’expliciter le SVG

• ajouter dans la balise <svg> une balise <title> qui contient la même alternative textuelle que dans l’attribut aria-label (cette balise <title> peut être masquée en CSS pour n’être lue que par les lecteurs d’écran)

• si nécessaire, ajouter une balise <desc> dans la balise <svg> pour fournir une description détaillée du SVG

• si souhaité, ajouter un attribut title sur la balise <svg> (pour faire apparaître une information au survol par exemple), et s’assurer que son contenu est strictement le même que celui de l’attribut aria-label de l’élément <svg> et de la balise <title> (cependant l’ajout d’un attribut title n’est pas obligatoire et, nous l’avons vu à plusieurs reprises, pas forcément recommandé)

Par exemple :

<svg aria-label="Alternative textuelle" role="img" focusable="false>
  <title>Alternative textuelle</title>
  <desc>Description détaillée si nécessaire</desc>
  [...]
</svg>

SVG liens

Lorsqu’un SVG seul (sans intitulé visible) fait office de lien (ou bouton), il doit être intégré de la manière suivante :

• ajouter un role="img" sur la balise <svg> pour que le SVG soit bien reconnu comme une image par les différentes technologies d’assistance

• ajouter un attribut focusable="false" sur la balise <svg> pour empêcher le SVG de recevoir le focus clavier sous Internet Explorer

• ajouter un attribut aria-label qui contient la destination ou la fonction du lien

• ajouter dans la balise <svg> une balise <title> qui contient la destination ou la fonction du lien (identique à celle de l’attribut aria-label)

• si souhaité, ajouter un attribut title sur la balise <svg>, dont le contenu est strictement le même que celui de l’attribut aria-label de l’élément <svg> et de la balise <title>

Par exemple :

<a href="#">
  <svg aria-label="Destination/Fonction du lien" role="img" focusable="false>
    <title>Destination/fonction du lien</title>
    [...]
  </svg>
</a>

Compatibilité avec les lecteurs d’écran

Access42 propose des pages de test permettant de suivre l’évolution des restitutions par les lecteurs d’écran pour :

• l’attribut aria-hidden(lien externe)

• la balise <svg>(lien externe)

(Note de l’autrice : la dernière mise à jour de ces pages remonte au 11 juin 2018)