Le vaste monde des alternatives textuelles : la balise <title> et les images SVG (4/6)

  • Publié le : (Modifié le : )
  • Autrice : Julie Moynat
  • 2 commentaires
  • Temps de lecture estimé : 3 minutes
  • Catégorie : Blog (web)
  • Thématiques associées : ,

Cet article fait partie d’une série sur le vaste monde des alternatives textuelles :

La balise <title> ne doit pas être confondue avec l’attribut title évoqué dans l’article 3/6 de la série. Pour lever tout doute concernant l’emploi du mot « balise », on veillera donc à écrire <title> avec les chevrons quand on en parle à l’écrit ;-)

Un titre de page ≠ une alternative textuelle

La balise <title> telle qu’on la connaît généralement est une balise qu’on place dans l’en-tête de son document HTML (balise <head>) afin de donner un titre à sa page ; titre qui apparaît dans l’onglet du navigateur. Cette balise <title> là n’est pas une alternative textuelle.

Cependant, il s’agit d’une balise obligatoire pour l’accessibilité de ses contenus. En effet, il s’agit du premier élément qui est lu par un lecteur d’écran quand la page se charge. Elle est donc d’une importance capitale pour une personne utilisant un lecteur d’écran. Son contenu doit donc être pertinent. On n’oubliera pas non plus qu’elle a son importance pour le référencement naturel et que c’est quand même pratique quand on navigue entre plusieurs onglets ouverts.

Une alternative textuelle pour les images SVG

Une autre balise <title> existe et est, cette fois, une alternative textuelle. Il s’agit de celle qui permet de donner une alternative à une balise <svg>.

Utiliser une image SVG

On peut utiliser les images SVG de différentes façons :

  • dans la CSS, par exemple :
    .ma-classe {
	background: url("/image.svg") no-repeat;
}

    Dans ce cas, on se réfèrera à la partie sur le texte masqué en CSS (voir l’article 5/6 de cette série) pour construire une alternative à notre image si elle en a besoin.

  • dans le HTML via une balise <img />. On notera ici qu’il faut ajouter un attribut role="img" sur les balises <img /> qui ont une source .svg à cause d’un défaut de restitution avec le lecteur d’écran VoiceOver.
    <img src="image.svg" alt="Mon alternative ici si nécessaire" role="img" />

    (se référer à la partie sur l’attribut alt (voir l’article 2/6 de cette série)) ;

  • dans le HTML via une balise <svg>.

Mon image SVG est-elle décorative ?

Dans le cas des images SVG, on répondra aux mêmes questions que pour les images « classiques » (voir l’article 2/6 de cette série) mais les réponses sont différentes.

Une image SVG décorative

Si l’image SVG est décorative, alors, on lui met :

  • un attribut aria-hidden="true" pour qu’elle ne soit pas restituée par les lecteurs d’écran ;
  • un attribut focusable="false" pour qu’on ne puisse pas l’atteindre via le focus clavier sur Internet Explorer.

Exemple de code :

<svg aria-hidden="true" focusable="false">
	<!-- Ma forme SVG ici -->
</svg>

Une image SVG porteuse d’information

Si l’image SVG est porteuse d’information, alors, on va ajouter :

  • sur la balise <svg>, un attribut role="img" ;
  • sur la balise <svg>, un attribut aria-label="Mon alternative textuelle" (restitué par les lecteurs d’écran) ;
  • dans la balise <svg>, une balise <title> qui contiendra « Mon alternative textuelle » (identique à l’attribut aria-label). Elle peut être masquée de façon à n’être lue que par les utilisateurs de technologies d’assistance (voir l’article 5/6 de cette série) ;
  • sur la balise <svg>, si on ajoute un attribut title, son contenu doit être identique à l’attribut aria-label (restitué par les lecteurs d’écran et visible au survol à la souris). On essaiera d’éviter d’utiliser cet attribut pour que ce ne soit pas trop verbeux pour les utilisateurs de lecteur d’écran ;
  • dans la balise <svg>, si l’image nécessite une description détaillée, on pourra mettre celle-ci dans une balise <desc>.

Exemple de code :

<svg aria-label="Mon alternative textuelle" role="img">
	<title>Mon alternative textuelle</title>
	<desc>Description détaillée de mon image si nécessaire</desc>
	<!-- Ma forme SVG ici -->
</svg>

Sources : les critères 1.3 et 1.6 du RGAA

2 commentaires sur « Le vaste monde des alternatives textuelles : la balise <title> et les images SVG (4/6) »

  1. Hello !

    Merci beaucoup pour cette série d’articles, elle manquait ! C’est un énorme boulot, alors gros gros merci !

    Je vois un petit détail à ajouter pour les SVG de décoration : en plus de aria-hidden, il faut également ajouter focusable="false" pour que les IE ne permettent pas la prise de focus… Pas directement lié à la thématique des alternatives, mais il me paraît judicieux de le mentionner :)

    Merci encore !!

Les commentaires sont fermés.