ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Schnell
Wichtig für Rolle:
Redaktion
Worum gehts?
Die Texte von Links sollten alleine aussagekräftig sein. Ein Link darf vage sein („Mehr erfahren“), wenn der Kontext das Ziel klarmacht. Als Kontext zählt zum Beispiel eine vorhergehende Überschrift oder ein <p>-Tag um den Link herum.
Umsetzung
Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.
Empfehlung!Verwende aussagekräftige Linktexte
Links sollen klarmachen, wohin sie führen. Das sollte am besten durch einen aussagekräftigen Linktext geschehen, etwa: “Zur Produktübersicht”.
Der Text sollte den Zweck des Links eindeutig beschreiben, damit Nutzende ihn von anderen Links unterscheiden können. Reine URLs oder vage Texte wie “Hier klicken” reichen dafür nicht aus.
WCAG-Technik(en) in Englisch:
Nutze den Kontext
Wenn der Linktext an sich nicht aussagekräftig ist, dann muss das Linkziel zumindest durch den Kontext (umgebender Text), in dem der Link steht, verständlich sein. Als Kontext zählt, wenn der Link …
- …innerhalb eines
<p>oder<div>ist. - …innerhalb eines
<li>ist. - …innerhalb einer Tabellenzelle ist und die Zelle (
td) selbst oder die Überschriftenzelle (th) den Kontext gibt.
Der Zweck des Links kann auch durch eine vorangehende Überschrift (
<h1>bis<h6>) beschrieben sein. Diese Technik ist in WCAG zwar nur eine Advisory-Technik (nicht ausreichend), in gängigen Prüfkatalogen wird sie allerdings akzeptiert.- …innerhalb eines
Linktexte versteckt erweitern
Der Name eines Links kann auch per CSS oder Aria-Label ergänzt werden. Durch eine Erweiterung des Linktextes schafft man weiteren Kontext, der die Seite visuell nicht stört.
Beispiele:
- Der Link heißt nur “Mehr erfahren”, im Aria-Label steht “Mehr erfahren über unsere Produkte”
- Der Link heißt nur “Mehr erfahren über unsere Produkte”, der Code wurde aber mit einer CSS-Klasse belegt, die den letzten Teil visuell versteckt.
Code-Beispiel:
<p>Mehr erfahren über <span class="visually-hidden">unsere Produkte</span></p>
Aussagen von Icons in Linktexte mit aufnehmen
Wenn ein Link zu einer Datei führt (z. B. PDF) oder sich in einem neuen Tab öffnet und das durch ein Icon verdeutlicht wird, dann sollte das im Linktext genannt werden. Beispiel: “Jahresbericht 2024 (PDF)”
Falls ein Icon keinen solchen Hinweis gibt, dann ist der Zweck für alle User unklar und es muss auch keinen erweiternden Text geben.
WCAG-Technik(en) in Englisch:
DAs Accessbility-Center
Teste selbstständig auf digitale Barrierefreiheit!
Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!
- Alle Prüfschritte leicht erklärt
- Teile und exportiere Prüfberichte
- Teste direkt auf der Live-Webseite!
