Link Text Accessibility
Sichtbarer Text und Name gehören zusammen
Linkliste, Sprachbefehl, Vorleseansage: drei Wege zum selben Linktext.
Der Kontext-Test
Bleibt der Link übrig?
Blenden Sie den Absatz aus. Der Linktext soll sein Ziel weiter verraten.
Öffnungszeiten
Wann die Werkstatt geöffnet ist und wann die Annahme schließt.
MehrAnfahrt
Route, Parkplätze und der stufenlose Zugang zum Gebäude.
MehrPreise
Leistungen und Richtwerte für die häufigsten Reparaturen.
MehrÜbrig bleibt
- MehrZiel?
- MehrZiel?
- MehrZiel?
Die drei Namen sind gleich, die Ziele verschieden.
Mehr→Öffnungszeiten der Werkstatt
Mehr→Anfahrt und stufenloser Zugang
Mehr→Preise für Reparaturen
Nach der Überarbeitung
- Öffnungszeiten der WerkstattÖffnungszeiten
- Anfahrt und stufenloser ZugangAnfahrt
- Preise für ReparaturenPreise
Jeder Name trägt sein Ziel auch ohne den Teaser.
WCAG 2.4.4 · Stufe A
Zweck im Zusammenhang
Der Zweck darf aus dem Linktext oder aus seinem programmatisch bestimmbaren Kontext hervorgehen. Dazu zählen etwa derselbe Satz, Absatz, Listeneintrag oder Tabellenzelle.
WCAG 2.4.9 · Stufe AAA
Zweck aus dem Link allein
Die strengere Anforderung verlangt den erkennbaren Zweck aus dem Linktext allein. Als redaktioneller Standard macht das Linklisten und Tab-Navigation verständlicher.
Sichtbar
Im Code
Gesprochen
Kontakt aufnehmen
<a href="/kontakt">…</a>„Kontakt aufnehmen, Link“Sprachbefehl trifft
Kontakt aufnehmen
aria-label="Formular öffnen"„Formular öffnen, Link“Sichtbare Wörter fehlen im Namen
Der Name enthält die sichtbaren Wörter
Ein aria-label überschreibt den Text im Link. Wenn Sie es brauchen, beginnen Sie den Namen mit dem sichtbaren Wortlaut. Oft ist kein zusätzliches Attribut nötig.
Sechs kurze Übersetzungen
Hier klickenAntrag als PDF öffnen
DownloadJahresbericht herunterladen
WeiterlesenWeiterlesen: Prüfbericht 2026
DetailsDetails zum Wartungsvertrag
KontaktKontakt zur Pressestelle
Seite 2Seite 2 der Suchergebnisse
Direkter Text ist die robuste Basis
Beschreiben Sie das Ziel im Link. Ein Symbol im selben Link ist dekorativ, wenn der Text die Funktion bereits nennt.
<a href="/oeffnungszeiten">
Öffnungszeiten der Werkstatt
</a>
<a href="/suche" aria-label="Zur Suche">
<svg aria-hidden="true">
<use href="#icon-suche"></use>
</svg>
</a>
<a href="/bericht"
aria-label="Weiterlesen: Prüfbericht 2026">
Weiterlesen
</a>So prüfen Sie es
- Links isolieren. Lassen Sie sich im Browser oder Vorleseprogramm die Linkliste anzeigen.
- Ziele vergleichen. Gleiche Namen dürfen nicht unbemerkt zu verschiedenen Zielen führen.
- Namen berechnen. Prüfen Sie im Accessibility-Tree, ob
aria-labelsichtbaren Text ersetzt. - Wörter sprechen. Testen Sie mit Sprachsteuerung genau den sichtbaren Linktext.
Quellen und Vertiefung
- W3C: Linkzweck im Zusammenhang WCAG 2.4.4, Kontext und Linklisten
- W3C: Linkzweck aus dem Link allein WCAG 2.4.9 und die stärkere Einzeltext-Probe
- W3C: Sichtbare Beschriftung im Namen WCAG 2.5.3 für Spracheingabe
Aus dem Prüfbericht
Zwei Befunde am Linktext
Kritisch Links ohne Text in der Linkliste Regel link-name
Ein Symbol-Link oder ein leeres a nennt kein Ziel. Sichtbarer Text oder ein aria-label geben dem Link seinen Namen.
Kritisch Der Name sagt etwas anderes als der Text Regel label-content-name-mismatch
Ein aria-label überschreibt den sichtbaren Linktext. Wer den Link per Sprache anspricht, scheitert am abweichenden Namen.
Zum Mitnehmen
Die Linktexte, korrigiert
Ein Text, der für sich steht, und ein Name, der ihn enthält.
Korrektur in 3 Schritten ansehen
Das Wort „mehr“ durch das Ziel ersetzen
Der Linktext nennt, wohin er führt. Auch aus der Liste gerissen bleibt er dann verständlich.
KorrekturvergleichSchritt 1 · HTML Vorher
<h3>Barrierefreiheit</h3> <p>Was wir prüfen und beheben. <a href="/barrierefreiheit">mehr</a></p>Nachher
<h3>Barrierefreiheit</h3> <p>Was wir prüfen und beheben. <a href="/barrierefreiheit">Leistungen zur Barrierefreiheit</a></p>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie nur die Linktexte. Jeder nennt sein Ziel ohne den Satz davor.
Den Namen an den sichtbaren Text angleichen
Enthält der Name den sichtbaren Wortlaut, treffen Sprachbefehl und Ansage dasselbe Ziel. Am einfachsten entfällt das aria-label.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/kontakt" aria-label="Formular aufrufen">Kontakt aufnehmen</a>Nachher
<a href="/kontakt">Kontakt aufnehmen</a>Markierte Zeilen wurden geändert
So prüfen Sie es Sagen Sie „Kontakt aufnehmen“ zur Sprachsteuerung. Der richtige Link wird ausgelöst.
Symbol-Links nach dem Ziel benennen
Ein Link aus reinem Symbol braucht ein aria-label. Der Name benennt das Ziel, nicht die Form des Symbols.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/suche"> <svg aria-hidden="true"><use href="#icon-lupe"></use></svg> </a>Nachher
<a href="/suche" aria-label="Zur Suche"> <svg aria-hidden="true"><use href="#icon-lupe"></use></svg> </a>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf die Lupe. Ein Vorleseprogramm sagt „Zur Suche, Link“.