Images SVG

Implémentation des images <svg> selon qu'elles sont décoratives, informatives ou illustratives.

SVG (Scalable Vector Graphics) est un format de fichier vectoriel qui permet de décrire des images. Cela permet d’obtenir une image qui est toujours nette, quelle que soit la résolution de l’écran ou l’agrandissement effectué sur l’image.

Implémentation d’une image SVG

Il existe plusieurs façons d’insérer une image svg dans sa page :

• soit en enregistrant l’image SVG dans son site et en l’insérant via l’élément img

<img src="mon_image.svg" alt="">

• soit en insérant directement le code SVG dans le document HTML

<svg width="16" height="16">
  <rect width="100%" height="100%" fill="purple" />
</svg>

Pour en savoir plus sur les SVG, référez-vous à la documentation MDN.

Image SVG décorative : pas d’alternative textuelle

Pour savoir si une image est décorative, le plus simple est d’imaginer qu’il n’y a pas d’image et de se poser ensuite la question : « Est-ce que je perds de l’information ? ». Si la réponse à la question est « Non », alors l’image est décorative.

Quand les images sont décoratives, on fait en sorte qu’elles soient ignorées par les technologies d’assistance :

Image SVG insérée via la balise img

On ajoute à l’image l’alternative textuelle vide alt="" ;

<img src="mon_image_decorative.svg" alt="">

Code SVG inséré directement dans le code HTML

• On ajoute :
  • l’attribut aria-hidden="true" pour que l’image soit ignorée par les logiciels de synthèse vocale ;
  • l’attribut focusable="false" pour éviter la prise de focus sur l’image par les navigateurs Internet Explorer version 10 et supérieure et Edge ;
  • éventuellemnt, le rôle aria role="presentation" pour éliminer toute signification sémantique ;
• On s’assure que ni la balise svg ni aucune des balises contenues entre les balises <svg> et </svg> ne contient des attributs accessibles (title, aria-label, aria-labelledby, aria-describedby, desc, …).

<svg aria-hidden="true" focusable="false" role="presentation">
     [...]
</svg>

Image SVG illustrative ou informative

On considère qu’une image est informative (ou illustrative) lorsque sa présence est indispensable à la compréhension du contenu proposé dans la page.

Image SVG insérée via la balise img

On ajoute à l’image l’alternative textuelle alt ;

<img src="astuce.svg" alt="Astuce">

Code SVG inséré directement dans le code HTML

On ajoute :

• à la balise <svg> :
  • le rôle aria role="img" ;
  • l’attribut aria-labelledby (et non pas aria-describedby tel que préconisé par la W3C pour des raisons de compatibilité avec les synthétiseurs vocaux) faisant référence à l’id de la balise contenant l’alternative textuelle de l’image ou aux id des balises proposant de une alternative et une description détaillée de l’image ;
• entre les balises <svg> et </svg> :
  • les balises <title id="...">...</title> (à ne pas confondre avec l’attribut title de balise) englobant le titre de l’image ;
  • éventuellement, les balises <desc id="...">...</desc> englobant une description détaillée de l’image.

Exemple pour une image SVG simple

<svg aria-labelledby="monTitre" role="img">
    <title id="monTitre">L'alternative textuelle de l'image</title>
   ...
</svg>

Exemple pour une image SVG nécessitant une description plus détaillée

<svg aria-labelledby="monTitre maDescription" role="img">
    <title id="monTitre">Titre de l'image</title>
    <desc id="maDescription">Description détaillée de l'image.</desc>
   ...
</svg>

Image SVG utilisée seule comme lien ou bouton

Lorsqu’une image SVG est un lien ou un bouton à elle seule, l’implémentation se fait de la manière suivante :

• on applique sur le SVG les techniques relatives aux SVG décoratives ;
• on ajoute un texte invisible à l’œil nu mais qui sera lu par les lecteurs d’écran via une classe de style du type .sr-only.

Exemple pour un lien

<a href="/">
<svg aria-hidden="true" focusable="false" role="presentation">[...]</svg>
<span class="sr-only">Accueil</span>
</a>

Exemple pour un bouton

<button>
<svg aria-hidden="true" focusable="false" role="presentation">[...]</svg>
<span class="sr-only">Lancer la recherche</span>
</button>

La classe de style .sr-only est une classe de style qui permet de masquer un contenu en le rendant malgré tout restituable par les logiciels de synthèse vocale. La meilleure syntaxe permettant cet effet est celle-ci (source Cache-cache CSS)

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
			clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

Variante possible pour un bouton

<button aria-label="Lancer la recherche">
<svg aria-hidden="true" focusable="false">[...]</svg>
</button>

Image SVG comme lien ou bouton utilisée avec du texte

Dans ce cas, le SVG sera masqué et on ajoutera du texte visible.

Exemple pour un lien

<a href="/">
<svg aria-hidden="true" focusable="false" role="presentation">[...]</svg>
<span>Accueil</span>
</a>

Exemple pour un bouton

<button>
<svg aria-hidden="true" focusable="false" role="presentation">[...]</svg>
<span>Lancer la recherche</span>
</button>