5 règles pour rendre SVG accessible

SVG est formidable pour le design responsive, la performance et la qualité vectorielle, mais rendre SVG accessible demande encore du travail, simple avec ces 5 règles proposées par Dudley Storey.

Par

Le SVG en ligne peut faire des miracles pour le design responsive 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>

International sales by countryLes ventes internationales par paysBar 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 Sales30 millionFrench Sales50 million

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.


Intéressé par SVG et par l’accessibilité ? Retrouvez une liste des meilleurs articles sur SVG et sur l’accessibilité et des meilleures ressources sur SVG et sur l’accessibilité.


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


Du même auteur dans La Cascade :

3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.