Aussagekräftige Linktexte schreiben

WCAG 2.4.4, 4.1.2, 1.1.1, 2.5.3 · leicht · etwa 30 Minuten · Stand 08.11.2026

Worum es geht

Links wie "hier klicken", "mehr" oder "weiterlesen" sind im Fließtext für Sehende oft verständlich, weil der Satz daneben steht. Wer sich aber eine Liste aller Links anzeigen lässt oder mit Tab von Link zu Link springt, hört zehnmal "mehr" und weiß nicht, wohin welcher führt. WCAG 2.4.4 verlangt, dass der Zweck eines Links aus dem Linktext selbst oder aus seinem direkten Zusammenhang hervorgeht, etwa aus dem Satz oder Listenpunkt, in dem er steht. Links, die nur aus einem Icon oder Bild bestehen, brauchen zusätzlich einen Namen.

Wen es betrifft

Blinde Menschen mit Screenreader. NVDA (Einfügen + F7) und VoiceOver (Rotor) zeigen eine Liste aller Links der Seite, ohne den umgebenden Text.
Menschen, die mit Tastatur arbeiten und mit Tab von Link zu Link springen.
Menschen mit Sprachsteuerung, die einen Link mit dem Befehl "Klicke" und dem sichtbaren Linktext auswählen (2.5.3).
Menschen mit kognitiven Einschränkungen, für die eindeutige Links leichter zu verstehen sind.

So behebst du es

Das Ziel in den Linktext schreiben.

Schlecht:

<p>Unsere Versandbedingungen findest du <a href="/versand">hier</a>.</p>

Gut:

<p>Lies unsere <a href="/versand">Versandbedingungen</a>.</p>

"Mehr erfahren" bei Produktkacheln eindeutig machen. Am einfachsten verlinkst du den Produktnamen selbst. Wenn der Button "Details" bleiben soll, ergänze unsichtbaren Text, sodass der sichtbare Text am Anfang steht:

<article>
  <h3><a href="/produkt/espresso">Espresso Hausmischung</a></h3>
  <p>Kräftig, mit Schokoladennote.</p>
  <a href="/produkt/espresso">
    Details<span class="visuell-versteckt"> zu Espresso Hausmischung</span>
  </a>
</article>

.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

Der versteckte Text steht nach dem sichtbaren Wort. So funktioniert auch Sprachsteuerung mit "Klicke Details" weiter.

Links mit Bild oder Icon benennen. Ist ein Bild der einzige Inhalt eines Links, beschreibt sein Alt-Text das Ziel.

Schlecht:

<a href="https://www.instagram.com/meinshop">
  <svg viewBox="0 0 24 24"><path d="..."/></svg>
</a>

Gut:

<a href="https://www.instagram.com/meinshop">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="..."/></svg>
  <span class="visuell-versteckt">Mein Shop auf Instagram</span>
</a>

Bild und Text im selben Link nicht doppeln. Steht neben dem Produktbild im selben Link schon der Produktname, bekommt das Bild alt="". Sonst wird der Name zweimal vorgelesen.
```
<a href="/produkt/espresso">
  <img src="espresso.jpg" alt="">
  Espresso Hausmischung
</a>
```
Gleiche Texte, gleiche Ziele. Zwei Links mit dem Text "Versand" sollten zum selben Ziel führen. Unterschiedliche Ziele bekommen unterschiedliche Texte.
Besonderheiten ankündigen. Öffnet ein Link ein PDF oder einen neuen Tab, schreib das in den Linktext, etwa "Größentabelle (PDF)" oder "Zahlungsanbieter (öffnet neuen Tab)".
Keine nackten URLs als Linktext, wenn sich ein sprechender Text anbietet. Eine lange URL wird Zeichen für Zeichen vorgelesen.

So prüfst du es

Linkliste ansehen: In NVDA drückst du Einfügen + F7 und wählst "Links". In VoiceOver öffnest du mit VO + U den Rotor und wählst "Links". Ist jeder Link aus der Liste heraus verständlich?
Tastatur: Springe mit Tab durch die Seite und lies nur die Linktexte. Weißt du bei jedem, wohin er führt?
axe DevTools: Die Regel link-name findet Links ohne zugänglichen Namen, etwa reine Icon-Links. Ob ein Text wie "mehr" verständlich ist, prüft das Tool nicht.
WAVE-Erweiterung meldet leere Links und markiert verdächtige Texte wie "click here" als Warnung.
Browser-Devtools: Im Bereich "Accessibility" siehst du den berechneten Namen jedes Links. Bei Icon-Links sollte dort ein sinnvoller Text stehen.

Aussagekräftige Linktexte schreiben

Worum es geht

Wen es betrifft

So behebst du es

So prüfst du es

Mehr dazu