Fix "Link without discernible text" in React

Why it's a problem

A link with no text (icon-only or image without alt) can't be announced: the user doesn't know where it goes. Links are also listed out of context by screen readers.

How to fix it — React

Provide a clear label: visible text, aria-label, or alt on the contained image. Avoid "click here" — the label must make sense on its own.

<Link href="/panier">
  <CartIcon />
</Link>

<Link href="/panier" aria-label="Voir mon panier">
  <CartIcon aria-hidden="true" />
</Link>

RGAA criterion 6.2 — Liens

Dans chaque page web, chaque lien a-t-il un intitulé ?

How to check: official tests (in French)

1. Test 6.2.1

   Dans chaque page web, chaque lien a-t-il un intitulé entre <a> et </a> ?

Full page for criterion 6.2 · Official text: Référentiel général d'amélioration de l'accessibilité (RGAA) 4.1, DINUM, Licence Ouverte 2.0.

See for another framework

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.