Dernière mise à jour : 31 mars 2026
Règles pour bien définir la sémantique des liens, afin qu’ils soient accessibles.
Comment baliser un lien pour qu’il soit accessible
Un lien doit clairement indiquer qu’il mène à une autre page ou à un autre contenu. Avec la bonne sémantique, un lecteur d’écran peut comprendre qu’une personne qui clique sur le lien va changer de page ou de section, et non déclencher une action comme un bouton.
Durant la conception
S'assurer que le libellé énonce clairement la destination du lien, même lorsqu'il est lu hors contexte.
Des conseils de rédaction sont disponibles sur la page dédiée aux hyperliens.
Dans le code
Utiliser la balise <a> avec un attribut href valide afin que le lecteur d’écran annonce automatiquement « Lien ».
Ajouter un texte de remplacement à l’icône de « nouvel onglet » (encadré + flèche) pour indiquer explicitement le comportement du lien.
- En français : Ce lien ouvrira un nouvel onglet.
- En anglais : This link will open a new tab.
Faire en sorte qu'une icône décorative dans un lien ne soit pas annoncée par les lecteurs d'écran. Voici comment faire :
- Si l'icône est un élément <img>, laisser sont attribut alt vide et ne pas ajouter d'attribut title.
- Si cette icône est un <svg>, y appliquer un attribut aria-hidden="true" ou role="presentation".
- Si l’icône est implémentée via un ::before ou ::after, il est recommandé qu’elle soit implémentée dans un <span aria-hidden="true">, par exemple.
Dans le cas où un lien est représenté uniquement par une image, l'intitulé du lien peut être défini de deux façons :
- L'alternative de cette image.
- Un texte masqué visuellement, qui sera lu par les lecteurs d'écrans tel quel grâce à une “class CSS.visually-hidden”.
Lorsque plusieurs de ces techniques sont présentes sur un même lien, les lecteurs d’écran annonceront les attributs dans l’ordre de priorité suivant :
- L’attribut aria-labelledby
- L’attribut aria-label
- Le contenu de la balise <a href>
- Le contenu de l’attribut title