Jour 33 - Des SVG accessibles

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

Ce que j’ai fait :

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 :

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