Why is Click Here bad?

Three reasons. Screen-reader users navigate by pulling up the page's link list — Click Here gives them a list of identical-sounding links with no idea where they go. SEO: search engines use anchor text as a relevance signal for the destination; Click Here passes no relevance. Users skimming the page see Click Here and have to read surrounding context to understand the link's purpose — descriptive text scans faster.

Can I keep the visible text Read More if design requires it?

Yes via aria-label. Visible text stays Read More for design consistency; aria-label provides the descriptive name screen readers announce. Pattern: Read More . The visible/announced text differ, which is acceptable specifically for this disambiguation pattern.

What's the WCAG requirement for link text?

WCAG 2.4.4 Link Purpose (In Context) is Level A: 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. WCAG 2.4.9 Link Purpose (Link Only) is Level AAA: text alone must describe purpose. For broader audience, aim for AAA — descriptive without needing context.

Should link text match the destination page title?

Close, not necessarily identical. The link text should describe the destination accurately enough that users know what to expect. If your About page has h1 'Our Story', linking to it with 'About us' or 'Our company story' both work. Avoid linking with text that doesn't match destination at all — that surprises users.

How to Fix Link Text

Vague link text — "Click Here", "Read More", "Learn More", "Details", "→" — is one of the most common accessibility findings and one of the most impactful to fix. Screen-reader users navigate by pulling up the page's link list to scan their options. A list of identical-sounding links with no clue where they go is useless. Search engines also use anchor text as a destination relevance signal. Fixing link text helps accessibility AND SEO simultaneously.

1. Audit your link text

Step 1

Run the Accessibility audit

Run the Accessibility audit. Filter to link-text findings. Categories: vague text (Click Here, Read More), duplicate anchor text pointing at different URLs, identical text within same context, empty link text, image link with no alt.

Step 2

Pull up the link list yourself

With VoiceOver: Cmd+VO+U → choose "Links" rotor. With NVDA: Insert+F7 → Links. Scan the list. If you can't tell where each link goes from just its text, the text needs fixing.

2. The descriptive-link rewrite

Before	After
`Click here`	`Download the 2025 pricing PDF`
`Read more`	`Read more about our certification process`
`Learn more`	`Learn more about enterprise plans`
`Details`	`View detailed specs for Model X`
`→`	`Browse all products`
`here` (e.g., "you can find it here")	`find it on the support page`

3. Handle the design constraint

Designers often want consistent visual CTAs — every card's "Read More" button looking identical. The accessibility fix doesn't require breaking that. Use aria-label.

<!-- Visible Read More button, but accessible name is descriptive -->
<article>
  <h3>Q3 sales analysis</h3>
  <p>Revenue grew 23% led by EMEA region performance...</p>
  <a href="/learning-hub.html" 
     aria-label="Read more about Q3 sales analysis">
    Read More
  </a>
</article>

Sighted users see consistent "Read More" buttons. Screen-reader users hear distinct descriptive names. Both groups served.

Template implementation

<!-- WordPress -->
<a href="<?php the_permalink(); ?>" 
   aria-label="Read more about <?php the_title_attribute(); ?>">
  Read More
</a>

<!-- Shopify Liquid -->
<a href="{{ article.url }}" 
   aria-label="Read more about {{ article.title | escape }}">
  Read More
</a>

<!-- React -->
<a href={article.url} 
   aria-label={`Read more about ${article.title}`}>
  Read More
</a>

4. Fix duplicate-text different-destination

⚠️ Two links with identical text pointing at different URLs are confusing for everyone. Screen readers announce them identically. SEO suffers because anchor text relevance gets split.

Example: a footer with three "Contact us" links — one going to /contact/, one to /support/, one to /sales-contact/.

<!-- WRONG -->
<a href="/support.html">Contact us</a>
<a href="/support.html">Contact us</a>
<a href="/support.html">Contact us</a>

<!-- RIGHT -->
<a href="/support.html">General contact</a>
<a href="/support.html">Contact support</a>
<a href="/support.html">Contact sales</a>

5. Icon-only links need names

<!-- Social icons in footer -->
<a href="https://twitter.com/yourbrand" aria-label="Follow us on Twitter">
  <svg><!-- twitter icon --></svg>
</a>
<a href="https://linkedin.com/company/yourbrand" aria-label="Connect on LinkedIn">
  <svg><!-- linkedin icon --></svg>
</a>

Without aria-label, screen readers announce just "link" with no destination.

6. Document downloads: name the file

<!-- Vague -->
<a href="/docs/whitepaper.pdf">Download</a>

<!-- Descriptive -->
<a href="/docs/whitepaper.pdf">
  Download 2025 industry whitepaper (PDF, 2.4 MB)
</a>

Include file type and size. Helps users decide whether to click (mobile users on data, anyone on slow connection). Screen readers announce the full descriptive text.

7. Educate content editors

Most bad link text comes from content editors writing "click here" as a habit. Add to your editorial style guide:

Never use "click here", "this", "here", "more"
Link text should describe the destination, not the action
Link text should make sense out of context (in a screen-reader link list)
Same link text should always go to the same place
Different destinations need different link text

💡 The "list of links" test: imagine your page's links pulled into a flat list with no surrounding context. Can you tell what each link does? If not, rewrite for context-independence.

8. Re-run the audit

After rewriting, re-run the Accessibility audit. Link-text findings should drop sharply. Spot-check with a screen reader's link list.

♿ Re-run the Accessibility audit

Verify link-text findings are cleared.

Run Accessibility Audit →