Sur un site web, les liens nous permettent de naviguer d’une page à une autre. Cela nous semble complètement naturel et on clique parfois sans même réfléchir.
Cependant, qu’en est-il pour une personne non voyante qui utilise un lecteur d’écran ou pour quelqu’un qui ne pourrait naviguer qu’au clavier ?
Êtes-vous certain que les liens de votre site web leur sont aussi accessibles ?
Voici quelques éléments à vérifier pour être conforme au RGAA et faciliter la navigation.
Le rôle de lien
Lorsqu’un lecteur d’écran lit un élément sur un site web, il peut énoncer à l’utilisateur le rôle de cet élément. Le lecteur d’écran considérera qu’un élément a un rôle de lien si :
- il s’agit d’une balise
<a>avec un attribut href - ou si l’attribut
role="link"est appliqué à la balise utilisée
Le lien doit pouvoir prendre le focus
Lorsqu’on utilise le clavier pour naviguer, le focus se promène d’un élément interactif au suivant. La balise <a> prend nativement le focus si l’attribut href est présent.
Par contre, lorsqu’on n’utilise pas la balise <a> ou qu’il n’y a pas l’attribut href, il faut ajouter un attribut tabindex="0" afin de rendre l’élément focusable.
Chaque lien doit avoir un nom accessible
Pour déterminer le nom accessible d’un lien, on suit un algorithme bien précis :
- contenu des attributs « aria-label » ou « aria-labelledby »
- contenu entre les balises
<a>et</a> - attribut « title »
Chaque lien doit être explicite
L’utilisateurice doit savoir que c’est un lien et où il mène. Soit l’intitulé du lien permet de comprendre la fonction et la destination, soit le contexte du lien aide à en déduire la fonction et la destination.
Nom accessible vs intitulé visible vs title
Le nom accessible doit contenir l’intitulé visible
Le nom accessible est celui qui est disponible pour les technologies d’assistance. Si je navigue par instruction vocale et que je souhaite suivre un lien, j’énoncerai le nom du lien que je vois à l’écran.
L’attribut title doit au moins reprendre le nom accessible
Certains lecteurs d’écran peuvent être configurés pour lire systématiquement l’attribut title. Pour éviter tout risque de confusion, lorsqu’il est présent, l’attribut title doit donc au moins reprendre le nom accessible.
Conclusion
Chaque lien doit :
- Avoir le rôle de lien (balise
<a>ourole="link") - Pouvoir prendre le focus (balise
<a>outabindex=0) - Avoir un nom accessible
- Être explicite : je sais que c’est un lien et je sais où il mène
- Le nom accessible reprend l’intitulé visible
- Si un attribut title est présent, il contient au moins le nom accessible