Identical link text should have the same purpose

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If two links look the same, they must lead to the same thing — otherwise change the text.

Why this matters and how to fix it

Why this matters

Screen reader users often navigate by reading a list of links. If multiple links share the same text but lead to different destinations, users cannot tell which action each link performs — this creates confusion, slows navigation, and increases the risk of selecting the wrong link.

How to fix this issue

If links perform different actions or lead to different destinations, ensure their link text (or accessible name) clearly reflects that difference. If two links share the same text, they must serve the same purpose and lead to the same place.

Automated detection · Manual review recommended

Developer guidance

This issue commonly appears in card grids, tables, feature lists, and CMS-generated pages that use generic link labels like “Learn more,” “View,” or “Details.” Encourage descriptive link wording. If the design requires short visible text, append additional context via visually hidden text.


Code examples

Incorrect Implementation

<a href="/buy">More info</a>
<a href="/subscribe">More info</a>

Correct Implementation

<a href="/buy">Buy details</a>
<a href="/subscribe">Subscription info</a>

Real-World Examples

Before

<ul>
  <li>Product A <a href="/a">View</a></li>
  <li>Product B <a href="/b">View</a></li>
</ul>
<!-- Screen reader link list: 'View, View, View' → impossible to distinguish -->

After

<ul>
  <li>Product A <a href="/a">View Product A</a></li>
  <li>Product B <a href="/b">View Product B</a></li>
</ul>
<!-- Screen reader link list is now meaningful → users know what each link does -->

CSS Example (Guidance)

/* Visually hidden text utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
<!-- Example usage: <a href="/a">View <span class="visually-hidden">Product A</span></a> -->

Manual testing

  1. 1. Open the screen reader link list: NVDA: Insert + F7 VoiceOver (Mac): VO + U → Links TalkBack: Change granularity to Links and swipe
  2. 2. Listen to how each link is announced.
  3. • Expected: Each link has a unique, descriptive name.
  4. • Failure: Multiple links are announced with identical text but lead to different pages.
  5. 3. Inspect repeated UI components (cards, list items, table rows).
  6. 4. If short visible labels are required, ensure unique additional context is provided via hidden text.
  7. 5. Verify that identical link text is only used for identical purpose and destination.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance