Lien sans intitulé explicite : RGAA 6.1, causes et correction

Q: L'attribut title suffit-il à rendre un lien explicite ?

Non. L'attribut title n'est pas fiable comme seule source d'intitulé : il n'est pas lu par tous les lecteurs d'écran dans tous les modes, et il n'est pas accessible au clavier (infobulle uniquement au survol souris). Utilise aria-label ou modifie le texte visible.

Q: Comment gérer une icône seule sans texte visible ?

Deux options : ajouter un aria-label sur le lien ( <a href="..." aria-label="Fermer la fenêtre"> ), ou inclure un texte masqué visuellement avec une classe CSS dédiée ( visually-hidden ). L'image décorative à l'intérieur doit avoir alt="" .

C'est quoi

L'intitulé d'un lien, c'est son nom accessible : le texte que lit un lecteur d'écran pour annoncer ce lien. Il peut venir :

du texte entre les balises <a> et </a>,
d'un attribut aria-label ou aria-labelledby,
de l'attribut alt d'une image-lien.

Un intitulé est dit explicite quand il est compréhensible sans lire le contenu environnant. "Télécharger le rapport annuel 2024" est explicite. "Cliquez ici", "En savoir plus", "Lire la suite" ne le sont pas.

RGAA 6.1 s'applique à tous les liens explicites - textuels, images, icônes. Un lien peut être rendu explicite soit par son seul intitulé, soit par son intitulé complété par son contexte (paragraphe, liste, cellule de tableau qui l'entoure).

Qui est touché

Personnes utilisant un lecteur d'écran : elles naviguent souvent via la liste des liens de la page, lue hors contexte. "Cliquez ici" répété dix fois dans cette liste est inexploitable.
Personnes utilisant la navigation par onglets (clavier seul) : le focus arrive sur le lien sans que le contexte visuel soit évident.
Personnes avec troubles cognitifs : un intitulé vague crée une charge mentale supplémentaire.

Impact business

C'est l'une des erreurs les plus fréquentes du web francophone. Un utilisateur de lecteur d'écran qui navigue via la liste des liens voit défiler "En savoir plus", "Cliquez ici", "Lire la suite" sans pouvoir distinguer lequel mène où. Il doit revenir lire le contexte pour chaque lien - quand c'est possible.

L'enquête annuelle WebAIM Million classe régulièrement les intitulés de liens ambigus parmi les échecs WCAG les plus répandus sur les pages d'accueil analysées.

L'impact pratique dépend du volume de liens concernés et de leur importance dans le parcours : un bouton d'action principal avec "Cliquez ici" bloque directement la conversion pour une part de tes utilisateurs.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les liens dont le nom accessible est générique ("cliquez ici", "en savoir plus", "lire la suite", liens vides, icônes sans alternative).
Manuel : ouvre les outils développeur (F12), cherche dans le DOM toutes les balises <a>. Lis leur contenu textuel. Est-il compréhensible seul ?
Lecteur d'écran : active NVDA ou VoiceOver, ouvre la liste des éléments (NVDA : Insert + F7, puis onglet Liens). Chaque intitulé doit avoir du sens sans contexte.
Extension navigateur : Wave ou Axe DevTools signalent les liens au texte générique ou vide.

Comment corriger

Avant - HTML

<p>Pour consulter notre politique, <a href="/politique.pdf">cliquez ici</a>.</p>

<a href="/offre-pro"><img src="arrow.svg"></a>

Après - HTML

<p>
  <a href="/politique.pdf">Consulter notre politique de confidentialité (PDF)</a>
</p>

<a href="/offre-pro" aria-label="En savoir plus sur l'offre Pro"><img src="arrow.svg" alt=""></a>

Deux approches selon le contexte :

1. Modifier le texte du lien - solution préférable. Remplace "Cliquez ici" par l'action réelle et sa cible : "Télécharger le guide accessibilité (PDF)". Le texte visible devient l'intitulé.

2. Ajouter un aria-label - utile quand le texte visible est court par contrainte de mise en page. L'aria-label remplace entièrement le texte visible pour les technologies d'assistance. Assure-toi qu'il commence par le texte visible (ex : "En savoir plus sur l'offre Pro" pas "Offre Pro - en savoir plus").

Sur WordPress : les thèmes et plugins génèrent souvent des liens "Lire la suite" via the_content_more_link(). Tu peux filtrer ce texte avec le hook more_link_text ou configurer le bloc "Plus" dans l'éditeur Gutenberg. Pour WooCommerce, le lien "Ajouter au panier" est généralement explicite mais vérifie les variantes de ta config.

Questions fréquentes

"En savoir plus" est-il toujours interdit ?

Pas systématiquement. RGAA 6.1 admet qu'un lien soit rendu explicite par son intitulé complété par son contexte (le paragraphe, la liste ou la cellule de tableau qui l'entoure). Un En savoir plus dont le contexte adjacent lève l'ambiguïté peut donc être conforme. Mais c'est fragile : en navigation par liste de liens le contexte disparaît. Préfère toujours un intitulé complet.

L'attribut title suffit-il à rendre un lien explicite ?

Non. L'attribut title n'est pas fiable comme seule source d'intitulé : il n'est pas lu par tous les lecteurs d'écran dans tous les modes, et il n'est pas accessible au clavier (infobulle uniquement au survol souris). Utilise aria-label ou modifie le texte visible.

Comment gérer une icône seule sans texte visible ?

Deux options : ajouter un aria-label sur le lien (<a href="..." aria-label="Fermer la fenêtre">), ou inclure un texte masqué visuellement avec une classe CSS dédiée (visually-hidden). L'image décorative à l'intérieur doit avoir alt="".

Doit-on réécrire tous les "En savoir plus" du site d'un coup ?

Commence par les liens sur les pages les plus visitées et les parcours critiques (page d'accueil, pages produit, formulaires). Utilise le rapport Mynto pour prioriser par volume et impact. Un correctif progressif vaut mieux qu'un blocage total.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Lien sans intitulé explicite