Guide RGAA · Thème 6

Liens

Les 2 critères du thème « Liens » du RGAA 4.1, expliqués et accompagnés de pistes de correction et d'exemples de code.

Critère 6.1Chaque lien est-il explicite (hors cas particuliers) ?

Ce que ça vérifie — L'intitulé de chaque lien doit permettre d'en comprendre la destination ou la fonction, soit à lui seul, soit grâce à son contexte immédiat. Les utilisateurs de lecteurs d'écran naviguent souvent de lien en lien, hors contexte : des intitulés comme « Cliquez ici » ou « En savoir plus » répétés sont alors inexploitables.

Comment corriger — Rédigez un intitulé explicite, ou complétez un intitulé court à l'aide de son contexte (phrase, titre, liste environnante), d'un attribut aria-label ou title qui reprend et enrichit le texte visible. Lorsque vous utilisez aria-label ou title, veillez à ce qu'il commence par le texte visible du lien.

<!-- À éviter : intitulé non explicite hors contexte -->
<a href="/rapport-2025.pdf">En savoir plus</a>

<!-- Recommandé : intitulé explicite -->
<a href="/rapport-2025.pdf">Télécharger le rapport annuel 2025 (PDF)</a>

<!-- Alternative : texte court enrichi par aria-label -->
<a href="/rapport-2025.pdf" aria-label="En savoir plus sur le rapport annuel 2025">En savoir plus</a>

Critère 6.2Dans chaque page web, chaque lien a-t-il un intitulé ?

Ce que ça vérifie — Chaque lien doit posséder un intitulé restitué aux technologies d'assistance. Un lien vide, ou un lien image sans alternative, est annoncé par son adresse (URL) brute ou reste totalement muet, ce qui le rend inutilisable au clavier et au lecteur d'écran.

Comment corriger — Assurez-vous que chaque lien contient du texte, ou une image avec un attribut alt pertinent, ou à défaut un aria-label / aria-labelledby. Un lien composé uniquement d'une icône décorative (aria-hidden) doit recevoir un aria-label décrivant sa destination.

<!-- À éviter : lien image sans alternative -->
<a href="/"><img src="logo.svg" /></a>

<!-- Recommandé : lien image avec alternative -->
<a href="/"><img src="logo.svg" alt="Neodyr, retour à l'accueil" /></a>

<!-- Lien icône seule : aria-label obligatoire -->
<a href="/panier" aria-label="Voir mon panier">
  <svg aria-hidden="true">…</svg>
</a>

← Tous les thèmes du guide