Linktexte: Warum "hier klicken" schadet und was besser ist

Warum das wichtig ist

Viele Screenreader-Nutzer lesen eine Seite nicht von oben nach unten. Sie lassen sich eine Liste aller Links anzeigen und springen direkt zum passenden, in NVDA mit NVDA+F7, bei VoiceOver auf dem Mac über den Rotor (VO+U). Steht in dieser Liste fünfmal "mehr", dreimal "hier" und einmal nur "Link", kann damit niemand etwas anfangen.

Noch schlimmer sind leere Links: ein Instagram-Symbol, ein Pfeil, ein verlinktes Logo ohne Alt-Text. Der Screenreader sagt "Link" und im besten Fall die Adresse. Wer per Sprache steuert, kann solche Links nicht ansagen, weil sie keinen Namen haben.

In den WCAG ist das Erfolgskriterium 2.4.4 Linkzweck (im Kontext) zuständig, Stufe A. Es erlaubt, dass sich der Zweck aus dem umgebenden Satz ergibt. Wir halten es trotzdem strenger: Ein Link, der allein verständlich ist, funktioniert für alle, auch für Google. Die Suchmaschine nutzt Linktexte, um zu verstehen, worum es auf der Zielseite geht. Mehr dazu im Ratgeber zu internen Links.

So prüfst du es selbst

Schalte NVDA oder VoiceOver ein und öffne die Linkliste deiner Startseite. Lies sie wie ein Inhaltsverzeichnis. Jeder Eintrag, bei dem du nicht weißt, wohin er führt, ist ein Kandidat.

Ohne Screenreader helfen WAVE und axe DevTools. Beide melden leere Links als Fehler. Allerweltstexte findest du, wenn du die Seite einmal bewusst nur nach Links überfliegst und den Rest ausblendest.

checkfrei sucht automatisch nach Links ohne erkennbaren Text und nach Links mit Allerweltstexten wie "hier" oder "mehr". Leere Links sind ein Fehler, Allerweltstexte eine Warnung. Probier es mit dem kostenlosen Check aus.

So schreibst du gute Linktexte

• ·Das Ziel in den Link packen: "Unsere Öffnungszeiten" statt "Öffnungszeiten finden Sie hier".
• ·Bei Dateien Format und Größe nennen: "Speisekarte (PDF, 2 MB)". Dann weiß jeder vorher, dass gleich ein Download startet.
• ·Gleicher Text, gleiches Ziel. Zwei Links mit dem Text "Details", die auf verschiedene Seiten führen, verwirren.
• ·Keine nackten URLs als Linktext. Ein Screenreader buchstabiert lange Adressen oft mühsam Zeichen für Zeichen.

So behebst du es

<!-- Schlecht -->
<a href="/preise">Hier</a> findest du unsere Preise.

<!-- Gut -->
Alle Pakete stehen in der <a href="/preise">Preisübersicht</a>.

<!-- Symbol-Link mit unsichtbarem Namen -->
<a href="https://www.instagram.com/beispiel" aria-label="Instagram">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

<!-- "Weiterlesen" mit verstecktem Zusatz -->
<a href="/blog/kontraste">Weiterlesen<span class="visually-hidden"> über Farbkontraste</span></a>

add_filter( 'excerpt_more', function () {
    return ' <a href="' . esc_url( get_permalink() ) . '">Weiterlesen<span class="screen-reader-text"> über ' . esc_html( get_the_title() ) . '</span></a>';
} );