Donner des intitulés significatifs aux liens

Donnez des intitulés significatifs aux liens pour que les utilisateurs puissent facilement en deviner la fonction.

Par exemple, n'écrivez pas "Cliquez ici pour trouver toutes nos formations", mais plutôt "Consultez toutes nos formations."

Pourquoi?

• Les textes des liens ressortent visuellement et sont lus en premier. Les visiteurs scannent une page visuellement. Pourquoi faire ressortir visuellement les liens s'ils ne donnent pas assez d'infos ?
• Les logiciels comme les lecteurs d'écran ont une fonction qui permet d'afficher la liste des liens. Cette fonction n'est utile que si chaque intitulé est suffisamment explicite.
• Si les intitulés des liens sont suffisamment clairs, cela évite de devoir cliquer sur plusieurs liens avant de trouver la bonne page, ce qui est précieux pour tous les utilisateurs qui ont des difficultés motrices.
• Pour un utilisateur malvoyant qui utilise un grand facteur de zoom, le texte autour du lien n'est peut-être pas visible en même temps que le lien. L'intitulé est d'autant plus important.
• Les intitulés pertinents sont également utiles pour le référencement.

En pratique

Rédigez le texte d'un lien pour que l'on n'ait pas de surprise en cliquant dessus.

• Évitez les liens avec des intitulés génériques tels que "cliquer ici" ou "lire plus". Ces mots sont redondants lorsque l'on sait déjà que l'on a affaire à un lien. Sur un site accessible, les liens sont identifiables comme tels visuellement,et les aides techniques telles que les lecteurs d'écran annoncent les liens en précédant l'intitulé par le terme "lien".
• Pas besoin de commencer le texte du lien par "aller à" ou "lien vers". Par défaut, un lien amène un visiteur sur une autre page, ou ailleurs sur la même page.
• Quand un lien déclenche une action moins attendue, prévenez l'utilisateur au moyen de l'itnitulé du lien :
  • Pour les liens de téléchargement, mentionnez le format du fichier, par exemple Télécharger le rapport annuel 2024 (PDF)
  • Pour les liens qui déclenchent l'ouverture d'un fichier audio, donnez un intitulé du type "Écouter le podcast"
• Donnez le même intitulé à tous les liens qui ont la même destination, par exemple "contact".
• Donnez si possible des intitulés différents aux liens qui ont une destination différente : par exemple "Rapport annuel 2023" et "Rapport annuel 2024" plutôt que "télécharger".
• Ajouter un titre (attribut title) à un lien ne suffit pas à rendre un intitulé de lien significatif. Le contenu de l'attribut title n'est pas visible pour tout le monde. Il apparait comme un tooltip quand on survole le lien avec la souris, mais ne s'affiche pas lors de la tabulation et n'est pas vu par tous les lecteurs d'écran.

Le contexte

De manière générale, nous recommandons, pour une meilleure expérience utilisateur, de faire en sorte que la fonction des liens puisse être déduite du lien seul, sans son contexte. Mais pour être conforme à WCAG (au niveau A), le contexte peut être pris en compte.

Le critère WCAG de niveau A 2.4.4. fonction du lien demande que la fonction du lien puisse être déduite du texte du lien et de son contexte. Par contexte, on entend tout contexte qui peut être identifié programmatiquement : par le contenu du paragraphe ou de l'élément de liste dans lequel se trouve le lien, ou, si le lien se trouve dans un tableau, par les en-têtes du tableau. Par exemple :

• Un lien "lire plus" est conforme WCAG 2.2 niveau A s'il se trouve dans un paragraphe qui décrit le contexte du lien, mais pas s'il se trouve dans un paragraphe séparé.
• Un lien "télécharger" est conforme WCAG 2.2 niveau A s'il se trouve dans un tableau et que l'en-tête de ligne ou de colonne identifie le nom du document à télécharger.
• Dans une liste d'actualités, si le titre de l'actualité et le lien "lire plus" se trouvent dans le même élément de liste (li), le lien "lire plus est conforme à WCAG2.2 niveau A.

Remarques pour les développeurs

• Lorsqu'une image est cliquable, c'est l'alternative textuelle de l'image qui joue le rôle d'intitulé du lien.
• Par souci d'esthétique, il est possible de masquer une partie de l'intitulé du lien. Ce procédé vous permet de fournir toute l'information nécessaire aux utilisateurs de lecteur d'écran sans pour autant alourdir l'apparence de votre contenu. Ceci se fait via CSS avec une classe de type "screenreader only".
• L'intitulé d'un lien tel qu'il est vu par les technologies d'assistance peut techniquement être différent du texte visible, mais il doit toujours au moins contenir le texte visible du lien. Il n'est donc pas OK d'écraser un intitulé de lien en utilisant aria-label.

Plus d'infos

• WCAG 2.2 : 2.4.4 link purpose (in context) (level A)
• WCAG 2.2 : 2.4.9 link purpose (link only) (level AAA)
• A link is a promise (Nielsen Norman Group)
• Writing links (Nielsen Norman Group)
• “Learn More” Links: You Can Do Better
• Using the html title attribute