FeaturesPricingAudit GuideFree StatementDashboard →

Make Link Purpose Clear from Link Text

Learn how to write clear link text that describes the destination. Includes code examples and common mistakes.

6 min read
moderate severityWCAG Level AWCAG 2.1 Success Criterion 2.4.4Manual review needed

What Is It?

Clear link purpose means the link text itself explains the link's destination or action. Screen reader users often hear links out of context, so link text must be self-explanatory.

Affected users: Screen reader users, voice control users, users with cognitive disabilities, users scanning pages, keyboard users

Why It Matters

Screen reader users navigate by jumping between links. Without descriptive link text, they don't know what each link does. Voice control users also rely on link names to navigate.

How to Detect This Issue

Test with screen reader by enabling link list (usually keystroke to jump to links). Read links out of context and verify each is understandable. Scan page visually for generic text.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<a href="/about">Click here</a> to learn about us
After (accessible)
<a href="/about">Learn about our company history and team</a>

Instead of generic text, make the link itself descriptive. Avoid 'Click here', 'Read more', 'Link' - these don't work out of context.

React / Next.js

Before
<a href={`/products/${id}`}>More</a>
After
<a href={`/products/${id}`}>{product.name} (${product.price})</a>

Use dynamic link text from your data. Include product name and relevant details. Users understand the link purpose without surrounding context.

WordPress

Before
Text: "for more information click here" with "click here" linked to /information page
After
Text: "Learn more about our services" with "Learn more about our services" linked to /services page

In WordPress editor, make the entire descriptive phrase the link, not just 'here' or 'click'. Write link text that makes sense on its own.

Shopify Liquid

Before
<a href="/products/wallet">More Details</a>
After
<a href="/products/wallet">View Red Leather Wallet details and reviews</a>

Shopify liquid: craft descriptive link text in templates. Include product name and relevant context in the link text itself.

Common Mistakes

✗

Using generic link text: 'Click here', 'Read more', 'Link', 'More', 'Details'

✗

Writing 'Click here for X' instead of making 'X' the link (extra words)

✗

Links like 'Learn more' that don't specify topic (learn more about what?)

✗

Using URL as link text: 'https://example.com/products'

✗

Broken link structure: text before link with critical context (screen readers hear link first)

Frequently Asked Questions

What if I need to link to 'More'?
Use aria-label to add context: <a href="/blog">More<span aria-label=" blog posts"></span></a> or simply write better link text: <a href="/blog">Read our latest blog posts</a>
Should link text include the destination URL?
No. Write natural language. Screen readers read URLs literally which is hard to understand. Exception: if URL is the content (like source citation links).
Is it OK to have multiple links with the same text?
Avoid it. If necessary, use aria-label for context: <a href="/page1" aria-label="Download full report (PDF, 2MB)">Download</a> and <a href="/page2" aria-label="Download summary (PDF, 500KB)">Download</a>
What about icon links?
Icon-only links need aria-label: <a href="/twitter" aria-label="Follow us on Twitter"><i class="icon-twitter"></i></a>

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides