Uninformative Link Text

Overview

Link text must describe the destination or purpose of the link. "Click here" and "Read more" are meaningless when read out of context.

The Problem

This pattern is inaccessible — avoid it.

<a href="/pricing">Click here</a>
<a href="/blog/wcag-guide">Read more</a>
<a href="https://example.com">www.example.com</a>

The Fix

Use this accessible pattern instead.

<a href="/pricing">View pricing plans</a>
<a href="/blog/wcag-guide">Read our WCAG 2.2 compliance guide</a>
<a href="https://example.com">Example website <span class="sr-only">(opens in new tab)</span></a>

Step-by-step

1. 1

   Replace generic phrases ("click here", "learn more", "read more") with descriptive text.

2. 2

   The link text should make sense when read alone, out of context.

3. 3

   For links that open in a new tab, add visually-hidden text '(opens in new tab)' or an aria-label.

4. 4

   For icon-only links, add aria-label to the <a> element.

Framework Notes

How to apply this fix in your stack.

<!-- Visually hidden helper class -->
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

FAQ