See plans and pricing

Links must have discernible text

Estimated effort: about 5 minutes.

Every link on your site needs text that tells a screen reader user where it goes or what it does. Links that only contain an image with no alt text, or an empty link with no text at all, leave visitors unable to tell what will happen if they click it.

How to fix it

  1. Locate the <a href="..."> element with no readable text (e.g. an empty link, or a link wrapping only an image with no alt text).
  2. If the link wraps an icon or image, either give that image descriptive alt text, or add an aria-label to the <a> element itself, e.g. aria-label="Read more about our return policy".
  3. Avoid vague link text like "click here" or "read more" with no other context; make each link's purpose clear even when read out of context.
  4. Confirm the link can receive keyboard focus (it should be a real <a href="..."> element, not a <span> or <div> with a click handler).
  5. Do not hide the link's accessible text with display:none or aria-hidden="true" if it is the only label the link has.

Before and after

Before

<a href="/returns"><img src="arrow.png"></a>

After

<a href="/returns" aria-label="Read more about our return policy"><img src="arrow.png" alt=""></a>

View the full rule reference from Deque University

See plans and pricing