Links with same accessible name must match purpose sitewide

Links with the same accessible name must serve the same purpose

A link’s accessible name cannot be reused for different purposes.

This issue appears in lists, card grids, navigation, and CTAs where labels like “Read more” or “Learn more” repeat.

It confuses screen reader users and anyone scanning link lists for quick decisions.

Why It Matters

People who use screen readers often navigate by a list of links. If multiple links have the same name but lead to different places, users cannot tell which one to follow.

Users with cognitive or memory impairments rely on predictable labeling to decide quickly. Reused names with different outcomes break that predictability.

Consistent naming also supports sighted users who skim content and keyboard users who tab through links.

Common Causes

• Repeating generic labels (Read more, Learn more, Click here) without adding context.
• Using the same visible label for different targets in headers, footers, or card components.
• Overriding visible text with aria-label, creating identical programmatic names across different links.
• Image-only links with vague or duplicated alt text.
• Icon-only links without descriptive text or accessible names.

How to Fix

1. Audit link names
   • Collect all links and their computed accessible names (from text content, aria-label/aria-labelledby, image alt, or SVG title/desc).
   • Flag duplicates that lead to different destinations or actions.
2. Align identical names to identical purposes
   • If two links truly perform the same action or reach the same resource, keep the same name for both.
   • If they differ, change one or both names to reflect their unique purpose.
3. Prefer meaningful visible text
   • Make the link text self-sufficient: “Read more about housing policy” instead of just “Read more”.
   • Recommendation: Keep the visible text meaningful; it helps all users and reduces reliance on ARIA.
4. Add hidden context when design requires short labels
   • If the UI must show short labels, append context inside the link using a visually hidden span (e.g., the article title or product name). This changes the accessible name without changing the visual label.
   • Ensure the visible words are included in the programmatic name to satisfy Label in Name (WCAG 2.5.3).
5. Handle image and icon links correctly
   • For image-only links, use alt text that describes the purpose (e.g., “Download annual report (PDF)”).
   • If an image is purely decorative and there is adjacent link text, use empty alt (alt="").
6. Be consistent with file types and behaviors
   • Add file type or behavior to the link text or accessible name when relevant: “Schedule (PDF)”, “Opens in a new window”.

How to Test

Keyboard check

• Tab through all links in order.
• Verify that links with identical accessible names go to the same resource or perform the same action.
• Confirm that links with different destinations have distinguishable names.

Screen reader check

• With a screen reader (NVDA/JAWS on Windows, VoiceOver on macOS/iOS), open the links list and review duplicates.
• Activate each duplicate to confirm they lead to equivalent targets.
• Check that the accessible name includes the visible words (Label in Name).

Mobile/touch check

• Use VoiceOver rotor (iOS) or TalkBack links navigation to list links and inspect duplicates.
• Ensure purpose is clear without reading surrounding text.

Simple checklist

• Do identical names map to the same purpose?
• Do different purposes have different names?
• Do link names make sense without surrounding context?
• Do image links have accurate alt text (or empty alt when redundant)?
• Do programmatic names include the visible label text?

Good Example

<!-- Repeated CTA with hidden context to differentiate distinct targets -->
<ul>
  <li>
    <a href="/news/zoning-update">
      Read more <span class="visually-hidden">about Zoning Update</span>
    </a>
  </li>
  <li>
    <a href="/news/transit-funding">
      Read more <span class="visually-hidden">about Transit Funding</span>
    </a>
  </li>
</ul>

<!-- Identical name used for identical purpose (same destination) -->
<nav aria-label="Footer">
  <a href="/privacy">Privacy policy</a>
  <a href="/privacy">Privacy policy</a>
</nav>

<!-- Image link with clear purpose and file type -->
<a href="/files/2026-budget.pdf">
  <img src="/img/pdf-icon.svg" alt="" />
  2026 City Budget (PDF)
</a>

/* Visually hidden utility class */
<style>
.visually-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
</style>

Bad Example

<!-- Same accessible name, different destinations (violates the rule) -->
<div class="cards">
  <a href="/article/a">Read more</a>
  <a href="/article/b">Read more</a>
</div>

<!-- Icon-only link without a name -->
<a href="/download/report.pdf"><svg aria-hidden="true"><!-- no title --></svg></a>

<!-- Image-only link with vague alt text reused elsewhere -->
<a href="/careers"><img src="/img/button.png" alt="Click here" /></a>

Quick Checklist

• Identical accessible names are used only for identical purposes.
• Different destinations/actions have distinct, descriptive names.
• Link text stands on its own; add hidden context if the UI requires brevity.
• Visible words appear in the accessible name (Label in Name).
• Image/icon links provide accurate text alternatives or empty alt when redundant.
• File types and special behaviors are indicated in the link name when relevant.
• Patterns and components enforce consistent, purposeful link naming.