Textlinks sind ein wichtiger Bestandteil jeder Website. Sie ermöglichen es Nutzern, von einer Seite zur anderen zu navigieren und weitere Informationen zu erhalten. Für Menschen mit Beeinträchtigung ist es dabei besonders wichtig, dass Textlinks möglichst barrierefrei sind.
Insbesondere für blinde Menschen, die einen Screenreader (Bildschirmleseprogramm) nutzen, ist es wichtig, dass ein Link aussagekräftig ist. Denn oft verwenden Screenreader-Nutzer eine Liste der Links auf einer Seite zur Navigation. Und das funktioniert nur, wenn die Links auch ohne Kontext verständlich sind.
Aber was ist nun ein barrierefreier Textlink? Das klären wir im nächsten Abschnitt.
Was ist ein barrierefreier Textlink?
Ein barrierefreier Textlink ist ein Link, der von allen Nutzern, unabhängig von ihren Beeinträchtigungen, leicht erkannt und verstanden werden kann. Dazu muss der Link folgende Kriterien erfüllen:
- Die Link-Beschriftung muss eindeutig und informativ sein. Sie sollte dem Nutzer einen Hinweis darauf geben, wohin der Link führt. Zum Beispiel:
- „Zum Hauptmenü“
- „Weitere Informationen“
- „Bild vergrößern“
- Die Link-Beschriftung muss einen ausreichenden Kontrast zum Hintergrund aufweisen. Dies ist wichtig für Nutzer mit Sehbehinderungen. Der Kontrast sollte mindestens 4,5:1 betragen.
- Der Link muss sich vom umgebenden Text abheben. Dies kann durch eine andere Schriftart, Farbe oder Formatierung (z.B. Fettschrift) erreicht werden. Allerdings sollten dabei möglichst zwei Arten der Markierung verwendet werden (z.B. Farbe und Unterstreichung), da es zum Beispiel Menschen gibt, die Schwierigkeiten haben, Farben zu erkennen oder zu unterscheiden.
Von einem möglichst barrierefreien Textlink profitieren aber alle Nutzer, denn sie sind in der Regel besser zu erkennen und schneller zu verstehen. Ein barrierefreier Linktext erhöht die Benutzerfreundlichkeit (Usability) deiner Website.
Beispiele für Textlinks auf unserer Website
Beispiele für barrierefreie Textlinks findest du auf unserer Website. So haben wir ursprünglich oft mit der Bezeichnung Mehr erfahren gearbeitet und diese in unserer Website angepasst. Zum Beispiel bei der Übersicht zu unserer Erfolgsfaktoren bzw. Schwerpunkten (siehe Abbildung 1). Der Textlink beschreibt dabei, zu welchem vertiefenden Schwerpunkt der Link führt.
In diesem Beispiel würde sich das Linkziel auch aus dem Kontext ergeben. Es wäre also auch der Linktext Mehr erfahren ok. Da aber Screenreader-Nutzer oft eine Linkliste zur Navigation nutzen, können sie so diese Linktexte auch ohne Kontext verstehen.
Vor eine technische Herausforderung hat uns die Übersicht zu den Blogbeiträgen und Referenzprojekten gestellt. Schau dir folgend die Abbildung 2 an. Hier haben wir uns entschieden, den Linktext Mehr erfahren beizubehalten und haben für Screenreader-Nutzer ein ARIA-Label im Programmiercode ergänzt, das den Beitragstitel bereitstellt.
So haben wir diese Barrierefreiheits-Anforderungen auf unserer Website zurzeit gelöst.
Checkliste für einen barrierefreien Textlink
Hier kommt noch eine Checkliste für einen möglichst barrierefreien Link auf deiner Website:
- Eindeutiger und verständlicher Linktext: Der Link beschreibt klar das Ziel (z. B. „Mehr zu Barrierefreiheit lesen“ statt „Hier klicken“).
- Erkennbarkeit als Link: Links sind visuell unterscheidbar, z. B. durch Unterstreichung oder eine andere klare Markierung.
- Ausreichender Farbkontrast: Der Linktext hebt sich mit einem Kontrast von mindestens 4,5:1 vom Hintergrund ab.
- Nicht nur Farbe als Hinweis: Weitere visuelle Merkmale wie Unterstreichung oder Fettdruck sorgen für eine klare Abgrenzung vom normalen Text.
- Tastaturzugänglichkeit: Der Link ist mit der Tab-Taste erreichbar und klar fokussierbar (z. B. durch eine Hervorhebung beim Fokussieren).
- Sinnvolle Zielangaben in ARIA und HTML: Falls nötig, ergänzen
aria-labelodertitleweitere Kontextinformationen für Screenreader.
Du hast Fragen rund um eine barrierefreie Website? Dann vereinbare eine kostenfreie Beratung mit uns.
