Rampsight

All rules

Names and roles

Links need a name

Why it matters

Screen reader users navigate by pulling up a list of links. An unnamed link appears there as its URL, and a list of "Read more" links is no better.

How to fix it

  1. Make the link text describe the destination on its own.
  2. For icon-only links, add aria-label ("Basket, 3 items").
  3. Where "Read more" must stay visible, extend the name with aria-label that includes it.

In markup

Fails
<a href="/cart"><svg aria-hidden="true">...</svg></a>
Passes
<a href="/cart" aria-label="Basket, 3 items">
  <svg aria-hidden="true">...</svg>
</a>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on link-name (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.