Skip to content
English
  • There are no suggestions because the search field is empty.

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="…" or aria-labelledby="…" attributes.
  • Image link: descriptive alt on the <img> element.
  • Icon-only: additionally hidden text (<span class="sr-only">…</span>) or aria-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