Was gute Linktexte ausmacht

So funktioniert es

Screenreader lesen Links nicht nur im Fließtext vor. Viele Nutzer lassen sich eine Liste aller Links einer Seite zeigen oder springen per Tabulator von Link zu Link. Dann hören sie nur den Linktext, ohne den Satz davor.

In dieser Liste hilft „Mehr“ zehnmal hintereinander niemandem, und ein Link, der nur aus einem Icon besteht, heißt schlicht „Link“. Was der Screenreader ansagt, ist der zugängliche Name des Links: sein Text, der Alternativtext eines Bildes darin, ein aria-label oder der Text, auf den aria-labelledby verweist.

WCAG 2.2 verlangt in Kriterium 2.4.4, dass der Zweck eines Links aus seinem Text oder seinem direkten Zusammenhang hervorgeht, und in 4.1.2, dass jeder Link einen Namen hat.

Worauf es ankommt

• Jeder Link hat einen Namen. Ein Icon-Link, etwa zu Instagram, bekommt ein aria-label oder einen versteckten Text; das Icon selbst aria-hidden="true". Ein Bild als Link braucht einen Alternativtext, der das Ziel nennt.
• Das Ziel steht im Link. „Preise ansehen“ statt „hier klicken“, „Ratgeber zur Anmeldung“ statt „weiterlesen“.
• Gleicher Text, gleiches Ziel. Führen mehrere Links mit „Mehr erfahren“ zu verschiedenen Seiten, sind sie in der Linkliste nicht zu unterscheiden. Führen sie alle zur selben Seite, ist das kein Problem.
• aria-label enthält den sichtbaren Text. Bleibt der sichtbare Text kurz, ergänzt ein aria-label das Thema. Es sollte mit dem sichtbaren Text beginnen, damit Sprachsteuerung den Link findet (Kriterium 2.5.3): sichtbar „Mehr“, Name „Mehr über Tarife“.

<a href="/tarife" aria-label="Mehr über Tarife">Mehr</a>

<a href="https://instagram.com/beispiel" aria-label="Beispiel GmbH auf Instagram">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

• Keine nackten Adressen. Eine lange URL als Linktext wird Zeichen für Zeichen vorgelesen.

So richtest du es ein

Linktexte im Inhalt änderst du im Editor deines CMS: Markiere die Wörter, die das Ziel beschreiben, und setze den Link dort statt auf „hier“. Teaser-Kacheln mit „Weiterlesen“ und Icon-Links in Kopf und Fuß kommen aus dem Theme oder einem Plugin; dort ergänzt, wer das Theme pflegt, das aria-label, oft mit dem Titel des Beitrags als Platzhalter.