Ambiguous Link Text

Diagnose and fix unclear link text to improve navigation for screen reader users and overall user experience

Ambiguous Link Text

What This Means

Ambiguous link text refers to links with vague, non-descriptive text that doesn't clearly indicate where the link leads. Common examples include "click here," "read more," "learn more," or just "here." Screen reader users often navigate by listing all links on a page, making context-free link text confusing and unusable.

Impact on Your Business

Legal Compliance:

Required by WCAG 2.1 Level A (Success Criterion 2.4.4 Link Purpose in Context)
WCAG Level AA requires even clearer link text (2.4.9 Link Purpose Link Only)
Essential for Section 508 compliance
Common accessibility audit violation

User Experience:

Screen reader users hear links out of context when using link lists
68% of screen reader users navigate via links list feature
Multiple "click here" links create confusing navigation
Users can't determine link destination without reading surrounding text

SEO Benefits:

Search engines use anchor text to understand page relationships
Descriptive link text improves relevance signals
Better internal linking structure
Improved crawlability and indexing

Usability Benefits:

All users benefit from clear link text
Improves scannability
Reduces cognitive load
Better mobile experience (easier to tap correct link)

How to Diagnose

Start screen reader:
- Windows: NVDA (free)
- Mac: VoiceOver (Cmd+F5)
- Chrome: ChromeVox extension
Open links list:
- NVDA: Insert+F7, select "Links"
- VoiceOver: VO+U, then right arrow to Links
- JAWS: Insert+F7
Review all links out of context

What to look for:

Multiple links with identical text ("Read more", "Click here")
Links that don't make sense without context
Vague link text that doesn't indicate destination
Links like "here", "this", "more"

Example of bad links list:

- Click here
- Read more
- Learn more
- Click here
- Read more
- Here

Example of good links list:

- View Product Features
- Read Customer Reviews
- Download Product Specifications PDF
- Contact Sales Team
- Learn About Our Pricing Plans

Method 2: WAVE Browser Extension

Install WAVE Extension
Navigate to your webpage
Click the WAVE icon
Look for Alerts section
Check for "Suspicious link text" or "Redundant link"

What to look for:

Alerts for "suspicious link text"
Multiple adjacent links to same destination
Links flagged as potentially ambiguous
Count of problematic links

Method 3: Manual Visual Scan

Read only the link text on your page
Ignore surrounding context
Ask yourself: Can I tell where each link goes?

Red flags:

<!-- Ambiguous links -->
<a href="/features">Click here</a>
<a href="/pricing">Learn more</a>
<a href="/contact">Read more</a>
<a href="/about">Here</a>
<a href="/products">More info</a>

Clear links:

<!-- Descriptive links -->
<a href="/features">View product features</a>
<a href="/pricing">View pricing plans</a>
<a href="/contact">Contact our sales team</a>
<a href="/about">Learn about our company</a>
<a href="/products">Browse our product catalog</a>

Method 4: Chrome DevTools Console

Find potentially ambiguous links:

// Find links with common ambiguous text
const ambiguousTerms = [
  'click here',
  'here',
  'read more',
  'learn more',
  'more',
  'link',
  'this',
  'continue',
  'more info',
  'more information'
];

const links = document.querySelectorAll('a');
const problematicLinks = [];

links.forEach(link => {
  const text = link.textContent.trim().toLowerCase();
  if (ambiguousTerms.includes(text)) {
    problematicLinks.push({
      text: link.textContent.trim(),
      href: link.href,
      element: link
    });
    console.warn('Ambiguous link:', link.textContent.trim(), '→', link.href);
  }
});

console.log(`Found ${problematicLinks.length} potentially ambiguous links`);

// Find duplicate link text
const linkTextCounts = {};
links.forEach(link => {
  const text = link.textContent.trim();
  if (text) {
    linkTextCounts[text] = (linkTextCounts[text] || 0) + 1;
  }
});

console.log('Duplicate link text:');
Object.entries(linkTextCounts)
  .filter(([text, count]) => count > 1)
  .forEach(([text, count]) => {
    console.log(`"${text}": ${count} times`);
  });

What to look for:

Links flagged as ambiguous
Multiple links with identical text pointing to different destinations
Generic link text patterns

Method 5: axe DevTools

Install axe DevTools Extension
Open Chrome DevTools (F12)
Navigate to "axe DevTools" tab
Click "Scan ALL of my page"
Check for:
- "Links must have discernible text"
- "Identical links should have consistent purpose"

What to look for:

Link text violations
Warnings about link purpose
Best practices for link labeling

Method 6: Lighthouse Accessibility Audit

Open Chrome DevTools (F12)
Navigate to "Lighthouse" tab
Select "Accessibility" category
Click "Generate report"
Look for:
- "Links have a discernible name"
- Link-related best practices

What to look for:

Failed link name audits
Recommendations for improvement
Impact on accessibility score

General Fixes

Fix 1: Make Link Text Descriptive

Problem: Generic link text

<!-- Bad - Non-descriptive -->
<p>Our new product has amazing features. <a href="/features">Click here</a> to learn more.</p>

