Linktexte: „Hier klicken" ist keine Information

Es gibt einen Test, der die Qualität deiner Linktexte in zehn Sekunden zeigt. Ein Screenreader kann sich alle Links einer Seite als Liste ausgeben lassen — losgelöst vom umgebenden Text. In NVDA ist das die Tastenkombination NVDA-Taste + F7.

Was dabei häufig herauskommt, ist eine Liste wie diese:

Mehr erfahren
Mehr erfahren
Hier klicken
Weiterlesen
Mehr erfahren
Details
Weiterlesen

Das ist keine Navigationshilfe, das ist Rauschen. Und es ist der Zustand, in dem sich die Linktexte der meisten Websites befinden.

Worum es geht

Ein Link soll aus sich heraus verständlich sein. Wer ihn liest, soll wissen, wohin er führt — ohne den umgebenden Absatz, ohne die Überschrift darüber, ohne das Bild daneben.

Das ist die Anforderung aus Erfolgskriterium 2.4.4 „Linkzweck (im Kontext)", Stufe A: Der Zweck jedes Links muss aus dem Linktext allein oder aus Linktext plus Kontext bestimmbar sein.

Die strengere Fassung auf Stufe AAA (Kriterium 2.4.9) verlangt, dass der Zweck aus dem Linktext allein erkennbar ist. Das ist ein guter Maßstab für die Formulierung, auch wenn du AAA nicht anstrebst.

Wer davon profitiert:

• Screenreader-Nutzer, die sich per Linkliste durch eine Seite bewegen — eine gängige Arbeitsweise, weil sie schneller ist als lineares Vorlesen.
• Menschen mit kognitiven Einschränkungen, die anhand des Linktextes entscheiden, ob sie klicken.
• Nutzer von Spracheingabe, die einen Link mit seinem Namen aufrufen.
• Und alle anderen. Ein Mensch, der eine Seite überfliegt, liest zuerst die Links — sie sind farblich hervorgehoben und ziehen den Blick. Ein Link mit Inhalt ist auch für Sehende ein Wegweiser.

(Rheinwerk, Barrierefreie Webseiten, Kap. 8.1)

Was einen guten Linktext ausmacht

Konkret statt allgemein. Nicht „hier klicken", nicht „mehr erfahren", nicht „weiterlesen". Sondern: was dahinterliegt.

<!-- so nicht -->
<p>Wir haben unsere Preise überarbeitet. <a href="/preise">Hier klicken</a>.</p>

<!-- so -->
<p>Wir haben unsere Preise überarbeitet. <a href="/preise">Zur aktuellen Preisübersicht</a>.</p>

Bei Dateien: Format und Umfang nennen. Wer auf einen Link klickt und plötzlich einen Download startet, wurde überrascht. Ein Hinweis im Linktext oder direkt dahinter verhindert das: „Wartungsvertrag als PDF, 240 kB".

Gleicher Text, gleiches Ziel. Wenn zwei Links denselben Text tragen, aber woanders hinführen, ist das für den Nutzer der Linkliste nicht auflösbar. Umgekehrt gilt dasselbe: Zwei Links, die zum selben Ziel führen, sollten auch gleich heißen.

Kein „Link" im Linktext. Dass es ein Link ist, sagt der Screenreader ohnehin an. „Link zur Preisliste" wird dann zu „Link Link zur Preisliste".

Und die häufigste Nachbesserung im echten Leben: Auf Übersichtsseiten mit Kacheln steht unter jeder Kachel ein „Mehr erfahren". Statt fünfmal denselben Text zu setzen, mach die Überschrift der Kachel zum Link. Dann heißt der Link „Barrierefreiheitsprüfung" und nicht „Mehr erfahren", und du hast das Problem an der Wurzel gelöst statt kosmetisch.

Wie ein Link aussehen muss

Erfolgskriterium 1.4.1 „Benutzung von Farbe", Stufe A, gilt auch hier: Farbe darf nicht das einzige Mittel sein, um einen Link als Link zu erkennen.

Ein Link im Fließtext braucht also neben der Farbe ein zweites Signal. In der Praxis heißt das: Unterstreichung. Es gäbe Alternativen — Fettung, andere Schriftgröße, ein kleines Symbol dahinter — aber die Unterstreichung ist die einzige, die jeder Nutzer ohne Erklärung versteht.

Die Unterstreichung ist in den letzten Jahren aus Gestaltungsgründen häufig entfernt worden. Das ist der zweite große Fehler in diesem Bereich, gleich hinter „hier klicken". Wenn dich die Standard-Unterstreichung stört, gestalte sie:

.beitrag a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

Damit sitzt die Linie tiefer, ist dünner und schneidet nicht mehr durch die Unterlängen von g, j und p.

Ausnahme: In der Hauptnavigation, in Fußzeilen-Listen und bei Buttons braucht es keine Unterstreichung. Dort ist aus Position und Gestaltung klar, dass es sich um Bedienelemente handelt. Die Regel gilt für Links im Fließtext, wo sie sich von normalem Text unterscheiden müssen.

