On s’intéresse à l’une des fonctionnalités de base du web, les liens.

Ce que j’ai fait :

• lire les notices AcceDe Web relatives aux liens
• lire les recommandations du RGAA relatives aux liens

Ce que j’ai appris

Liens versus Bouton

Il s’agit d’un rappel mais qu’il n’est pas inutile d’avoir en tête :

• un lien permet de naviguer, d’une page à l’autre ou au sein d’une même page
• un bouton déclenche une action comme soumettre des informations ou afficher l’élément suivant dans un carrousel

Liens explicites versus liens non explicites

Un lien explicite a un intitulé qui permet à lui seule de comprendre sa destination ou sa fonction :

<a href="https://disic.github.io/guide-integrateur/">Guide de l'intégrateur RGAA 3</a>

Les liens “Lire la suite”, “En savoir plus” ou “Cliquer ici” sont en revanche considérés comme non explicites.

Compléter les liens non explicites

On peut rendre un lien explicite grâce à l’attribut aria-label ou grâce à l’attribut title.

L’attribut choisi doit être ajouté dans la balise <a> et renseigné sur le modèle : intitulé du lien + informations complémentaires.

Par exemple sur ce blog, les liens “Lire la suite” de chaque article ne sont pas suffisamment explicites :

<a href="" class="read-more">Lire la suite</a>

On complète donc ainsi le lien :

<a href="" aria-label="Lire la suite de l'article : Titre de l'article" class="read-more">Lire la suite</a>

Ce qui est interprété ainsi par le navigateur :

<a href="/100daysofa11y-day15/" aria-label="Lire la suite de l'article : Jour 15 - Des liens accessibles" class="read-more">Lire la suite</a>

Les liens explicites dont l’intitulé suffit à comprendre sa destination ne doivent pas être complétés par des attributs title ou aria-label.

D’autre part, le contenu de l’attribut n’est pas conforme si :

• il est identique à l’intitulé de lien
• il est vide
• il ne reprend pas au moins le contenu de l’intitulé du lien

Title versus aria-label

L’attribut title n’est pas restitué de façon uniforme par les lecteurs d’écran et n’est pas interprété sur les terminaux tactiles (mobiles, tablettes) qui constituent aujourd’hui la majorité des internautes (lire à ce sujet l’article de Romy Duhem-Verdière : L’attribut title : à consommer avec modération(lien externe)).

D’autre part, il n’est pas possible de modifier l’affichage de l’attribut title : les changement de couleurs, de police ou taille de caractères ne sont pas appliquées sur les contenus de cet attribut. Une solution alternative pourrait consister à ajouter une infobulle personnalisée à la place.

Liens images

Lorsqu’un lien est composé uniquement d’une image, c’est l’alternative de cette image qui constitue son intitulé : l’alternative est utilisée pour indiquer la destination du lien.

Exemple sur ce site avec mon avatar situé dans le header de chaque page et renvoyant vers l’accueil :

<a href="/" class="site-avatar">
  <img src="https://avatars.githubusercontent.com/elbuffeto" alt="Accueil" />
</a>

Recommandations Opquast

Plusieurs bonnes pratiques Opquast sont également intéressantes à prendre en compte, parmi lesquelles les hyperliens internes et externes sont différenciés, le survol ou l’activation des hyperliens ne modifie pas la mise en page. Vous pouvez retrouver ces bonnes pratiques sur la page dédiée(lien externe).