Barrierefreie Links

Dieser Text kann auch als PDF Datei heruntergeladen werden.

Habt ihr schon einmal auf einer Webseite nur "Hier klicken" als Linktext gesehen und euch gefragt, wohin der Link führt? Solche vage formulierten Links können für viele Nutzende zum Stolperstein werden. Wir zeigen euch, warum aussagekräftige Linktexte wichtig sind und wie ihr Links in Webseiten und Dokumenten so gestaltet, dass diese für alle zugänglich sind!

Barrierefreie Links helfen Menschen mit unterschiedlichen Einschränkungen sowie allen anderen Nutzenden, sich besser in digitalen Inhalten zurechtzufinden. Sehbeeinträchtigte Menschen nutzen oft Linklisten und springen oft von Link zu Link (um sich eine Übersicht über die Inhalte der Seite zu verschaffen), der Screenreader liest dann nur die Linktexte vor. Deshalb muss der Linktext deutlich machen, worum es bei dem Link geht und wohin er führt. Ist der Zweck eines Links allein am Linktext erkennbar, können sehbeeinträchtigte Nutzende sofort entscheiden, ob sie diesem folgen möchten. Das WCAG- Erfolgskriterium 2.4.4 („Linkzweck im Kontext“) fordert genau dies: Der Zweck jedes Links soll aus dem Linktext (ggf. mit dessen unmittelbarem Kontext) hervorgehen.

Auch Menschen mit motorischen Beeinträchtigungen profitieren: Sie navigieren häufig per Tastatur durch Webseiten. Für sie ist es wichtig zu sehen, welcher Link gerade fokussiert ist. Daher sollten Links beim Fokus visuell hervorgehoben sein (z. B. durch Unterstreichung oder farbliche Umkehr). Wichtig: Farbe allein darf nie das einzige Erkennungsmerkmal für einen Link sein. Personen mit Farbsehschwäche könnten rein farbige Hervorhebungen übersehen, daher sollte immer auch eine Unterstreichung oder ein Symbol als Hinweis auf Links dienen. Kurzum: Barrierefreie Links sind keine exotische Kür, sondern nützen allen, sie verbessern Orientierung, Verständlichkeit und Benutzerfreundlichkeit für die gesamte Zielgruppe.

Der Schlüssel zu barrierefreien Links liegt im Linktext. Ein guter Linktext ist sprechend und selbsterklärend, er beschreibt, was einem nach dem Klick erwartet. Vermeidet generische Formulierungen wie „Hier klicken“, „Mehr“, „Weiter“ oder lange URLs. Solche Begriffe sind für sich genommen nicht aussagekräftig und verwirren Nutzende, insbesondere wenn mehrere gleichlautende Links auf einer Seite vorkommen. Besser ist es, den Linktext so zu formulieren, dass Zweck oder Ziel des Links klar werden.

Stellt euch vor, ein Screenreader liest eurem Publikum nur die Linktexte eurer Seite vor, würde man daraus den Inhalt und das Ziel der Links verstehen? Wenn nicht, überarbeitet die Texte. Idealerweise kann der Linktext im Kontext gelesen werden, ist aber auch allein verständlich.

Zum Beispiel statt „Hier klicken für den Bericht“ lieber „Bericht 2024 als PDF herunterladen“, so weiß jeder sofort, was ihn erwartet. Einheitlichkeit hilft ebenfalls: Verlinkt die Kontaktseite immer mit demselben Linktext „Kontakt“, anstatt mal „Kontakt“, mal „Schreiben Sie uns“ zu schreiben.

Wenn auf Dateien wie PDF oder Word verlinkt wird, erwähnt das Format direkt im Linktext. Nutzende sollten vorab wissen, dass sie beispielsweise ein PDF öffnen, da hierfür möglicherweise ein anderes Programm oder Plugin benötigt wird. Schreit also „Antragsformular (PDF)“ anstatt nur „Antragsformular“. So werden Überraschungen verhindert, Nutzende sind nicht irritiert, wenn plötzlich PDF-Funktionen statt der gewohnten Browser-Funktionen erscheinen.

Auf Webseiten werden Links mit dem <a>-Element erstellt. Achtet darauf, den Linktext sinnvoll zu wählen und das Markup korrekt einzusetzen. Ein einfacher HTML-Link mit gutem Linktext könnte so aussehen:

<a href="bericht2024.pdf">Bericht 2024 (PDF, 2 MB)</a>

In diesem Beispiel ist „Bericht 2024 (PDF, 2 MB)“ der aussagekräftige Linktext, der sowohl den Inhalt (Bericht 2024) als auch das Dateiformat PDF angibt. Nutzende wissen damit genau, was sie erwartet. Verzichtet darauf, den Linktext als leeren Platzhalter zu lassen.

