Was ist überhaupt ein Link?

Im HTML werden Links mit dem <a>-Element ausgezeichnet. Dieses Element ist dafür gedacht, Ressourcen miteinander zu verknüpfen. Zum Beispiel, um Nutzer*innen auf eine andere Seite weiterzuleiten. Um Text in einen klick- und tastaturbedienbaren Link zu verwandeln, braucht das <a>-Element zusätzlich das href-Attribut. Dieses enthält das Ziel des Links, zum Beispiel eine andere Webseite.

Ein korrekter Link kann zum Beispiel so aussehen:

<a href=”https://Website.de/Produktübersicht”>Zur Produktübersicht</a>

Achte unbedingt darauf, dass deine Links technisch korrekt umgesetzt sind. Gerade bei der Unterscheidung zwischen Links und Buttons passieren in der Praxis häufig Fehler. In unserem Artikel Barrierefreiheit im Fokus: Button und Link im Vergleich erfährst du, warum das problematisch ist.

Links bestehen einfach nur aus Linktexten

Zuerst einmal schauen wir uns an, was du bei deinen Linktexten beachten musst.

Sichtbarkeit & Kontrast

Linktexte sind im Kern auch nur Texte und müssen sich an die Kontrastanforderungen für Text halten. Das heißt in den meisten Fällen: 4,5:1 zum Hintergrund.

Außerdem möchtest du, dass Leute deine Links klicken. Dafür müssen sich die Links vom umgebenden Fließtext unterscheiden. Am zuverlässigsten funktioniert das mit einer Unterstreichung. Falls der Unterstrich eine andere Farbe als der Linktext hat, muss er selbst mindestens einen Kontrast von 3:1 zum Hintergrund aufweisen.

Weniger offensichtlich, aber auch in Ordnung: Linktexte unterscheiden sich durch Farbe von der Umgebung. Farbe allein ist nie ausreichend, darum muss in diesem Fall immer ein zusätzliches Merkmal her, etwa Kontrast, sprich der Link hat zum Fließtext einen Kontrast von mindestens 3:1. Was das zusätzliche Merkmal angeht, kannst du frei wählen. Wichtig ist, dass du Unterscheidbarkeit gewährleistest: Wenn du mit Fettung arbeitest, achte darauf, dass du diese Gestaltung ausschließlich für Links verwendest und nicht auch normaler Text.

Verständlich beschriften

Links sollten so beschriftet sein, dass sofort klar wird, wohin sie führen. Linktexte wie „Startseite“, „Impressum“ oder „Datenschutz“ sind gute Namen. Du weißt sofort, was du bei diesem Link erwarten kannst. „Hier“, „Mehr erfahren“ oder „Details“ sind keine guten Linktexte, weil Kontext gebraucht wird, um das Ziel oder den Zweck des Links zu verstehen. 

Es ist nicht die beste User-Experience, aber nach der WCAG erlaubt, wenn der Zweck des Links aus dem unmittelbaren Kontext hervorgeht. Wichtig ist dann nur, dass der Zusammenhang im Code korrekt hinterlegt ist, damit Screenreader ihn erfassen können und die User verstehen, worüber sie mehr erfahren, wenn sie auf den Link klicken.

Kontext kann zum Beispiel sein:

• Eine Überschrift vor dem Link
• Ein Text im selben Paragraphen
• Der Text des Listenelements (wenn der Link Teil einer Liste ist)
• Der Inhalt der Tabellenzelle und zugehörige Spalten- oder Zeilenüberschriften (z. B. in td und th)
• Zusätzlicher Text, der über CSS versteckt wurde
• Der Alternativtext eines Bildes, das im selben Link-Element (<a>) enthalten ist
• Ein aria-label oder aria-labelledby

Mehr dazu findest du auch im Kriterium 2.2.4 Linktexte im Kontext.

Manchmal muss der sichtbare Linktext aus Platz- oder Designgründen kurz bleiben. Dann kannst du den Namen mit einem aria-label oder einem versteckten Text erweitern, der nur für Screenreader sichtbar ist.

