Les personnes avec un handicap visuel ne peuvent pas (bien) voir les images. Or, une description de l’image leur permet justement d’avoir accès à cette information. Les équivalents textuels renforcent également la visibilité de votre site web dans les moteurs de recherche.
Comment vous y prendre ?
Le système de gestion de contenu (CMS) permet généralement d’ajouter un équivalent textuel (ou texte alt) à une image.
Cas 1 : Image porteuse d’informations
Exemple
Une photo représentant la rencontre entre le ministre des affaires étrangères et le président américain.
Ajoutez un texte qui décrit ce que l’on peut voir sur l’image.
<img src=”rencontre_ministre.jpg” alt=”le ministre des Affaires étrangères serre la main du nouveau président américain.”>
Cas 2 : Image décorative
Les images décoratives ne doivent pas avoir d’équivalent textuel car elles n’aident pas à comprendre le texte et n’ont donc aucune importance pour le visiteur.
Il faut alors insérer l’attribut alt, mais ce dernier ne doit pas contenir de texte.
<img src=”lignes-ondulées.jpg” alt=”” />
Pour placer une image décorative, vous pouvez vous baser sur l’exemple ci-dessus, mais il est préférable de placer des images décoratives avec une feuille de style CSS.
Cas 3 : Image d’un graphique
L’équivalent textuel associé à une image d’un graphique doit décrire le contenu dudit graphique. Le graphique peut être divisé en plusieurs petites images avec un texte alt, mais il est également possible de résumer son contenu :
<img src=”graphique-utilisationIE6.png” alt=”L’utilisation d’IE6 pendant la période 2008-2012 a chuté de 12 % à 1,6 %” />
Cas 4 : Texte sous forme d’image
Il arrive parfois qu’à la place d’un « vrai » texte, l’on ait une image avec du texte. Pour pouvoir utiliser une police spéciale de caractères, par exemple. Dans ce cas, le texte alt doit contenir le texte que l’on voit sur l’image. Essayez d’utiliser des textes sous forme d’images uniquement si vous ne pouvez pas faire autrement.
<img src=”fête.jpg” alt=”C’est la fête !” />
Cas 5 : Image utilisée en tant qu’icône d’accompagnement
Lorsqu’une image est utilisée comme icône à côté d’un texte (par ex. une ampoule pour attirer l’attention du lecteur), cet icone ne doit pas être accompagné de texte explicatif. Le texte alt de l’icône doit rester vide pour éviter une description inutile, ce qui peut entraîner une répétition gênante lorsqu'il sera lu par un navigateur vocal.
<a href=”home.html”><img src=”home.jpg” alt=”” />Home</a>
Pour des rédacteurs
Le rédacteur est responsable de la rédaction et du placement des équivalents textuels pour des images qu’il place via le CMS.
Pour des développeurs
Le développeur doit veiller à ce qu’un équivalent textuel puisse être associé à des images dans le CMS. Pour les images qui ne peuvent pas être gérées via le CMS, il doit lui-même s’assurer qu’un équivalent textuel a été placé si nécessaire.