Ein weiterer Punkt zur Gestaltung: Die Formatierung muss auf der ganzen Website gleich sein. Wenn Links auf einer Seite blau und unterstrichen sind und auf einer anderen grün ohne Unterstreichung, hat jeder Besucher zweimal dieselbe Lernaufgabe.

Neue Fenster

Ein Link mit target="_blank" öffnet ein neues Fenster oder einen neuen Tab. Das sollte sparsam eingesetzt werden.

Was dagegen spricht:

• Der Zurück-Button funktioniert nicht mehr. Für viele Nutzer ist er der wichtigste Bedienknopf des Browsers.
• Es bleibt ein zusätzliches Fenster zurück, das jemand später schließen muss.
• Screenreader-Nutzer merken den Wechsel oft erst, wenn sie zurück wollen und es nicht geht.
• Auf dem Smartphone ist die Tab-Verwaltung für viele Nutzer eine echte Hürde.

Wenn du es doch tust — bei externen Quellen, bei Dokumenten, bei Formularen, die während eines laufenden Vorgangs geöffnet werden — dann kündige es an. Ein Hinweis im Linktext oder ein Symbol mit Alternativtext genügt: „Zur DIN-Norm (öffnet in neuem Fenster)".

Technisch gehört bei externen Links außerdem rel="noopener" dazu. Moderne Browser wenden dieses Verhalten mittlerweile von selbst an, aber die ausdrückliche Angabe schadet nicht und deckt die Fälle ab, in denen der Standard nicht greift.

Wenn Sichtbares und Vorgelesenes auseinanderlaufen

Erfolgskriterium 2.5.3 „Beschriftung im Namen", Stufe A, ist eines der Kriterien, die man erst versteht, wenn man an Spracheingabe denkt.

Ein Nutzer sagt „Klick Senden". Sein System sucht nach einem Element, dessen programmatischer Name „Senden" enthält. Steht auf dem Button sichtbar „Senden" und im Code auch, funktioniert das.

Der Fehler entsteht durch ein gut gemeintes aria-label:

<!-- falsch: sichtbar steht "Senden", vorgelesen wird "Formular absenden" -->
<button type="submit" aria-label="Formular absenden">Senden</button>

<!-- richtig -->
<button type="submit">Senden</button>

Im ersten Fall scheitert die Spracheingabe, weil „Senden" im programmatischen Namen nicht vorkommt.

Die Regel lautet: Der sichtbare Text muss im programmatischen Namen enthalten sein. Ein aria-label darf länger sein und mehr erklären — aber der sichtbare Text muss darin vorkommen. „Senden" darf zu „Senden — Anfrage abschicken" werden, nicht zu „Formular absenden".

Ein aria-label ist überhaupt nur dort nötig, wo es keinen sichtbaren Text gibt: bei Symbol-Buttons ohne Beschriftung etwa. Wo sichtbarer Text steht, ist es in den meisten Fällen überflüssig und richtet mehr Schaden an als Nutzen.

Navigation, die überall gleich ist

Zwei Kriterien der Stufe AA gehören zusammen:

3.2.3 „Konsistente Navigation". Wiederkehrende Navigationselemente müssen auf allen Seiten in derselben relativen Reihenfolge erscheinen. Das Menü bleibt an seiner Stelle, die Punkte bleiben in ihrer Reihenfolge, die Fußzeile ist überall gleich aufgebaut.

3.2.4 „Konsistente Bezeichnung". Elemente mit derselben Funktion müssen überall gleich heißen. Wenn der Bereich einmal „Mein Konto" heißt, heißt er nicht auf der nächsten Seite „Mein Bereich" und in der Fußzeile „Kundenkonto".

Das klingt selbstverständlich und ist es nicht. Es bricht regelmäßig auf, wenn eine Website über Jahre wächst und verschiedene Leute Inhalte anlegen.

Wer davon profitiert: alle, aber besonders Menschen mit kognitiven Einschränkungen, die auf wiederkehrende Muster angewiesen sind, und Screenreader-Nutzer, die sich eine Reihenfolge merken statt jedes Mal neu zu suchen.

Menüpunkte, die niemand versteht

Ein Punkt aus der Usability, der in dieselbe Kerbe schlägt: Menübeschriftungen müssen selbsterklärend sein.

Das Buchbeispiel ist gut: Ein Shop für Babyausstattung hat eine Kategorie „Unterwegs". Darin stecken Kinderwagen und Autositze. Für den Betreiber ist die Gruppierung logisch. Für den Kunden, der einen Kindersitz sucht, ist sie unsichtbar — er schaut unter „Unterwegs" nicht nach.

Die Konsequenz ist keine Barriere im rechtlichen Sinne, sondern schlicht ein verlorener Kunde.

Wer sich unsicher ist, wie Nutzer die eigenen Inhalte gruppieren würden, kann das mit Card Sorting herausfinden: Man schreibt alle Seiten auf Karten und lässt Leute aus der Zielgruppe sie zu Gruppen ordnen und benennen. Das dauert eine Stunde und liefert oft eine Menüstruktur, auf die man selbst nie gekommen wäre.

