Back to Knowledge Base
Common Issues

Fixing Link Purpose Errors

10 min read

Making Link Purpose Clear

Users must be able to understand where a link goes before clicking it. Vague link text like "click here" or "read more" creates barriers for screen reader users who often navigate by links out of context.

WCAG Requirements

2.4.4 Link Purpose (In Context) (Level A): The purpose of each link can be determined from the link text alone, or from the link text together with its context.

2.4.9 Link Purpose (Link Only) (Level AAA): The purpose of each link can be determined from the link text alone.

Why Link Purpose Matters

Screen reader users often:

  • Navigate pages using a list of links
  • Hear links out of context from surrounding text
  • Need to distinguish between multiple links

Imagine hearing a list of links that says:

  • "Click here"
  • "Read more"
  • "Learn more"
  • "Click here"

This provides no useful information!

Bad Link Text Examples

html
<!-- Vague link text -->
<a href="/guide">Click here</a>
<a href="/report.pdf">Download</a>
<a href="/pricing">Learn more</a>
<a href="/article-123">Read more</a>
<a href="/contact">Here</a>

Good Link Text Examples

html
<!-- Descriptive link text -->
<a href="/guide">Read our accessibility guide</a>
<a href="/report.pdf">Download the 2024 Annual Report (PDF, 2.5MB)</a>
<a href="/pricing">View pricing plans</a>
<a href="/article-123">Read more about WCAG compliance</a>
<a href="/contact">Contact our support team</a>

Strategies for Clear Links

Strategy 1: Make Link Text Descriptive

html
<!-- Before -->
<p>To learn about our services, <a href="/services">click here</a>.</p>

<!-- After -->
<p><a href="/services">Learn about our accessibility services</a>.</p>

Strategy 2: Use Context with ARIA

When you can't change the visible text, use aria-label:

html
<article>
  <h2>WCAG 2.2 Update</h2>
  <p>New guidelines have been released...</p>
  <a href="/wcag-update" aria-label="Read more about WCAG 2.2 Update">
    Read more
  </a>
</article>

Strategy 3: Use aria-describedby for Context

html
<article>
  <h2 id="article-title">Making Accessible Forms</h2>
  <p>Learn how to create forms that everyone can use...</p>
  <a href="/forms-guide" aria-describedby="article-title">
    Read the full guide
  </a>
</article>

Strategy 4: Include Format Information

html
<a href="/report.pdf">Annual Report 2024 (PDF, 2.5MB)</a>
<a href="/video">Watch the demo (video, 5 minutes)</a>
<a href="https://external.com" target="_blank" rel="noopener">
  Partner website (opens in new tab)
  <span class="sr-only">, external link</span>
</a>

"Read More" Pattern Done Right

When you have multiple "read more" links on a page:

html
<!-- Option 1: Descriptive visible text -->
<article>
  <h2>Accessibility Testing Guide</h2>
  <p>Learn the fundamentals of accessibility testing...</p>
  <a href="/testing-guide">Read the testing guide</a>
</article>

<!-- Option 2: Hidden descriptive text -->
<article>
  <h2>Color Contrast Tips</h2>
  <p>Ensure your text is readable...</p>
  <a href="/contrast-tips">
    Read more
    <span class="sr-only"> about color contrast tips</span>
  </a>
</article>

<!-- Option 3: aria-label -->
<article>
  <h2>Keyboard Navigation</h2>
  <p>Make your site keyboard accessible...</p>
  <a href="/keyboard" aria-label="Read more about keyboard navigation">
    Read more
  </a>
</article>

Links vs. Buttons

Use the right element for the job:

html
<!-- Links: Navigation to new page/resource -->
<a href="/about">About Us</a>
<a href="/file.pdf" download>Download PDF</a>

<!-- Buttons: Actions on current page -->
<button type="submit">Submit Form</button>
<button onclick="openModal()">Open Settings</button>

If styling a link to look like a button (or vice versa), maintain semantic meaning:

html
<!-- Link styled as button (still navigates) -->
<a href="/signup" class="button-style">Sign Up Now</a>

<!-- Button that looks like a link (still an action) -->
<button class="link-style" onclick="showDetails()">Show details</button>

Testing Link Purpose

  1. Links List: Use a screen reader to view all links on the page. Does each one make sense out of context?
  1. Tab Through: Tab through all links. Can you tell where each one goes?
  1. Automated Testing: AccessibilityMonitor flags generic link text like "click here" and "read more".

Link Checklist

  • No "click here" or "here" links
  • "Read more" links have additional context
  • Link text describes the destination
  • Format and file size noted for downloads
  • External links indicate they open in new tabs
  • Links and buttons are used semantically correctly

Was this article helpful?