<p>Read our latest blog post. <a href="/blog/seo-tips">Read more</a></p>

<p>Download our guide <a href="/guide.pdf">here</a>.</p>

Solution: Descriptive link text

<!-- Good - Self-explanatory -->
<p>Our new product has amazing features. <a href="/features">View product features</a>.</p>

<p><a href="/blog/seo-tips">Read our latest blog post about SEO tips</a>.</p>

<p><a href="/guide.pdf">Download our SEO best practices guide (PDF)</a>.</p>

Best practices:

Link text should make sense out of context
Describe the destination or action
Include file type for downloads (PDF, DOC, etc.)
Avoid "click here" and "read more"

Fix 2: Handle Multiple "Read More" Links

Problem: Multiple identical links on same page

<!-- Bad - All say "Read more" -->
<article>
  <h2>Blog Post Title 1</h2>
  <p>Summary...</p>
  <a href="/post1">Read more</a>
</article>

<article>
  <h2>Blog Post Title 2</h2>
  <p>Summary...</p>
  <a href="/post2">Read more</a>
</article>

<article>
  <h2>Blog Post Title 3</h2>
  <p>Summary...</p>
  <a href="/post3">Read more</a>
</article>

Solution 1: Include post title in link text

<!-- Good - Unique, descriptive links -->
<article>
  <h2>10 SEO Tips for 2024</h2>
  <p>Summary...</p>
  <a href="/post1">Read more about SEO tips for 2024</a>
</article>

<article>
  <h2>How to Improve Page Speed</h2>
  <p>Summary...</p>
  <a href="/post2">Read more about improving page speed</a>
</article>

<article>
  <h2>Accessibility Best Practices</h2>
  <p>Summary...</p>
  <a href="/post3">Read more about accessibility best practices</a>
</article>

Solution 2: Use aria-label

<!-- Good - Visual "Read more" with accessible label -->
<article>
  <h2>10 SEO Tips for 2024</h2>
  <p>Summary...</p>
  <a href="/post1" aria-label="Read more about 10 SEO Tips for 2024">Read more</a>
</article>

<article>
  <h2>How to Improve Page Speed</h2>
  <p>Summary...</p>
  <a href="/post2" aria-label="Read more about How to Improve Page Speed">Read more</a>
</article>

Solution 3: Make entire card clickable

<!-- Good - Entire card is link -->
<article>
  <a href="/post1" class="card-link">
    <h2>10 SEO Tips for 2024</h2>
    <p>Summary of the article content...</p>
    <span class="read-more-indicator">Read article →</span>
  </a>
</article>

Fix 3: Fix Product Listing Links

Problem: Non-descriptive product links

<!-- Bad -->
<div class="product">
  <img src="shirt.jpg" alt="Red t-shirt">
  <h3>Premium Cotton T-Shirt</h3>
  <p>$29.99</p>
  <a href="/product/123">View</a>
  <a href="/product/123">Buy</a>
</div>

Solution: Descriptive product links

<!-- Good -->
<div class="product">
  <a href="/product/123">
    <img src="shirt.jpg" alt="Red premium cotton t-shirt">
  </a>
  <h3>
    <a href="/product/123">Premium Cotton T-Shirt</a>
  </h3>
  <p class="price">$29.99</p>
  <a href="/product/123">View product details</a>
  <a href="/cart/add/123" class="btn-primary">Add Premium Cotton T-Shirt to cart</a>
</div>

Or use aria-label for brevity:

<!-- Good - Short visual text with descriptive aria-label -->
<div class="product">
  <a href="/product/123" aria-label="View Premium Cotton T-Shirt details">
    <img src="shirt.jpg" alt="Red premium cotton t-shirt">
  </a>
  <h3>
    <a href="/product/123">Premium Cotton T-Shirt</a>
  </h3>
  <p class="price">$29.99</p>
  <a href="/product/123" aria-label="View Premium Cotton T-Shirt details">View</a>
  <a href="/cart/add/123" aria-label="Add Premium Cotton T-Shirt to cart">Buy Now</a>
</div>

Fix 4: Improve Download Links

Problem: Vague download links

<!-- Bad -->
<p>Annual report: <a href="/report.pdf">Download</a></p>
<p>Product specs: <a href="/specs.xlsx">Click here</a></p>

Solution: Descriptive download links

<!-- Good -->
<p><a href="/report.pdf">Download 2024 annual report (PDF, 2.3 MB)</a></p>
<p><a href="/specs.xlsx">Download product specifications (Excel, 156 KB)</a></p>

Best practices for download links:

Include file type (PDF, DOC, XLS, etc.)
Include file size for large files
Describe what the file contains
Indicate if file opens in new window

Enhanced download link:

<a
  href="/whitepaper.pdf"
  download
  aria-label="Download SEO best practices whitepaper, PDF format, 3.2 megabytes"
>
  Download SEO Best Practices Whitepaper
  <span class="file-meta">(PDF, 3.2 MB)</span>
</a>

Problem: Generic navigation links

<!-- Bad -->
<nav>
  <a href="/about">More</a>
  <a href="/services">Details</a>
  <a href="/contact">Click here</a>
</nav>