Praktisch für kleine Betriebe: Frag drei Kunden, unter welchem Menüpunkt sie eine bestimmte Information suchen würden. Nicht: „Findest du das gut?" Sondern: „Wo würdest du klicken, wenn du wissen willst, was eine Prüfung kostet?"

Sprungmarken auf langen Seiten

Bei langen Seiten helfen Sprunglinks — ein kleines Inhaltsverzeichnis oben, das zu den Abschnitten führt.

<h2 id="ablauf">Wie der Ablauf aussieht</h2>
...
<p><a href="#ablauf">Zum Ablauf</a></p>

Jedes Sprungziel braucht eine eindeutige id. Doppelte IDs auf einer Seite führen dazu, dass der Sprung ins Leere geht oder an der falschen Stelle landet — ein Fehler, der bei WordPress-Seiten mit wiederholt eingesetzten Bausteinen häufiger vorkommt, als man denkt.

Wie du das selbst prüfst

Die Linkliste. Der schnellste und aussagekräftigste Test. Mit NVDA: NVDA-Taste + F7. Wenn du keinen Screenreader nutzen willst, geht es auch anders — überflieg deine Seite und lies nur die hervorgehobenen Wörter. Ergibt das eine sinnvolle Liste?

Der Ausdruck-Test. Stell dir vor, jemand liest dir nur die Linktexte deiner Startseite vor, ohne alles andere. Würdest du wissen, was diese Website anbietet?

Die Unterstreichungs-Prüfung. Geh durch deine Fließtexte und schau, ob Links ohne Farbwahrnehmung erkennbar wären. Der Graustufenmodus in den Entwicklerwerkzeugen des Browsers zeigt das sofort.

Die Suche nach target="_blank". Zähl, wie viele Links auf deiner Website ein neues Fenster öffnen, und frag bei jedem: Warum eigentlich?

Die Menü-Frage an echte Leute. Kein Werkzeug, aber die wirksamste Prüfung von allen.

Was zu tun ist

Fang bei den Wiederholungen an. Alle „Mehr erfahren", „Weiterlesen", „Hier klicken" auf einer Liste sammeln und ersetzen. Wo es viele davon gibt, liegt es meist an einem Baustein, der überall eingesetzt wird — dann reicht eine Änderung an einer Stelle.

Mach Überschriften zu Links, statt Links unter Überschriften zu setzen. Löst das Problem strukturell.

Stell die Unterstreichung im Fließtext wieder her. Wenn sie stört, gestalte sie, statt sie zu entfernen.

Reduzier die neuen Fenster auf die Fälle, in denen es einen Grund gibt, und kündige diese an.

Räum überflüssige aria-label weg. Sie sind gut gemeint und brechen die Spracheingabe.

Und wenn du gerade ohnehin an der Struktur arbeitest: Die Menübenennung ist der Punkt mit dem größten Hebel auf Anfragen. Ein Menü, das die Sprache deiner Kunden spricht statt deiner eigenen, wirkt stärker als jede Suchmaschinenoptimierung an derselben Seite.

Quellen

• Rheinwerk, Barrierefreie Webseiten, Kap. 8.1 (Navigation) — WCAG 2.4.4 zum Linkzweck im Kontext und 2.4.9 auf Stufe AAA, die vier Aspekte guter Links (Linktext, Formatierung, Alternativtext bei Bildlinks, Tastaturbedienbarkeit), der Hinweis auf Dateiname und Format bei Downloads, die Anforderung an ein zweites visuelles Signal neben der Farbe, der zurückhaltende Umgang mit target="_blank" samt Begründung über den Zurück-Button und zusätzliche Fenster, WCAG 3.2.3 zur konsistenten Navigation und 3.2.4 zur konsistenten Bezeichnung mit dem „Mein Konto"-Beispiel, WCAG 2.5.3 „Beschriftung im Namen" mit dem aria-label-Fehlerbeispiel und der Auswirkung auf Spracheingabe, die eindeutige id bei Sprungmarken, das Menübeispiel „Unterwegs" aus dem Babyausstattungs-Shop, Card Sorting als Methode, und die NVDA-Linkliste über NVDA-Taste + F7.
• Rheinwerk, Barrierefreie Webseiten, Kap. 6.1 (Farbeinsatz) — WCAG 1.4.1, Farbe nie als einziges visuelles Mittel.
• Atlas, security/subresource-integrity.md — rel="noopener" und rel="noreferrer", das heutige Standardverhalten der Browser bei target="_blank" und der Grund, die Beziehung trotzdem anzugeben.
• Atlas, accessibility/criteria/2-4-4-link-purpose-in-context.md — Einordnung des Kriteriums nach Prinzip, Richtlinie und Konformitätsstufe.
• Eigene Prüfpraxis — die Empfehlung, Kacheln über ihre Überschrift zu verlinken statt über einen zusätzlichen Textlink, die Gestaltung der Unterstreichung über text-underline-offset statt ihrer Entfernung, die Abgrenzung zwischen Fließtextlinks und Navigationselementen, doppelte id-Werte bei wiederholt eingesetzten Bausteinen in WordPress, und die drei Prüffragen an echte Kunden zur Menübenennung.