Beispiel Erweiterung über aria-label:

<a href=”https://...” aria-label=”Mehr erfahren über Barrierefreiheit”>Mehr erfahren</a>

Beispiel Erweiterung über versteckten Text:

<a href=”https://...” aria-labelledby=”visible-lbl hidden-lbl”>
    <span id=”visible-lbl”>Mehr erfahren</span>
    <span id=”hidden-lbl” hidden>über Barrierefreiheit</span> 
</a>

So bleibt die Seite visuell übersichtlich und alle bekommen trotzdem die nötigen Informationen. Wichtig ist dabei: Die Erweiterung muss den sichtbaren Text beinhalten und soll ihn zusätzlich sinnvoll ergänzen.

PS: Best Practice ist es, den sichtbaren Text an den Anfang zu setzen und die Erweiterung hinten dranzuhängen.

Icons, die Teil eines Links sind und Informationen enthalten, die nicht im Linktext enthalten sind, müssen eine Alternative haben.

Zum Beispiel: Du hast einen Link, der aus einem PDF-Icon und dem Text „Eine Preisliste“ besteht. Die Formatinformation „PDF“ kommt im Linktext nicht vor. Darum ist das Icon der alleinige Informationsträger und du musst das Format so angeben, dass es jeder verstehen kann. Zum Beispiel, indem du den Linktext ergänzt: „Eine Preisliste (PDF)“.

Bilder sind als Links verwendet

Nicht immer ist ein Link nur ein Text, oft werden auch Bilder oder Icons als Link verwendet.

Sichtbarkeit & Kontrast

Bilder und Icons, die als Link dienen, sind zum Beispiel oft das Logo, das zur Startseite führt, oder ein Pfeilsymbol zum Weiterblättern. Wichtig ist: Verlinkte Grafiken müssen deutlich erkennbar sein und sich ausreichend vom Hintergrund abheben. Der Kontrast sollte dabei mindestens 3:1 betragen.

Zwar ist eine visuelle Veränderung bei Hover nicht verpflichtend, wir empfehlen sie aber trotzdem. So erkennen mehr Nutzer*innen, dass das Element anklickbar ist – etwa durch eine Schattierung, eine Umrandung oder eine Farbänderung.

Verständlich beschriften

Screenreader schauen nicht mit den Augen, darum müssen Bilder und Icons zusätzlich sinnvoll beschriftet sein. Im Idealfall kombinierst du Icons mit sichtbarem Text. Mehr über Icons erfährst du in unserem Artikel Barrierefreie Icons: Eine Anleitung für Designer*innen.

Bilder als <img>

Wenn du Bilder über ein <img>-Element anzeigst, kannst du das alt-Attribut verwenden. Der Inhalt des alt-Attributs sollte beschreiben, was auf dem Bild zu sehen ist und wohin der Link führt. Zum Beispiel: „Produktbild: Sneaker FlotterRoppelt, verlinkt zur Detailseite“. Mehr über Alt-Texte erfährst du in unserem Artikel: Alt-Texte: Deine Bilder für alle.

Andere Formate wie <svg>

Verwendest du andere HTML-Tags, wie das <svg>-Element, um beispielsweise einen Downloadpfeil oder ein Lupensymbol für eine Suchfunktion, anzuzeigen, brauchst du ebenfalls eine Textalternative. Hier bietet sich aria-label, aria-labelledby oder eine textuelle Beschreibung an, die über CSS visuell ausgeblendet wird.

Ein gutes Beispiel ist unser Logo mit folgender Alternative „Logo Gehirngerecht. Verlinkt zur Startseite”. Hier wird deutlich, dass es sich um ein Logo handelt, welches Logo genau gezeigt wird und dass ein Klick darauf zur Startseite führt.

Komplexe oder zusammengesetzte Link-Elemente (z. B. Cards)

