ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Schnell
Wichtig für Rolle:
Redaktion
Worum geht's?
Der Text eines Links – ebenso der Alt-Text eines verlinkten Bildes – sollte eindeutig beschreiben, wohin der Link führt.
Wenn das nicht möglich ist, muss der Linktext zumindest im Kontext verständlich sein.
Umsetzung
Mindestens eine der folgenden Techniken muss umgesetzt werden, um das Kriterium zu erfüllen.
Empfehlung!Aussagekräftige Linktexte
Links sollten deutlich machen, wohin sie führen. Am besten durch aussagekräftige Linktexte wie »Zur Produktübersicht«. URLs alleine (https://…) oder vage Formulierungen wie »Hier klicken« reichen nicht aus, um das Ziel des Links zu verstehen.
WCAG-Technik(en) in Englisch:
Kontext
Wenn der Linktext selbst nicht aussagekräftig ist, muss das Ziel durch den umgebenden Kontext verständlich sein. Kontext eines Links kann sein:
- Ein umgebender Absatz (innerhalb eines
<p>oder zur Not auch als<div>) - Eine umgebende Liste, wenn der Link dann als
<li>Teil der Liste ist. - Eine Tabellenzelle, wenn die Zelle (
td) selbst oder die Überschriftenzelle (th) den Kontext gibt. - Eine vorangehende Überschrift (
<h1>bis<h6>). Diese Technik ist in WCAG zwar nur eine Advisory-Technik (nicht ausreichend), in gängigen Prüfkatalogen wird sie allerdings akzeptiert.
- Ein umgebender Absatz (innerhalb eines
Linktexte unsichtbar erweitern
Der Name eines Links kann auch per CSS oder ARIA 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-labelsteht „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:
<p>Mehr erfahren über <span class="visually-hidden">unsere Produkte</span></p>
Achtung: Das unsichtbare Erweitern von Linktexten kann allerdings ein Problem mit dem Kriterium 2.5.3 Label im Namen geben.
- Der Link heißt nur „Mehr erfahren“, im
Icons in Linktexten
Wenn ein Icon anzeigt, dass ein Link zu einer Datei führt oder sich ein neuer Tab öffnet, sollte dies im Linktext stehen. Beispiel: »Eine Preisliste (PDF)«.
Man kann dem Icon natürlich auch einen Alt-Text (»PDF«) 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!