Wenn Symbole oder Icons verwendet werden (PDF-Icon vor dem Linktext), verseht diese mit einem Alternativtext, der das Format angibt (etwa alt="PDF" beim Icon). Alternativ kann auch ein title-Attribut am Link zusätzliche Hinweise geben (title="öffnet als PDF-Datei"), jedoch sollte der Hauptlinktext bereits ausreichend informieren. Verzichtet bei der Umsetzung auf Doppelungen, sollte ein Icon verwendet werden und die Angabe des Dateiformats steht im Linktext oder title Attribut, muss das Icon als dekorativ gekennzeichnet werden.

Bei verlinkten Bildern ist der alt-Text entscheidend. Dieser sollte sowohl den Inhalt des Bildes als auch das Linkziel enthalten. Beispiel: Ein verlinktes Behördenlogo könnte alt="Logo der Stadt Musterhausen – zur Website der Stadt Musterhausen" haben. So erfassen Screenreader-Nutzende sofort, wohin der Klick auf das Logo führt.

Und nicht zuletzt: Stellt sicher, dass alle Links per Tastatur erreichbar sind. In HTML heißt das, verwendet echte <a>-Elemente (oder Schaltflächen für Aktionen), denn diese sind von Natur aus per Tab-Taste fokussierbar. Prüft eure Webseite, indem ihr wiederholt die Tabulatortaste drückt:

• Erreicht der Fokus jeden Link der Seite in sinnvoller Reihenfolge?
• Ist der fokussierte Link immer visuell erkennbar (Durch Unterstreichung oder Rahmen) und nicht verdeckt?

Nur bedienbare Links sind barrierefreie Links.

Barrierefreie Links sind nicht nur im Web wichtig, sondern auch in PDF- und Word-Dokumenten. PDF-Dateien werden oft aus Word heraus erstellt, hier gilt:

Was in Word falsch läuft, wird im PDF nicht besser.

Nutzt daher in Word konsequent die Hyperlink-Funktion, anstatt einfach nur URLs ins Dokument zu schreiben. Markiert den beschreibenden Text und fügt dann über Einfügen → Link den Hyperlink ein. So wird sichergestellt, dass im PDF später ein richtig getaggter Link mit sinnvoller Beschriftung vorhanden ist.

Der Linktext im Dokument sollte ebenso aussagekräftig sein wie im Web: also keine nackten URLs wie http://... im Fließtext, und keine Platzhaltertexte wie „hier“. Schreibt statt https://www.mustermann.de/barrierefreiheit lieber „Webauftritt der Muster-Behörde zur Barrierefreiheit“ und hinterlegt den Hyperlink. Das sieht nicht nur sauber aus, sondern verhindert, dass Screenreader jeden einzelnen Buchstaben einer URL vorlesen, was sehr mühsam sein kann. Ein klarer Linktext umgeht dieses Problem.

Eine angemessene optische Gestaltung von Links ist ein zentraler Baustein barrierefreier digitaler Inhalte. Die optische Gestaltung betrifft Farbe, Kontrast, Struktur und Fokus-Indikatoren und orientiert sich an anerkannten Richtlinien wie den Web Content Accessibility Guidelines (WCAG).

Barrierefreie Links müssen sich klar vom umgebenden Text abheben. Die bloße Unterscheidung durch Farbe reicht nicht aus, wenn sie das einzige visuelle Merkmal ist, denn nicht alle Menschen können Farbunterschiede zuverlässig wahrnehmen. Neben der Farbe braucht es zusätzliche visuelle Hinweise wie Unterstreichung oder andere Markierungen, um den Link visuell zu kennzeichnen.

Für die Lesbarkeit von Linktexten sind Farbkontraste zwischen Text und Hintergrund, aber auch im Vergleich zum umgebenden Text relevant. Die WCAG definieren Mindestkontrastwerte, die für gut lesbaren Text einzuhalten sind: Normaler Text sollte einen Kontrast von mindestens 4,5:1 gegenüber dem Hintergrund haben. Größere oder stärker gewichtete Texte (z. B. ≥18 pt oder ≥14 pt fett) benötigen einen Kontrastwert von mindestens 3:1.

Ein Link muss auch bei Tastaturfokus klar erkennbar sein. Das heißt, wenn Nutzende per Tabulator durch Links navigieren, muss jederzeit klar erkennbar sein, welche Komponente den aktuellen Fokus hat. Der Fokus-Indikator sollte dabei so gestaltet werden, dass er sichtbar und gut erkennbar ist, etwa durch einen deutlich hervorgehobenen Rahmen oder eine kontrastreiche Hervorhebung um den Linktext bzw. das Element.

