Rédigez un texte de lien descriptif

Ce que vérifie ce contrôle

Inspecte chaque <a href> de la page et calcule le nom accessible (texte visible, aria-label ou texte alt d’un <img> enfant). Le contrôle échoue quand :

• Le nom est vide (un simple <a><svg/></a> sans texte ni label).
• Le nom est une phrase générique : « cliquez ici », « ici », « en savoir plus », « plus », « ceci ».
• Le même nom générique pointe vers des URL différentes à différents endroits de la page — un utilisateur de lecteur d’écran qui liste tous les liens entend « cliquez ici, cliquez ici, cliquez ici » sans pouvoir les distinguer.

Pourquoi c’est important

Les utilisateurs de lecteurs d’écran naviguent en listant les liens. Dans NVDA : Inser+F7. Dans VoiceOver : Ctrl+Option+U → Liens. L’utilisateur voit le texte du lien hors contexte, par ordre alphabétique, et en choisit un. « En savoir plus » ne lui donne rien.

• Les utilisateurs voyants scannent aussi. Les études eye-tracking (Nielsen Norman, toutes les réplications) montrent que les utilisateurs lisent d’abord le texte des liens et sautent la prose autour. Les liens descriptifs servent aussi de repères de navigation.
• Classement dans la recherche. Le texte d’ancrage des liens internes est l’un des rares signaux textuels auxquels Google fait encore confiance. Un lien « Cliquez ici » vers votre page tarifs gaspille l’emplacement ; « Tarifs MetricSpot » ne le gaspille pas.
• Citation par IA. ChatGPT, Perplexity et Google AI Overviews citent le texte d’ancrage quand ils font remonter un lien dans une citation. « Cliquez ici » produit une citation sans aperçu de ce que contient le lien.

Comment le corriger

Faites en sorte que le texte de chaque lien décrive sa destination, même lu hors contexte.

À éviter :

<p>Pour en savoir plus sur nos tarifs, <a href="/pricing/">cliquez ici</a>.</p>

À faire :

<p>Consultez nos <a href="/pricing/">offres tarifaires et essai gratuit</a>.</p>

Liens à icône seule — utilisez aria-label :

<a href="https://twitter.com/metricspot" aria-label="MetricSpot sur X">
  <svg aria-hidden="true">…</svg>
</a>

Le aria-hidden="true" sur le SVG empêche le contenu accessible de l’icône de fuir ; l’aria-label fournit le nom. Sans ça, les lecteurs d’écran annoncent « lien » avec les données de chemin qu’ils peuvent extraire.

Cartes « En savoir plus » (listings d’articles de blog). La correction consiste à étendre le lien pour couvrir toute la carte ou à inclure le titre de l’article :

<!-- Mauvais : chaque « En savoir plus » est identique -->
<article>
  <h3>Pourquoi vos CWV s'effondrent</h3>
  <p>Trois patterns que nous observons…</p>
  <a href="/blog/cwv/">En savoir plus</a>
</article>

<!-- Mieux : le titre devient le lien -->
<article>
  <h3><a href="/blog/cwv/">Pourquoi vos CWV s'effondrent</a></h3>
  <p>Trois patterns que nous observons…</p>
</article>

<!-- Ou : contexte masqué visuellement, ajouté en suffixe -->
<a href="/blog/cwv/">En savoir plus<span class="sr-only"> sur les Core Web Vitals</span></a>

Plusieurs liens identiques vers des destinations différentes. Si vous avez plusieurs boutons « Modifier » dans un tableau, ajoutez le contexte de la ligne de manière invisible :

<a href="/users/42/edit">Modifier<span class="sr-only"> Jane Patel</span></a>
<a href="/users/43/edit">Modifier<span class="sr-only"> Alex Diaz</span></a>

Linters. eslint-plugin-jsx-a11y fournit une règle anchor-has-content. Ajoutez une règle personnalisée bannissant le texte d’ancrage littéral « cliquez ici » / « en savoir plus » — les deux sont des signaux d’alerte 100 % du temps.

Questions fréquentes

« En savoir plus → » est-il acceptable s’il est visuellement associé à un titre ?

Les utilisateurs voyants l’associent au titre au-dessus ; les utilisateurs de lecteurs d’écran l’entendent isolément. Soit faites du titre le lien (préférable), soit ajoutez <span class="sr-only"> sur [titre de l'article]</span> pour conserver le design visuel tout en ajoutant le contexte.

Et les icônes de lien externe ?

L’icône est décorative ; cachez-la avec aria-hidden="true" ou incluez « (lien externe) » en texte masqué visuellement. Ne comptez pas sur la seule icône pour les utilisateurs de lecteurs d’écran.

Ouvrir un lien dans un nouvel onglet compte-t-il comme descriptif ?

Non — target="_blank" est un comportement, pas un nom. Si vous voulez que les lecteurs d’écran l’annoncent, incluez « (s’ouvre dans un nouvel onglet) » en texte visible ou sr-only. Beaucoup d’utilisateurs n’aiment pas l’ouverture inattendue d’un nouvel onglet ; si vous devez le faire, signalez-le.