Level A
Operable
WCAG 2.0+
Success Criterion 2.4.4: Link Purpose (In Context)
Official W3C Definition
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Why This Criterion Matters
Screen reader users often navigate by pulling up a list of all links on a page. If every link says "Click here" or "Read more," users cannot tell which link leads where. Descriptive link text helps everyone understand where a link will take them.
Best Practice: Link text should make sense out of context. Users should know where a link goes without reading surrounding text.
Who Benefits
Screen Reader Users
Can navigate via links list; need descriptive text.
Cognitive Disabilities
Clear link purpose reduces confusion.
Keyboard Users
Scanning links helps efficient navigation.
Everyone
Descriptive links improve usability for all users.
How to Meet This Criterion
Technique 1: Descriptive Link Text
Good Examples
<!-- Good: Link text describes destination -->
<a href="/annual-report.pdf">Download the 2024 Annual Report (PDF)</a>
<!-- Good: Link text is meaningful -->
<a href="/accessibility-guide">Read our complete accessibility guide</a>
<!-- Good: Product name as link text -->
<h2><a href="/products/widget-pro">Widget Pro</a></h2>
<p>Our most popular widget for professionals.</p>
<!-- Good: Context from containing element -->
<article>
<h2>Accessibility Best Practices</h2>
<p>Learn how to make your website accessible...</p>
<a href="/accessibility-best-practices">Read more</a>
</article>Technique 2: Using aria-label or aria-labelledby
Good Example - Supplementing Short Link Text
<!-- Good: aria-label provides full context -->
<a href="/cart" aria-label="Shopping cart (3 items)">
<i class="fas fa-shopping-cart" aria-hidden="true"></i>
Cart (3)
</a>
<!-- Good: aria-labelledby references heading -->
<article>
<h2 id="article-title">Understanding WCAG 2.2</h2>
<p>New guidelines for web accessibility...</p>
<a href="/wcag-22" aria-labelledby="article-title">Read more</a>
</article>
<!-- Good: Visually hidden text for screen readers -->
<a href="/products/widget">
Learn more<span class="visually-hidden"> about Widget Pro</span>
</a>
Bad Examples
<!-- Bad: Non-descriptive link text -->
<a href="/report.pdf">Click here</a>
<a href="/products">Read more</a>
<a href="/details">More</a>
<a href="/info">Here</a>
<!-- Bad: URL as link text -->
<a href="https://example.com/long/path/to/resource">
https://example.com/long/path/to/resource
</a>
<!-- Bad: Same text for different destinations -->
<a href="/product-a">Learn more</a>
<a href="/product-b">Learn more</a>
<a href="/product-c">Learn more</a>
<!-- Bad: Image link without alt text -->
<a href="/home"><img src="logo.png"></a>Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| "Click here" or "Read more" | Meaningless out of context | Use descriptive link text |
| Same text for different links | Users can't distinguish links | Make each link text unique |
| URL as link text | Hard to read, especially for screen readers | Use human-readable description |
| Image links without alt text | No accessible name for link | Add descriptive alt text to image |
| Icon-only links without labels | No text to describe purpose | Add aria-label or visually hidden text |
Testing Methods
Manual Testing Steps
- Review link text: Read each link - is purpose clear?
- Links list test: Would links make sense in a list without context?
- Screen reader test: Navigate links with screen reader (Insert+F7 in JAWS)
- Check image links: Do image links have alt text?
- Check icon links: Do icon-only links have accessible names?
Automated Tools
- WAVE flags generic link text like "click here"
- axe DevTools checks for empty or generic links
- Lighthouse reports links without discernible names
Related Criteria
1.1.1 Non-text Content
Images need alt text, including in links
2.4.2 Page Titled
Links should lead to appropriately titled pages