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 :

  <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.

  <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 vous 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>
</svg>

French SalesBar chart showing company sales by country, in millions of dollars (US).Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).US SalesFrench Sales

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 comme dans l'illustration qui précède.

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.

Ressources complémentaires en anglais

• Tips for creating accessible SVG, par Léonie Watson

Ressources complémentaires en français

• SVG, liens et lecteurs d’écran, sur le blog d’Atalan