Solution: Clear navigation labels

<!-- Good -->
<nav aria-label="Main navigation">
  <a href="/about">About Us</a>
  <a href="/services">Our Services</a>
  <a href="/contact">Contact Us</a>
</nav>

Button-style links:

<!-- Bad -->
<a href="/signup" class="button">Here</a>

<!-- Good -->
<a href="/signup" class="button">Create free account</a>

<!-- Or actual button for forms -->
<button type="submit">Create free account</button>

Fix 6: Handle Images as Links

Problem: Image links without clear purpose

<!-- Bad - Image link unclear -->
<a href="/product/123">
  <img src="product.jpg" alt="Product image">
</a>

<!-- Bad - Empty alt in link -->
<a href="/home">
  <img src="logo.png" alt="">
</a>

Solution: Descriptive image alt text in links

<!-- Good - Alt text describes link destination -->
<a href="/product/123">
  <img src="product.jpg" alt="View details for Premium Cotton T-Shirt">
</a>

<!-- Good - Logo link -->
<a href="/home">
  <img src="logo.png" alt="BlueFrog Analytics home">
</a>

Image + text link:

<!-- Option 1: Descriptive alt, visible text -->
<a href="/product/123">
  <img src="product.jpg" alt="Premium Cotton T-Shirt">
  <span>View details</span>
</a>

<!-- Option 2: Empty alt to avoid redundancy -->
<a href="/product/123" aria-label="View Premium Cotton T-Shirt details">
  <img src="product.jpg" alt="">
  <span>View details</span>
</a>

Problem: Icon-only links without text

<!-- Bad - Screen reader announces URL or nothing -->
<a href="https://twitter.com/company">
  <i class="fa fa-twitter"></i>
</a>

<a href="https://facebook.com/company">
  <img src="fb-icon.svg">
</a>

Solution: Add accessible labels

<!-- Good - Using visually-hidden span -->
<a href="https://twitter.com/company">
  <i class="fa fa-twitter" aria-hidden="true"></i>
  <span class="visually-hidden">Follow us on Twitter</span>
</a>

<!-- Good - Using aria-label -->
<a href="https://facebook.com/company" aria-label="Follow us on Facebook">
  <i class="fa fa-facebook" aria-hidden="true"></i>
</a>

<!-- Good - Using title AND aria-label -->
<a
  href="https://linkedin.com/company"
  aria-label="Connect with us on LinkedIn"
  title="LinkedIn"
>
  <img src="linkedin-icon.svg" alt="">
</a>

Visually-hidden class:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Common Mistakes

"Click here" links - Most common violation
Multiple identical "Read more" links - Confusing out of context
"Here" as link text - Completely non-descriptive
Image links without alt text - Screen reader announces URL
Generic "Learn more" - Doesn't indicate what you'll learn
URL as link text - "https://example.com/products/category/item/123"
Single-word links - "Next", "Previous", "More"
Icon links without labels - Social media icons
Empty links - Links with no text content
Links that are just images without alt - No accessible name

Link Text Quality Checklist

Good link text should:

Make sense out of context
Clearly indicate link destination or action
Be unique on the page (or uniquely labeled)
Avoid "click here" or "read more"
Include file type for downloads
Describe image content if image is link
Not rely solely on color or position
Be concise but descriptive

Ask yourself:

Can I tell where this link goes without reading surrounding text?
If I listed all links on this page, would each be distinguishable?
Would this make sense to someone using a screen reader?

Verification

After fixing link text:

Use screen reader links list:
- Open links list (Insert+F7 in NVDA)
- Review all links out of context
- Verify each link is clear and unique
- Check for remaining ambiguous links
Run WAVE:
- No "suspicious link text" alerts
- No redundant link warnings
- Verify link improvements
Run axe DevTools:
- No link text violations
- Links have discernible names
- No duplicate link warnings
Manual review:
- Read only link text on page
- Verify each is self-explanatory
- Check for duplicate text with different destinations
- Ensure consistency across site
User testing:
- Ask someone to scan only the links
- Can they tell where each link goes?
- Are any links confusing?

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform	Troubleshooting Guide
Shopify	Shopify Link Text Guide
WordPress	WordPress Link Text Guide
Wix	Wix Link Text Guide
Squarespace	Squarespace Link Text Guide
Webflow	Webflow Link Text Guide

Additional Resources

↑ Back to top

Ambiguous Link Text

Ambiguous Link Text

What This Means

Impact on Your Business

How to Diagnose

Method 1: Screen Reader Links List

Method 2: WAVE Browser Extension

Method 3: Manual Visual Scan

Method 4: Chrome DevTools Console

Method 5: axe DevTools

Method 6: Lighthouse Accessibility Audit

General Fixes

Fix 1: Make Link Text Descriptive

Fix 2: Handle Multiple "Read More" Links

Fix 3: Fix Product Listing Links

Fix 4: Improve Download Links

Fix 5: Fix Navigation and Button Links

Fix 6: Handle Images as Links

Fix 7: Social Media and Icon Links

Common Mistakes

Link Text Quality Checklist

Verification

Platform-Specific Guides

Additional Resources