Images de SVG

Conception avec images SVG

SVG signifie Scalable Vector Graphics (Graphiques vectoriels adaptables). Les SVG sont des images 2Ds définies dans des fichiers texte XML. Ils peuvent être recherchés, indexés, scénarisés et comprimés. Les SVG peuvent aussi être dynamiques, interactifs et animés. Créés en 1999, ils sont maintenant bien pris en charge par les navigateurs. Quelques avantages des SVG en matière d’accessibilité :

• Les SVG peuvent atteindre n’importe quelle taille sans perte en qualité.
• Les couleurs SVG sont facilement personnalisables par le créateur et l’utilisateur final.
• Les SVG prennent en charge le balisage et les caractéristiques d’accessibilité.

Cette image illustre la différence entre les images bitmap et les images vectorielles. L’image bitmap, appelée image tramée, est composée d’un ensemble fixe de pixels, tandis que l’image vectorielle est composée d’un ensemble fixe de formes. Dans cette image, la mise à l’échelle de l’image bitmap révèle les pixels tandis que la mise à l’échelle de l’image vectorielle préserve les formes:

Il existe deux façons d’ajouter des SVG à une page accessible :

• Utiliser l’élément <img> et faire référence au fichier SVG au moyen de l’attribut src.
• Utiliser l’élément <svg> pour intégrer le SVG directement dans le code HTML.

La troisième façon d’ajouter le SVG à une page et de l’imbriquer dans un élément <iframe> ou <embed> est mal prise en charge par les technologies d’assistance.

• Ne pas intégrer le SVG en utilisant <object> ou <iframe>

Technique 1 : Utiliser l’élément img pour faire référence au SVG au moyen de l’attribut src

• À utiliser pour les images simples et non compliquées avec texte de remplacement descriptif de base.
• Utiliser l’élément <img> et l’attribut src.
• Ajouter role="img" l’attribut pour améliorer le soutien à l’accessibilité.
• Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
• Utiliser l’attribut alt pour fournir du texte de remplacement (préférable).
• Peut également utiliser une étiquette aria-label ou aria-labelledby pour fournir du texte de remplacement.

HTML

Début du code

<img src="stop.svg" role="img" alt="Panneau d’arrêt" class="img-responsive" style="width:200px">

Fin du code

Technique 2 : Utiliser l’élément <svg> pour intégrer le SVG directement (en ligne) dans le code HTML

• À utiliser pour des images simples et plus complexes.
• Le SVG en ligne peut être animé et manipulé par CSS et JavaScript.
• Utiliser <svg> l’élément.
• Ajouter role="img" pour améliorer le soutien à l’accessibilité.
• Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
• Utiliser <title> pour fournir un court texte de remplacement.
  • <title> odoit être le premier enfant de son élément parent.
  • Le texte <title> apparaîtra sous forme d’infobulle lorsque l’utilisateur placera son pointeur de souris dessus.
• Utiliser l’élément <desc> pour fournir une description de texte plus longue au besoin, pour les images complexes.
• Le texte d’un élément <desc> n’est pas visible.
• Se reporter à la section Images complexes pour trouver d’autres stratégies concernant l’affichage des descriptions longues.
• Pour améliorer le soutien à l’accessibilité :
  • Ajouter des valeurs uniques d’attribut id aux éléments <title> et <desc>.
  • Ajouter un attribut aria-labelledby à l’élément SVG faisant référence aux valeurs de l’attribut id.

SVG

Début du code

<svg role="img" aria-labelledby="uniqueTitleID uniqueDescID" width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <title id="uniqueTitleID">carré rouge</title>
   <desc id="uniqueDescID">Image SVG d’un carré rouge avec bordure noire</desc>
   <path fill="red" stroke="#000" stroke-width="2.5" d="M168 168H32V32h136z"/>
</svg>

Fin du code

Source de l’image: Wikimedia Red square

SVG décoratif

Les images SVG décoratives n’ajoutent pas de renseignements utiles à une page. Exemples: images utilisées pour le style (bordures) ou pour l’ambiance ou l’intérêt visuel (plaisir des yeux).

• Masquer les images SVG décoratives en utilisant l’attribut aria-hidden="true".

HTML

Début du code

<img src="sample.svg" aria-hidden="true">

Fin du code

Texte dans SVG

Le texte inclus dans les éléments <svg> s’adapte bien et reste net lorsqu’il est grossi. Toutefois, les lecteurs d’écran lisent tous les éléments de texte d’un SVG comme une chaîne de texte continue. Cela peut prêter à confusion si les éléments de texte sont censés identifier différentes parties de l’image et ne doivent pas être lus en une seule chaîne.

Suivez les pratiques exemplaires suivantes:

• Éviter d’inclure du texte dans les éléments <svg> ou limiter le texte au minimum. Placer le texte à l’extérieur du SVG (préférable) plutôt qu’à l’intérieur.
• Ajouter role="img" pour améliorer le soutien à l’accessibilité.
• Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
• Utiliser l’élément <title> pour fournir un court texte de remplacement.
  • <title> doit être le premier enfant de son élément parent.
  • Le texte <title> apparaîtra sous forme d’infobulle lorsque l’utilisateur placera son pointeur de souris dessus.
• Utiliser l’élément <text> pour fournir du texte dans SVG.
• Pour assurer le support du lecteur d’écran :
  • Ajoutez des valeurs d’identification uniques aux <title> et <text>.
  • Utiliser aria-labelledby pour faire référence aux valeurs d’id.

SVG

Début du code

<svg width="200" height="100" role="img" aria-labelledby="uniqueTitleID2 uniqueTextID2">
   <title id="uniqueTitleID2">Un rectangle bordé de rouge avec texte à l’intérieur</title>  
   <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>  
   <text id="uniqueTextID2" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Bonjour le monde!</text>     
</svg>

Fin du code

Contraste de couleurs SVG

Les utilisateurs peuvent modifier des thèmes de couleur sur leur ordinateur (p. ex., mode à contraste élevé de Windows) pour modifier le texte et la couleur de l’arrière-plan afin de faciliter la lecture du contenu. Si l’image SVG contient du texte sans couleur d’arrière-plan, le texte peut devenir difficile à lire selon les changements d’arrière-plan faits par l’utilisateur.

• Inclure une couleur de fond derrière le texte et d’autres parties importantes de l’image.

Animation SVG

• Utiliser JavaScript ou CSS, et non <animate>.
• Éviter les SVG qui clignotent plus de 3 fois par seconde.
• Éviter les SVG qui se lisent automatiquement pour éviter de distraire les utilisateurs.
• Permettre aux utilisateurs de lire et d’interrompre les animations SVG.
• Utiliser un SVG animé pour un usage précis et non pour distraire.

SVG interactif

• S’assurer que les objets interactifs <svg> sont accessibles à l’aide du clavier.
• S’assurer que les objets interactifs <svg> sont accessibles à l’aide de l’écran tactile.
• S’assurer que les objets interactifs <svg> indiquent le nom, le rôle et la valeur applicables.
• Veiller à ce que les objets interactifs <svg> respectent toutes les directives WCAG 2.1 applicables.

Ressources WCAG connexes