Liens

Intitulé obligatoire

6.5 [A] Chaque lien doit avoir un intitulé.

L’intitulé d’un lien est constitué par le texte compris entre les balises <a> et </a> et, pour les images, par :

la valeur de l’attribut alt des images (<img> et <area>) ;
le texte alternatif compris entre les balises <canvas> et </canvas>, <object> et </object> ;
la valeur de l’attribut aria-label pour les images vectorielles <svg>.

Liens de type « texte »

Exemple :

<a href="destination">intitulé du lien</a>

L’intitulé du lien est le texte compris entre <a> et </a>.

Liens de type « image »

Exemple :

<a href="destination">
   <img src="source" alt="intitulé du lien" />
</a>

Lorsqu’une image (<img>) est utilisée comme lien, l’intitulé du lien est constitué par la valeur de l’attribut alt.

Pour les éléments <canvas> et <object>, l’intitulé du lien est fourni par le texte alternatif compris entre la balise ouvrante (<>) et la balise fermante (</>).

Pour l’élément <svg> l’intitulé du lien est fourni par la valeur de la propriété aria-label.

Liens « composites » (image + texte)

Exemple :

<a href="destination">
   <img src="source" alt="" />intitulé du lien
</a>

Dans ce cas, l’intitulé du lien est fourni par la valeur de l’attribut alt de l’image (sauf si vide) et par le texte compris entre les balises <a> et </a>.

Images réactives

Dans le cas d’une image réactive « côté client » (usemap), l’intitulé des liens sera fourni par la valeur de l’attribut alt des éléments <area> correspondant aux zones actives de l’image.

Dans le cas d’une image réactive « côté serveur » (ismap), l’intitulé des liens sera celui des liens alternatifs adjacents proposés (ou sera fourni, par exemple, par la valeur de l’élément sélectionné dans une liste de choix, si la solution alternative proposée est un formulaire).

Des liens explicites

6.1 [A] Les liens doivent être explicites.

Un lien est explicite lorsque :

l’intitulé du lien seul permet d’en comprendre la fonction et la destination, ou
le contexte du lien permet d’en comprendre la fonction ou la destination.

Contexte du lien

Le contexte du lien peut être défini par :

la phrase ou le paragraphe (<p>) contenant le lien ;
le titre (<h1> à <h6>) précédant le lien ;
l’élément <li> de la liste contenant le lien (et ses éléments parents dans le cas d’une liste hiérarchisée) ;
la cellule <td> du tableau contenant le lien (et les cellules <th> d’en-tête correspondant à cette cellule, dans cas d’un tableau de données) ;
le titre (attribut title) du lien (le cas échéant) ;
la valeur de la propriété aria-label (ou le texte référencé par la propriété aria-labelledby) de l’élément contenant le lien.

Des liens explicites hors contexte

6.3 [AAA] Idéalement, les liens devraient être explicites hors contexte.

Ce cas correspond aux liens dont l’intitulé seul est explicite.

N.B. : Les liens de type mailto (renvoyant à une adresse de courrier électronique) sont considérés comme explicites hors contexte.

Liens identiques dans une même page

6.4 [A] Dans une page, tous les liens dont l’intitulé est identique doivent avoir la même fonction ou destination.

Les critères à prendre en compte pour qualifier l’identité des liens sont l’intitulé du lien et le contexte du lien.

Liens redondants

N.B. : Des liens identiques adjacents seront considérés comme redondants.

Exemple :

<a href="destination">
   <img src="source" alt="intitulé du lien" />
</a>
<a href="destination">intitulé du lien</a>

Cette méthode est à éviter.

Utiliser de préférence la méthode suivante :

<a href="destination">
   <img src="source" alt="" />intitulé du lien
</a>

Titre des liens (si utilisé)

6.2 [A] Si un titre est utilisé, celui-ci doit être pertinent.

Ce point concerne l’attribut title des liens (si utilisé).

Recommandation : Éviter l’utilisation d’un attribut title.

Si utilisé, le titre doit reprendre l’intitulé de lien – et y ajouter des informations.

Les cas suivants sont non conformes :

titre vide (title="") ;
titre identique à l’intitulé du lien ;
titre ne reprenant pas l’intitulé du lien.

Exception : Un titre identique à l’intitulé peut être accepté dans le seul cas d’un lien « image » (titre utilisé pour indiquer la fonction d’une icône par exemple). Dans ce cas la valeur de l’attribut title du lien (élément <a>) peut être égale à celle de l’attribut alt de l’image (élément <img>).