Ensure links have descriptive accessible names

WCAG 2.4.4
Link Purpose (In Context)

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.

A link must make sense on its own — no guessing required.

Why this matters and how to fix it

Why this matters

Screen reader users often navigate by bringing up a list of links. If link text is vague — like “Click here,” “Read more,” or “Learn more” — the user cannot determine where the link goes or what action it performs. Clear, descriptive link text improves navigation speed, confidence, and comprehension.

How to fix this issue

Use link text that describes the destination or action (e.g., 'Download annual report', not 'Click here'). If the visible text must remain short, add accessible context with `aria-label` or `aria-labelledby` — but visible text should still be meaningful whenever possible.

Automated detection · Manual review recommended

Developer guidance

Do not rely on surrounding text — the link text itself must carry meaning. This issue is common in blog cards, product lists, and 'read more' lists. If multiple links have the same text but different destinations, fix both link text and accessible names.

Code examples

Incorrect Implementation

<a href="/report">Read more</a>

Correct Implementation

<a href="/report">Read the 2025 Accessibility Report</a>

Real-World Examples

Before

<div class="card">
  <h3>Q2 Sales Results</h3>
  <p>Summary of performance...</p>
  <a href="/sales-q2">Read more</a>
</div>
<!-- Screen reader: 'Read more, link' (ambiguous) -->

After

<div class="card">
  <h3 id="sales-heading">Q2 Sales Results</h3>
  <p>Summary of performance...</p>
  <a href="/sales-q2" aria-labelledby="sales-heading">Read more</a>
</div>
<!-- Screen reader: 'Q2 Sales Results, link' (clear) -->

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, JAWS, or TalkBack).
  2. 2. Open the list of links:
  3. • NVDA: Insert + F7
  4. • VoiceOver: VO + U → Links
  5. • TalkBack: Change granularity to Links and swipe
  6. 3. Listen to how each link is announced.
  7. • Expected: Each link clearly communicates its destination or purpose.
  8. • Failure: Links like 'Click here', 'Read more', 'Learn more', or 'More' appear with no context.
  9. 4. If the link text must be short visually, add descriptive context via aria-label or aria-labelledby.
  10. 5. Re-test to ensure the accessible name is meaningful and not duplicated across unrelated links.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance