1.2 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.

Mieux

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

Encore mieux

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

Exemples - changer la taille du texte

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

Dans l'exemple ci-dessous les trois liens coorepondant 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-dessouson 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>Texte Petit</span></a>
<a title="moyen" class="style2" rel="style1" href="?style=style2"><span>Texte moyen</span></a>
<a title="grand" class="style3" rel="style3" href="?style=style3"><span>Texte grand</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".
• Bien que l'attribut title soit un apport de confort de navigation vraiment important, cette solution ne peut malheureusement pas être considérée comme suffisante. L'attribut title n'est pas lu par toutes les aides techniques. Certaines doivent être configurées expressément à ces fins. D'autres ne le considèrent carrément pas.
• 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 ça 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.