Associez aux images qui sont utilisées comme lien un texte « alt » décrivant le but du lien. En effet, il vous arrive parfois d’utiliser une image à la place d’un texte comme lien vers une autre page. Par exemple, au lieu d’avoir le texte avec lien ‘suivant’, vous placez une flèche pointant vers la droite. Dans ce cas, veillez alors toujours à décrire le but du lien dans le texte alt de l’image plutôt qu’une explication de ce que montre l’image.
- Exemple : « page suivante » est un texte alt plus adéquat que « flèche bleue pointant vers la droite »
En respectant ces règles, vous vous assurez que les images utilisées comme lien sont compréhensibles pour les visiteurs qui ne peuvent pas les voir. Ils peuvent ainsi naviguer sans problème sur le site. Un texte doit toujours accompagner une image pour que la signification soit compréhensible par une personne malvoyante.
Comment vous y prendre ?
Précédent et suivant
Une archive de nouvelles est dotée, en bas de page, de liens pour naviguer dans celle-ci. Les textes alt des images qui sont utilisées pour représenter ‘précédent’ et ‘suivant’ décrivent le but du lien (précédent/suivant) et pas ce que l’on voit sur l’image (les flèches).
<a href=”archive/page-1.html”>
<img src=”flèche-vers la gauche.png” alt=”Page précédente” />
</a>
<a href=”archive/page-3.html”>
<img src=”flèche-vers la droite.png” alt=”Page suivante” />
</a>
Page de contact
Dans son menu de navigation, un site web utilise une image d’une enveloppe comme lien vers la page de contact. Le texte alt de l’image décrit le but du lien (contact) et pas ce que montre l’image (une enveloppe blanche).
<a href=”contact.html”>
<img src=”enveloppe.png” alt=”Contact” />
</a>
Pour des rédacteurs
Les images utilisées comme lien peuvent apparaître dans le contenu géré par le rédacteur.
Pour des concepteurs graphiques
Les images utilisées comme lien peuvent apparaître dans des éléments structurels d’un site web, comme le menu de navigation.