A: Links must have discernible text (WCAG 2.4.4 + 4.1.2)
link-name
Ensure that links include perceivable text.
This means
The link (<a>) has no recognizable name, e.g., only an icon without text, an image link with empty alt attribute, or an empty <a>. Screen readers cannot announce where the link leads; keyboard users only see “Link” without purpose.
Impact
Without understandable naming, navigation is confusing or unusable. Users make wrong decisions, abort processes (e.g., donations/checkout), and the site violates WCAG A criteria – posing risks for compliance and conversion.
Recommendation
Give every link a meaningful name:
- Preferred: visible link text in the
<a>(short, clear, describing the target). - If no visible text is possible: use
aria-label="…"oraria-labelledby="…"attributes. - Image link: descriptive
alton the<img>element. - Icon-only: additionally hidden text (
<span class="sr-only">…</span>) oraria-label. - Only technical/decorative: hide from AT (
aria-hidden="true") and remove from tab focus (tabindex="-1"), or remove the element.
Examples
Good:
<a href="/donate">Donate now</a>
<a href="/profile" aria-label="Open profile"><svg><!-- … --></svg></a>
<a href="/about"><img src="team.jpg" alt="About us – team page"></a>
Problematic:
<a href="#"><i class="icon-arrow"></i></a> <!-- no name -->
<a href="/about"><img src="team.jpg" alt=""></a> <!-- empty alt -->
Option 2: Without permanent underlining — only with additional differentiation
- And: Color contrast between link text and surrounding text ≥ 3:1
- And: Additional indicator on hover/focus (underlining, icon, outline, bold font)
<p>Mehr dazu im <a href="/guide" class="link2">Leitfaden</a>.</p>
<style>
.link2{
color:#1d4ed8; font-weight:600; /* Kontrast + Gewichtung */
text-decoration:none; border-bottom:1px dotted currentColor; /* Formindikator */
}
.link2:hover,
.link2:focus{ text-decoration: underline; outline:2px solid currentColor; outline-offset:2px; }
</style>
Note
Regardless of this, normal text must still meet the 1.4.3 contrast requirement (4.5:1) against the background.
Related WCAG criterion:
WCAG 2.4.4 – Link purpose
WCAG 4.1.2 – Name, Role, Value