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 attributrole="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 attributrole="img"; - sur la balise
<svg>, un attributaria-label="Mon alternative textuelle"(restitué par les lecteurs d’écran) ; - dans la balise
<svg>, une balise<title>qui contiendra « Mon alternative textuelle » (identique à l’attributaria-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 attributtitle, son contenu doit être identique à l’attributaria-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>
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 ;-)