Cet article fait partie d’une série sur le vaste monde des alternatives textuelles :
La balise (ou plutôt, l’élément) <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 » ou « élément », on veillera donc à écrire <title> avec les chevrons quand on en parle à l’écrit ;-)
Un titre de page ≠ une alternative textuelle
L’élément <title> telle qu’on le connaît généralement est un élément qu’on place dans l’en-tête de son document HTML (élément <head>) afin de donner un titre à sa page ; titre qui apparaît dans l’onglet du navigateur. Cet élément <title>-là n’est pas une alternative textuelle.
Cependant, il s’agit d’un élément 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. Il est donc d’une importance capitale pour une personne utilisant un lecteur d’écran, notamment. Son contenu doit donc être pertinent. On n’oubliera pas non plus qu’il 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
Un autre élément <title> existe et est, cette fois, une alternative textuelle. Il s’agit de celui qui permet de donner une alternative à un élément <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 un élément
<img />. On notera ici qu’il faut ajouter un attributrole="img"sur les éléments<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 un élément
<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 ; - éventuellement, un attribut
focusable="false"pour qu’on ne puisse pas l’atteindre via le focus clavier sur Internet Explorer (si vous le supportez encore).
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 attributrole="img"; - sur la balise
<svg>, un attributaria-label="Mon alternative textuelle"(restitué par les lecteurs d’écran), ou dans la balise<svg>, un élément<title>qui contiendra « Mon alternative textuelle ».
Exemple de code :
<svg role="img">
<title>Mon alternative textuelle</title>
<!-- Ma forme SVG ici -->
</svg>
Source : le critère 1.1 du RGAA 4.
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 ajouterfocusable="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 !!
Merci Gaël ! Effectivement, je vais ajouter ce point, tu as raison ;-)