A: Links müssen wahrnehmbaren Text beinhalten (WCAG 2.4.4 + 4.1.2)

Bedeutung
Auswirkung
Empfehlung
Beispiele
Hinweis

Stellt sicher, dass Links wahrnehmbaren Text beinhalten.

Das bedeutet

Der Link (<a>) hat keinen erkennbaren Namen, z. B. nur ein Icon ohne Text, ein Bildlink mit leerem alt oder ein leeres <a>. Screenreader können nicht ansagen, wohin der Link führt; auch Tastaturnutzende sehen nur „Link“, ohne Zweck.

Auswirkung

Ohne verständliche Benennung ist die Navigation verwirrend oder unbenutzbar. Nutzerinnen und Nutzer treffen falsche Entscheidungen, brechen Vorgänge ab (z. B. Spenden/Checkout) und die Seite verstößt gegen WCAG A-Kriterien – mit entsprechendem Risiko für Compliance und Conversion.

Empfehlung

Gib jedem Link einen aussagekräftigen Namen:

Bevorzugt: sichtbarer Linktext im <a> (kurz, eindeutig, Ziel beschreibend).
Wenn kein sichtbarer Text möglich: aria-label="…" oder aria-labelledby="…" setzen.
Bildlink: beschreibendes alt am <img>.
Icon-only: zusätzlich versteckten Text (<span class="sr-only">…</span>) oder aria-label.
Nur technisch/dekorativ: für AT verbergen (aria-hidden="true") und aus dem Tab-Fokus nehmen (tabindex="-1"), oder das Element entfernen.

Beispiele

Problematisch

<a href="#"><i class="icon-arrow"></i></a>         <!-- kein Name -->
<a href="/about"><img src="team.jpg" alt=""></a>  <!-- alt leer -->

Besser

<a href="/donate">Jetzt spenden</a>
<a href="/profile" aria-label="Profil öffnen"><svg><!-- … --></svg></a>
<a href="/about"><img src="team.jpg" alt="Über uns – Teamseite"></a>

Variante 2: Ohne dauerhafte Unterstreichung — nur mit zusätzlicher Unterscheidung

Und: Farbkontrast Linktext vs. umgebender Text ≥ 3:1
Und: zusätzlicher Indikator auf Hover/Focus (Unterstreichung, Icon, Outline, Fettschrift)

<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>

Hinweis

Unabhängig davon muss normaler Text weiterhin die 1.4.3-Kontrastanforderung (4,5:1) zum Hintergrund erfüllen.

Verknüpftes WCAG-Kriterium:
WCAG 2.4.4 – Linkzweck
WCAG 4.1.2 – Name, Rolle, Wert