Les intitulés des liens sont significatifs dans leur contexte

Un utilisateur déduit la destination d'un hyperlien à partir de son texte. Veillez donc à utiliser un intitulé significatif. Idéalement, il faudrait pouvoir déterminer la destination d'un lien à partir du seul intitulé. Pour satisfaire à cette directive, il suffit néanmoins que le lien soit significatif dans son contexte. Le contexte peut être la phrase ou le paragraphe dans lequel se trouve le lien, le titre qui le précède, l'élément d'une liste, la cellule d'un tableau ou l'entête d'un tableau.

Pourquoi?

• Les internautes déduisent la destination d'un lien à partir de son intitulé. Par ailleurs, la plupart des aides techniques logicielles offrent la possibilité de lister les liens disponibles sur une page; cette fonctionnalité est très fréquemment utilisée.
• Sachez également que les textes de liens ont une influence capitale dans le processus de référencement. Ils prennent en effet une grande importance dans l'indexation des moteurs de recherche. Soigner les intitulés des liens n'apporte que des avantages.

En pratique

Placez un texte qui décrit bien le lien entre les balises <a> et </a>. En cas d'image cliquable, utilisez l'attribut alt pour décrire correctement la destination du lien.

Exemples - Actualités

Incorrect

La destination du lien "Lire plus" ne peut pas être déduit du contexte parce qu'il se trouve dans un autre paragraphe et qu'aucune information contextuelle n'est disponible.

<p>Une collision en chaine sur la E411 en direction de Namur cause un embouteillage de plusieurs kilometres. Un camion charge de balles de golf a devie pour eviter une canne et ses canetons, a bascule et s'est renverse, suite a quoi sa cargaison s'est deversee sur l'autoroute creant un spectacle assez inhabituel.</p>
<p><a href="http://www.anysurfer.be">Lire plus</a></p>

Mieux

Ici la destination du lien est plus claire grâce au titre qui le précède

<h2>Des kilometres de file vers Namur</h2>
<p>Une collision en chaine sur la E411 en direction de Namur cause un embouteillage de plusieurs kilometres. Un camion charge de balles de golf a devie pour eviter une canne et ses canetons, a bascule et s'est renverse, suite a quoi sa cargaison s'est deversee sur l'autoroute creant un spectacle assez inhabituel.</p>
<p><a href="http://www.anysurfer.be">Lire plus</a></p>

Encore mieux

Dans cet exemple le titre est utilisé comme intitulé du lien, ce qui rend le texte "Lire plus" inutile.

<h2><a href="http://www.anysurfer.be">Des kilometres de file vers Namur</a></h2>

<p>Une collision en chaine sur la E411 en direction de Namur cause un embouteillage de plusieurs kilometres. Un camion charge de balles de golf a devie pour eviter une canne et ses canetons, a bascule et s'est renverse, suite a quoi sa cargaison s'est deversee sur l'autoroute creant un spectacle assez inhabituel.</p>

Exemples - changer la taille du texte

Incorrect: A, a, A+, A-, etc

Dans l'exemple ci-dessous les trois liens correspondant aux trois tailles de texte ont le même intitulé 'A'. Visuellement ils se distinguent par une taille de caractère différente. Ce n'est pas suffisant.

<a title="petit" class="style1" rel="style1" href="?style=style1">A</a>
<a title="moyen" class="style2" rel="style1" href="?style=style2">A</a>
<a title="grand" class="style3" rel="style3" href="?style=style3">A</a>

a.style1 {
  font-size: 90%;
}
a.style2 {
  font-size: 100%;
}
a.style3 {
  font-size: 110%;
}

Correct: solution avec image et texte de remplacement

Dans l'exemple ci-dessous on utilise des icônes comme liens. Leur attribut alt est significatif: "Texte petit", "Texte moyen", "texte grand".

<a title="petit" class="style1" rel="style1" href="?style=style1">
  <img src="petitA.jpg" alt="Texte petit">
</a>
<a title="moyen" class="style2" rel="style1" href="?style=style2">
  <img src="moyenA.jpg" alt="Texte moyen">
</a>
<a title="grand" class="style3" rel="style3" href="?style=style3">
  <img src="grandA.jpg" alt="Texte grand">
</a>

On peut aussi utiliser une image d'arrière-plan en combinaison avec un texte caché:

<a title="petit" class="style1" rel="style1" href="?style=style1">
  <span>Petit texte</span>
</a>
<a title="moyen" class="style2" rel="style1" href="?style=style2">
  <span>Moyen texte</span>
</a>
<a title="grand" class="style3" rel="style3" href="?style=style3">
  <span>Grand texte</span>
</a>

a span {
  left: -9999 px;
  position: absolute;
}
a.style1 {
  background-image: url("petitA.jpg");
}

Autres exigences

• Lorsqu'une image est cliquable, c'est l'attribut alt qui joue le rôle d'intitulé du lien. Dans ce cas, la destination du lien prime sur la description de l'image. Il faut donc donner à l'image un attribut alt qui décrit la destination du lien.
• Il en va de même pour les images cliquables côté client: chaque élément area doit être pourvu d'une version textuelle qui détermine la destination 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 en y déclarant une classe "invisible" pour une balise a. Cette technique est permise si elle est utilisée correctement. Vous trouverez plus d'infos à ce sujet dans l'article de WebAIM repris dans la rubrique "lire plus" ci-dessous.
• Un intitulé significatif ne devrait pas commencer par des mots tels que "Aller à" ou "Cliquez ici", parce que ces mots sont redondants lorsque l'on sait déjà que l'on a affaire à un lien. Ce sera le cas dans un site accessible : d'une part, les liens seront identifiables comme tels visuellement, d'autre part, les aides techniques telles que les synthèses vocales repèrent automatiquement les balises liens pour les annoncer à leurs utilisateurs en précédant l'intitulé par le terme "lien".
• Ajouter un 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 ne s'affiche pas lors de la tabulation et n'est pas vu par tous les lecteurs d'écran. Cet article (en anglais) explique bien pourquoi l'attribut title est généralement inutile pour l'accessibilité. .
• Les hyperliens qui semblent invisibles pour un navigateur graphique ne le sont pas forcément pour un lecteur d'écran. Prenez donc particulièrement soin de nettoyer le code source de votre page lorsque vous en modifiez le contenu. Il n'est pas rare en effet de retrouver çà et là des balises a vides, témoins des anciens liens.

Exemple de lien invisible (incorrect)

Dans ce lien il n'y a pas de texte entre les balises <a> et </a>. Il est invisible à l'œil mais pas pour un lecteur d'écran.

<a href="Portesouvertes2005.html"></a>

Attention

• Donnez le même intitulé à tous les liens qui ont la même destination (par exemple page de contact contact).
• Il est recommandé de mentionner le format du fichier dans l'intitulé du lien lors de téléchargements. Par exemple PDF, Word, ZIP.

WCAG 2.1

Consulter le critère 2.4.4 fonction du lien (selon le contexte) des règles WCAG 2.1 en anglais.

Articles complémentaires en anglais

• A link is a promise (Nielsen Norman Group)
• Writing links (Nielsen Norman Group)
• “Learn More” Links: You Can Do Better