Bei komplexeren Link-Elementen wie Cards – also klickbaren Boxen mit Bild, Überschrift und Text – ist entscheidend, welches Element tatsächlich verlinkt ist. Die Kontrastanforderungen für Texte und Bilder, die Links sind, gelten wie bereits beschrieben.
Am besten ist es, wenn du nur die Überschrift als Link verwendest und dafür einen klaren Linktext wählst. Über CSS-Tricks kannst du trotzdem die ganze Card klickbar machen. Im Artikel Barrierefreie Cards erstellen – Schritt-für-Schritt-Anleitung zeigen wir dir, wie das geht.

Auch ok, aber schlechter zu verstehen ist, wenn du die ganze Karte in ein <a>-Element schachtelst. Der Grund: Jeder Link braucht einen sogenannten accessible name, also eine Bezeichnung, die von Screenreadern vorgelesen wird. Wenn du zum Beispiel ein Bild mit Alt-Text verlinkst, wird genau dieser Text vorgelesen – der Link hat dann einen klaren Namen.
Wenn du aber die komplette Card verlinkst, wird dieser Name automatisch aus dem gesamten sichtbaren Inhalt erzeugt: also Bild + Überschrift + Text + was sonst noch so alles in deinen Karten auftaucht. Das kann schnell lang, unübersichtlich oder sogar verwirrend werden.

Unterstützung für Assistive Technologien

Jetzt, wo wir geklärt haben, was alles ein Link sein kann, noch ein kurzer Abstecher zu Hilfsmitteln wie Screenreadern und Tastaturbedienbarkeit.

Damit ein Link barrierefrei funktioniert, muss er korrekt mit dem <a>-Element und einem gültigen href-Attribut im Code angelegt sein. Nur so wird ein interaktives Element daraus, das von Screenreadern erkannt und auch mit der Tastatur bedient werden kann. Das heißt: Nutzer*innen können den Link mit der Tabulatortaste ansteuern und mit der Enter-Taste aktivieren.

Fehlt das href oder wird stattdessen ein anderes HTML-Element verwendet (z. B. ein gestyltes <div>), erkennen der Screenreader und die Tastatur den Inhalt nicht als Link – und viele Nutzende können ihn nicht bedienen.

Wichtig ist außerdem: Der Fokuszustand des Links sollte beim Navigieren mit der Tastatur gut sichtbar sein – etwa durch eine Umrandung. So sehen auch Tastaturnutzer*innen, wo sie sich gerade befinden. Mehr dazu im Kriterium 2.4.7 der WCAG: Fokus sichtbar

Zusammenfassung

• Links sollten immer mit dem <a>-Element und einem gültigen href-Attribut ausgezeichnet sein – nur dann sind sie barrierefrei bedienbar.
• Damit Linktexte erkennbar sind, brauchen sie eine klare visuelle Kennzeichnung – z. B. Unterstreichung, Farbe oder Fettung.
• Farbliche Linktexte brauchen genügend Kontrast zum Fließtext (3:1) und zum Hintergrund (4,5:1).
• Linktexte sollten so formuliert sein, dass ihr Zweck klar verständlich ist – idealerweise ohne zusätzliche Kontextinformationen.
• Auch Bilder und Icons dürfen als Links eingesetzt werden, müssen dann aber eine sinnvolle Textalternative haben.
• Komplexe Link-Elemente wie Cards müssen visuell und technisch gut zugänglich sein – je nach Aufbau gelten andere Anforderungen.
• Screenreader und Tastatur-Nutzer*innen sind auf korrekt ausgezeichnete Links angewiesen – sonst können sie diese nicht erkennen und nutzen.

Fazit: Gute Links führen alle ans Ziel

Links begegnen uns überall – in Texten, Bildern oder ganzen Cards. Und wie du gesehen hast, ist es gar nicht schwer, sie barrierefrei zu gestalten. Wenn du ein paar einfache Regeln befolgst, werden deine Links nicht komplizierter – sondern klarer, verständlicher und benutzerfreundlicher für alle.