Das visuelle Erscheinungsbild von Links sollte innerhalb eines Angebots konsistent sein. Einheitliche Farben, Unterstreichungen und Fokusstile erleichtern allen Nutzenden die Orientierung.

Zum Abschluss ein paar konkrete Beispiele, die zeigen, wie man Linktexte verbessern kann:

Schlechtes Beispiel: „Hier klicken für mehr Infos“ – Dieser Linktext ist isoliert betrachtet nichtssagend. Nutzer wissen nicht, welche Info sie erwartet. Besser: „Mehr Infos zur Barrierefreiheit im Web“ – Der Zweck des Links wird klar (führt zu Informationen über Web-Barrierefreiheit).

Schlechtes Beispiel: „Download“ (als einziger Linktext neben einem Dateisymbol) – Hier fehlt die Angabe, was heruntergeladen wird. Besser: „Leitfaden Barrierefreie PDFs herunterladen (PDF, 1 MB)“ – Der Link nennt den Dokumenttitel und das Format, so wissen alle Bescheid

Schlechtes Beispiel: Eine Liste voller unbeschrifteter URLs: „https://www.beispiel.de/a/12345“ … – Für Sehende unübersichtlich und für Screenreader-Nutzende extrem mühsam, da jeder Buchstabe einzeln vorgelesen wird. Besser: Eine Liste mit klaren Textlinks: „Online-Antrag auf Wohngeld stellen“, „Informationen zum Familienbonus“ etc. – Aussagekräftig und verständlich vorlesbar.

Diese Beispiele verdeutlichen: Klartext im Link macht den Unterschied zwischen Verwirrung und Bedienbarkeit.

• Linkzweck erkennbar: Jeder Linktext beschreibt klar, wohin der Link führt („Leitfaden Barrierefreiheit (PDF)“ statt „Hier klicken“).
• Keine doppelten Linktexte: Mehrere Links mit demselben Text führen auch wirklich zum selben Ziel. Wenn nicht, müssen sie unterschiedlich heißen.
• Keine reinen URLs im Fließtext: Links bestehen aus lesbarem, beschreibendem Text, nicht aus „https://…“-Adressen.
• Dateiformat und Größe genannt: Bei Downloads steht das Format („PDF“, „DOCX“) und möglichst auch die Dateigröße im Linktext.
• Konsistente Benennung: Gleichartige Ziele heißen überall gleich – z. B. immer „Kontaktformular“ und nicht mal „Kontaktseite“, mal „Kontakt aufnehmen“.

• Echte a-Elemente verwendet: Keine Pseudo-Links mit JavaScript oder div role="link".
• Sprechender Linktext: Im Code steht: <a href="bericht2024pdf">Bericht 2024 (PDF, 2 MB);/a>
• Fokus sichtbar: Beim Tabben durch die Seite ist immer klar erkennbar, welcher Link gerade aktiv ist.
• Keine Farbe allein: Links sind zusätzlich unterstrichen oder auf andere Weise gekennzeichnet, nicht nur farblich.
• Gute Erkennbarkeit: Links werden konsistent auf der gesamten Website mit gutem Kontrast präsentiert.
• Bild-Links haben Alt-Text: Das Alt-Attribut enthält sowohl den Bildinhalt als auch das Linkziel ( alt="Logo der Stadt – zur Startseite").

• Hyperlink-Funktion genutzt: Links werden über „Einfügen → Link“ erstellt, nicht als reine URL getippt.
• Aussagekräftiger Text: Statt „www.bfit-bund.de“ lieber „Website der BFIT-Bund“ als Linktext verwenden.
• QuickInfo (ScreenTip) gesetzt: Kurzer Hinweis zum Linkziel („Öffnet in neuem Fenster“) kann ergänzend angegeben werden.
• Struktur-Tags im PDF enthalten: Beim Export auf „Dokumentstruktur-Tags für Barrierefreiheit“ achten.

• Tab-Test bestanden: Alle Links sind per Tastatur erreichbar und der Fokus ist klar erkennbar.
• Screenreader-Test: Beim Vorlesen der „Linkliste“ sind alle Links verständlich (kein mehrfaches „Hier klicken“).
• Kontext verständlich: Würde der Linktext auch ohne umgebenden Text Sinn ergeben? Wenn ja → gut gemacht.

• BIK-BITV-Test: WCAG 2.1, Erfolgskriterium 2.4.4 „Linkzweck (im Kontext)
• Bundesfachstelle Barrierefreiheit: Fachwissen IT

Informationen zu diesem Artikel

Verfasst von:

Team BFIT

Datum:

18.02.2026

Lizenz:

CC-BY-SA 4.0

Version:

1.0

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!