Lorsqu’une image et un texte renvoient tous les deux à la même page, vous pouvez les combiner en un seul hyperlien.
Vous voulez parfois qu’une image et un texte renvoient à la même page. Par exemple, dans le cas d’un article avec un titre et une image associée ou dans le cas d’un texte avec lien combiné à une icône. Inutile d’avoir deux liens distincts : associez-les.
Vu qu’il n’y a pas de double lien, le site est moins complexe pour les visiteurs avec un logiciel de synthèse vocale. Ils ne doivent pas non plus faire lire chaque lien deux fois. Les visiteurs qui utilisent le clavier ne doivent pas appuyer deux fois sur la touche de tabulation pour aller au lien suivant.
Comment vous y prendre ?
Soyez vigilant lorsque que deux liens vers la même page sont côte à côte. Cela peut être le cas dans des menus de navigation avec une icône pour le texte avec lien ainsi que dans des aperçus d’articles qui se composent d’une image et d’un texte par article. Adaptez la structure du code HTML afin qu’il n’y ait qu’un seul lien (l’élément <a> de HTML) qui contient à la fois l’image et le texte.
Pas de texte alt pour l’image
Si vous utilisez ce système, veillez à ce que l’image n’ait pas de texte descriptif (texte alt), pour ne pas que le logiciel de synthèse vocale lise deux fois le même texte.
Exemples : lien dans le menu de navigation
Le menu de navigation contient par élément une icône associée à un texte. Les deux figurent dans le même élément <a> et forment donc un seul lien. L’image n’a pas de texte alt (l’attribut alt est vide).
<a href=”services”><img src=”services.jpg” alt=”” />Services</a>
Pour des rédacteurs
Si le rédacteur place une image et un texte qui doivent renvoyer à la même page, il doit bien faire attention à n’ajouter qu’un lien qui contient les deux éléments.
Pour des développeurs
Dans la majorité des cas, le développeur est responsable de la structure HTML, notamment pour les menus de navigation et les aperçus.