Veillez à rédiger des textes de lien qui, à eux seuls, indiquent clairement où les liens mèneront.

Un lien sur lequel le visiteur peut aller cliquer doit être compréhensible, avant même d’aller cliquer dessus. Il doit être possible de comprendre clairement vers quoi ce lien renvoie, même sans contexte. « Cliquer ici » ou « En savoir plus » n’est pas suffisamment explicite quand on ne peut pas voir le texte ou la présentation visuelle qui l’entoure.

Les objectifs :

  • Permettre aux visiteurs avec un handicap visuel de pouvoir utiliser le site plus efficacement.
  • Eviter aux autres visiteurs de suivre des liens qu’ils ne trouvent pas intéressants (car le texte de lien leur montrera déjà où le lien mènera).
  • Rendre la visibilité qu’ils apportent dans les moteurs de recherche.

Comment vous y prendre ?

Si vous pouvez lire un texte de lien et savoir où il va vous mener, il s’agit d’un bon lien.

Si la présentation de la page ou d’autres circonstances ne vous permettent pas d’écrire un texte de lien clair, quelques autres options s’offrent à vous :

  • Assurez-vous que le but du lien est clairement énoncé dans le texte qui se trouve directement devant le lien, c’est-à-dire dans le même élément HTML. Par exemple dans la même phrase ou la même puce d’une énumération.
  • Utilisez CSS pour masquer une partie du texte de lien.
  • Servez-vous des attributs ARIA pour décrire le but du lien.

Exemple

Texte de lien clair

Voici un texte de lien qui n’est pas clair :

<a href="accès.html">En savoir plus</a>

Voici un texte de lien clair :

<a href="accès.html">En savoir plus sur l’accessibilité</a>

Remarque : Masquer une partie du texte de lien avec CSS

Cette méthode permet de rédiger un texte de lien clair et complet, puis de le cacher en partie avec CSS. Visuellement, le lien est donc plus court, mais le code source contient quant à lui le texte complet. Et les visiteurs qui utilisent un logiciel de synthèse vocale entendront tout le texte de lien.

Dans l’exemple ci-dessous, seul le texte ‘En savoir plus’ apparaît. Le texte ‘sur l’accessibilité’ est caché, mais figure bel et bien dans le code source.

<a href="accès.html">En savoir plus <span class="caché"> sur l’accessibilité</span></a>

Pour les redacteurs

Le rédacteur est responsable de la clarté des textes de lien.