Le SVG en ligne peut faire des miracles pour le design responsif tout en réduisant le temps de chargement des pages web et en produisant des icônes propres et à la netteté parfaite — mais il n’est pas sans poser quelques problèmes, parmi lesquels l’accessibilité. L’accessibilité n’était pas une priorité lorsque la spécification originale SVG 1.0 a été publiée il y a 15 ans. Cependant, SVG 1.1 a amélioré les choses et SVG 2.0 devrait à l’avenir mettre l’accessibilité au premier plan.

Pour l’instant, rendre les SVG accessibles demande un peu de travail, mais c’est un processus assez simple si vous suivez ces cinq règles :

1 - Traitez les liens vers une image SVG comme les bitmaps

Lorsque vous faites un lien vers un document SVG comme image, l’attribut alt est requis :

//HTML
<img src="coca-cola-logo.svg" alt="Coca-Cola">

...comme pour n’importe quelle image matricielle (bitmap).

2 - Pour SVG en ligne, donnez un titre

Le <title> d’un élément SVG sert le même objectif que le <title> d’un document HTML : C’est une brève description du document, ou un conseil. On peut le voir comme le <alt> d’un SVG inline.

//HTML
<header>
  <svg>
    <title>Coca-Cola</title>
    <polyline ... />
   </svg>
</header>

<title> peut également être utilisé pour les éléments individuels : plus spécifiquement <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> et <use>, ainsi que les éléments container SVG tels que <a>, <defs>, <g> et <symbol>. <title> sera généralement le premier enfant de cet élément. Parfois, ce titre sera visuellement descriptif :

<title>Yellow Five-Pointed Star</title>
<polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>

...et parfois il sera informationnel (c’est à dire qu’il décrit la finalité d’un élément, ou son sens).

Note : on remarquera que les éléments <text> de SVG inline sont dans la plupart des cas complètement accessibles, puisqu’ils contiennent du texte — quels que soient les effets graphiques qui leur sont appliqués — ils n’auront donc pas besoin de <title> dans ce cas. Toutefois, si transformez votre texte en pures formes vectorielles, il vous faudra fournir un <title>.

Comme pour les pages HTML, le texte situé à l’intérieur d’un élément SVG est lu par les outils d’accessibilité dans l’ordre du document, et non dans l’ordre de leur position visuelle à l’écran.

Si un SVG ne contient qu’un seul élément, un simple <title> après la balise ouvrante <svg> pourra s’avérer suffisant. Si le document contient plusieurs éléments, vous aurez probablement besoin d’un <title> pour chacun ou pour chaque groupe :

<svg>
  <g>
    <title>Red Rectangle</title>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>

Vous pouvez améliorer cette information en associant <title> à aria-labelledby. Dans le cas d’un élément simple, cela peut renvoyer à l’élément racine <svg> :

<svg aria-labelledby="title">
  <g>
    <title id="title" lang="en">Red Rectangle</title>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>

Tout comme <desc> et d’autres éléments HTML, <title> devrait également avoir un attribut lang indiquant la langue utilisée (voir plus bas).

Note : il est possible de naviguer vers les éléments SVG utilisés dans les balises <img> comme s’ils étaient des éléments autonomes, ils peuvent également être indexés par les moteurs de recherche en tant de documents séparés, et de ce fait ils devraient aussi contenir un <title> et une <desc> appropriés dans le balisage du document SVG original.

3 - Donnez une description lorsque nécessaire

<desc> correspond à une description plus longue de votre élément SVG, spécifiant son intention. On peut le voir un peu comme l’équivalent SVG de figcaption.

<svg>
  <g>
    <title>International sales by country</title>
    <title lang="fr">Les ventes internationales par pays</title>
    <desc>Bar chart showing company sales by country, in millions of dollars (US).</desc>
    <desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc>
  <g>
    <text x="20" y="70">US Sales</text>
    <title id="USamount">30 million</title>
    <rect x="0" y="0" width="100" height="50" fill="red" aria-labelledby="USamount" />
  </g>
  <g>
    <text x="20" y="70">French Sales</text>
    <title id="FRamount">50 million</title>
    <rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount" />
  </g>
  </g>
</svg>

Cet exemple suppose que vous fournirez également les axes graphiques et les informations chiffrées pour les utilisateurs n’ayant pas de problèmes d’accessibilité : quand c’est possible, exposer l’information sous forme de <text> rendra service à tous.

4 - Vous n’avez rien à faire si le SVG est purement décoratif

Si l’élément SVG est utilisé à des fins purement décoratives — un dégradé ou un motif de background par exemple — pas besoin de fournir <title>, <desc> ni alt. (Si vous voulez que votre page soit validée par les outils de validation, vous devrez mettre un alt pour les SVG liés, mais vide pour les éléments décoratifs, c’est à dire alt="" ou simplement alt).

Par défaut, ni <desc> ni <title> ne sont rendus visuellement dans le navigateur (bien qu’on puisse leur appliquer un style pour qu’ils le soient) ; le texte de <title> apparaîtra au survol dans les navigateurs compatibles. ( NdT : vous pouvez faire l’essai avec le diagramme ci-dessus).

5 - Ne comptez pas sur votre WYSIWYG pour le faire à votre place

Malheureusement, Adobe Illustrator ne supporte que très peu l’accessibilité SVG. Il exporte les noms de calques comme des valeurs d’ id plutôt que comme une information <title>. Inkscape fait mieux en vous permettant d’ajouter et d’éditer <title> et <desc> pour chaque élément, avec l’inconvénient d’ajouter du code redondant à votre markup. Vous en viendrez sans doute à la conclusion qu’il est préférable d’ajouter un peu de code à la main pour ajouter une pleine accessibilité à un document SVG réalisé avec les outils vectoriels.