Comment rendre
ses liens accessibles ?

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. C’est grâce à cette interprétation que je peux savoir que je suis par exemple sur un lien cliquable plutôt que sur un simple mot.

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. Un élément peut prendre le focus, soit parce que la balise utilisée est interactive, soit parce qu’on ajoute l’attribut tabindex.

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 et donc disponible pour la navigation au clavier.

Exemples valides :

<a> href="https://codefilao.fr">Visiter le site de Code Filao</a> <a role="link" tabindex="0">Visiter le site de Code Filao</a> <span role="link" tabindex="0">Visiter le site de Code Filao</span>

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 »

Les informations présentes entre les balises <a> et </a> peuvent être

  • du texte
  • l’alternative d’un élément img (contenu de aria-labelledby, aria-label, alt ou title)
  • l’alternative d’un élément svg (contenu de aria-label ou aria-labelledby)
Source: Critère RGAA 6.2

Exemples valides :

<a href="https://codefilao.fr">Visiter le site de Code Filao</a>

Le nom accessible est « Visiter le site de Code Filao ».

<a href="https://codefilao.fr"><img src="logo.webp" alt="Visiter le site de Code Filao" /></a>

Le nom accessible est « Vers le site de Code Filao ».

<a href="https://codefilao.fr"> <svg src="logo.webp" role="img" aria-label="Vers le site de Code Filao" /> ... </svg></a>

Le nom accessible est « Visiter le site de Code Filao ».

Exemples incorrects :

<a href="https://codefilao.fr"><img src="logo.webp" alt="">

Il n’y a pas de nom accessible. Si on ne voit pas l’image, ce lien n’a aucun intitulé.

Chaque lien doit être explicite

L’utilisateurice doit savoir que c’est un lien et où il mène.

Soit l’intitulé du lien (le nom accessible) permet de comprendre la fonction et la destination, c’est alors suffisant.

Soit le contexte du lien aide à en déduire la fonction et la destination. Attention, le RGAA définit très précisément ce qui est considéré comme le contexte du lien : https://accessibilite.numerique.gouv.fr/methode/glossaire/#contexte-du-lien

Source: Critères RGAA 6.1.1, 6.1.2, 6.1.3, 6.1.4

<h2>Code Filao</h2> <p>Cette entreprise propose un développement web à impact positif</p> <a href="https://codefilao.fr>Vers le site</a> <h2>RGAA</h2> <p>Le RGAA est un référentiel permettant de rendre les sites et services numériques accessibles à toutes et à tous</p> <a href="https://accessibilite.numerique.gouv.fr">Vers le site</a>

Dans cet exemple, les intitulés des liens sont identiques (« Vers le site »). C’est le contenu des titres précédents ces liens qui permettent de comprendre le contexte et d’en déduire les destinations des deux liens (« Code Filao » vs « RGAA »).

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. Or, mon logiciel de navigation ne connaît que le nom accessible. Ainsi, si le nom accessible reprend l’intitulé visible, le logiciel peut quand même interpréter correctement ma commande vocale.

Exemple conforme :

<a href="https://accessibilite.numerique.gouv.fr" aria-label="RGAA – Vers le site">RGAA</a>

L’intitulé visible « RGAA » est bien repris dans le nom accessible « RGAA – Vers le site »

Exemple non conforme :

<a href="https://accessibilite.numerique.gouv.fr" aria-label="Vers le site">RGAA</a>

L’intitulé visible « RGAA » n’est pas repris dans le nom accessible « Vers le site ». Si je prononce ce que je lis à l’écran « RGAA », la commande vocale ne correspondra à aucun lien et ne m’emmènera nulle part.

Source: RGAA 6.1.5

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> ou role="link")
  • Pouvoir prendre le focus (balise <a> ou tabindex=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