Multiple links labeled 'Read more' or 'Click here' on the same page are indistinguishable when a screen reader user navigates by links — a common way to skim a page. WCAG 2.2 SC 2.4.4 (Link Purpose in Context) is a Level AA requirement. Users navigating via the NVDA or JAWS links list hear a list of identical 'Read more' labels with no way to tell which article or section each leads to.
Medium because ambiguous link text makes navigation by links nonfunctional for screen reader users, violating WCAG 2.2 SC 2.4.4 at Level AA and forcing sequential reading instead of targeted access.
Make every link's purpose clear from its text alone, or supplement generic text with aria-label that includes the specific context.
// Bad — three identical labels, indistinguishable by screen reader
<a href="/blog/hooks">Read more</a>
<a href="/blog/typescript">Read more</a>
// Good — descriptive link text
<a href="/blog/hooks">Read the guide to React Hooks</a>
// Also acceptable — visible short text + aria-label for full context
<a href="/blog/typescript" aria-label="Read more about TypeScript generics">
Read more
</a>
Audit every link in the codebase. Search for >Click here<, >Read more<, and >Learn more< without a disambiguating aria-label. In blog or card grids, prefer rendering the article title as the link text.
ID: accessibility-wcag.operable.link-purpose
Severity: medium
What to look for: Enumerate every relevant item. Check links throughout the site. Verify that the link text describes where the link goes or what it does. Avoid generic link text like "Click here", "Read more", "Learn more" without context.
Pass criteria: At least 1 of the following conditions is met. All links have descriptive text that indicates the link's purpose. If link text is generic, the surrounding context or aria-label provides clarity.
Fail criteria: Links use vague or generic text with no context (e.g., multiple "Read more" links with no way to distinguish).
Skip (N/A) when: Never — link clarity applies to all pages.
Detail on fail: Example: "Three blog post cards each have a 'Read more' link with no context. Users cannot tell which article each link refers to. Link labeled 'Click here' in footer navigation"
Remediation: Use descriptive link text:
// Bad
<a href="/blog/post-1">Read more</a>
<a href="/blog/post-2">Read more</a>
// Good
<a href="/blog/post-1">Read more about React Hooks</a>
<a href="/blog/post-2">Read more about TypeScript generics</a>
// Or with aria-label
<a href="/blog/post-1" aria-label="Read more about React Hooks">
Read more
</a>