Éléments indispensables à la navigation, les liens doivent respecter un certain nombre de règles pour être accessibles et valides.
Libellé explicite
Le libellé d’un lien, c’est le texte sur lequel les internautes vont cliquer pour ouvrir la page liée. Il doit être explicite, autrement dit il doit décrire ce vers quoi le lien amène, en évitant les « cliquez ici », « en savoir plus », « lire la suite »…
Par exemple, ce libellé est incorrect :
« […] les liens doivent comporter un libellé explicite, cliquez ici pour en savoir plus ».
Et devrait être remplacé par :
« […] les liens doivent comporter un libellé explicite ».
Apparence
L’apparence des liens doit être uniforme sur tout votre site, et respecter plusieurs règles de couleurs et de style pour être accessibles.
Pas de liens vides
Un contenu ou une navigation ne devrait pas contenir de liens vides, sans libellés, par exemple :
<a href="https://example.com"></a>
Ouverture dans un nouvel onglet
Il est déconseillé de forcer les liens à s’ouvrir dans de nouveaux onglets, car cela peut perturber l’internaute, et ce comportement est mal signalé par certains lecteurs d’écrans.
Par ailleurs, cela brise l’historique de navigation : le bouton « page précédente » du navigateur n’est alors plus fonctionnel, l’internaute perd le contexte de navigation.
Il est possible dans n’importe quel navigateur d’ouvrir un lien dans un nouvel onglet en utilisant CTRL+clic ou CTRL+entrée (remplacer CTRL par CMD sur Mac OS). L’internaute a donc par défaut le choix d’ouvrir un lien dans un nouvel onglet ou non. Mais si vous utilisez l’attribut target pour faire s’ouvrir le lien dans un nouvel onglet, il n’y a plus de possibilité pour l’internaute de choisir de ne pas ouvrir le lien dans un nouvel onglet. On lui impose alors un mode de navigation.
Si vous souhaitez tout de même le faire, alors vous devez le signaler dans le libellé du lien, par exemple :
« Lire la documentation sur l’accessibilité (s’ouvre dans un nouvel onglet) »
Lien vers une langue différente
Si un lien amène vers un contenu dont la langue est différente de celle de votre page, vous devez l’indiquer dans le libellé du lien.
Par exemple :
« Lire la documentation sur l’accessibilité (en anglais) »
Lien vers un document
Quand un lien amène vers un document, il est conseillé d’indiquer le format du document, ainsi que son poids. Ce sera par exemple utile aux internautes sur mobile, qui ne souhaitent pas télécharger un format spécifique ou un document trop lourd.
Par exemple :
« Lire le manuel sur l’accessibilité (PDF, 1Mo) »
L’attribut title/titre
On évite d’utiliser l’attribut titre (title) car il n’est visible qu’au survol et donc uniquement lorsqu’on utilise une souris, ce qui exclut la navigation au clavier et sur mobile. De plus, cet attribut est mal restitué par certains lecteurs d’écran.
Images liens
Il est possible de faire un lien sur une image et dans ce cas, c’est l’image qui joue le rôle du libellé du lien. Pour que ce lien soit accessible, vous devez renseigner le texte alternatif de l’image, par exemple pour un lien vers un réseau social :
<a href=”https://twitter.com/profil”><img src=”https://example.com/images/twitter.png” alt=”Profil Twitter” /></a>
Il est également possible de renseigner le libellé du lien dans un élément qui sera lisible uniquement pour les lecteurs d’écrans, et en masquant l’image, par exemple :
<a href=”https://twitter.com/profil”><img src=”https://example.com/images/twitter.png” aria-hidden=”true” /><span class=”screen-reader-text”>Profil Twitter</span></a>
Cette solution étant plus technique, il est conseillé d’utiliser la première option.
Rédigé par Marie Comet le 03 janvier 2021
Relu par Jenny Dupuy et Jb Audras
Dernière mise à jour le 04 janvier 2021