ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Schnell
Wichtig für Rolle:
Redaktion
Worum gehts?
Links sollen klarmachen, wohin sie führen. Das sollte am besten durch einen aussagekräftigen Linktext geschehen, etwa: „Zur Produktübersicht“.
Wenn der Linktext an sich nicht aussagekräftig ist, dann muss das Linkziel zumindest durch den Zusammenhang mit dem Kontext, in dem der Link steht, verständlich sein.
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.
Linkzweck durch Kontext erweitern
Der Kontext (umgebender Text) kann genutzt werden, um den Link verständlich zu machen. Als Kontext zählt, wenn der Link …
- innerhalb eines
<p>oder<div>ist. - innerhalb eines
<li>ist. - innerhalb einer Tabellenzelle ist und die Zelle selbst oder die Überschriftenzelle den Sinn gibt (
td,th).
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
Linkzweck versteckt erweitern
Zusätzlicher Kontext zum Link kann per CSS oder Aria-Label ergänzt werden. So lässt sich ein Text ergänzen, der die Seite visuell nicht stört.
Beispiele:
- Der Link heißt »Mehr erfahren«, im Aria-Label steht aber »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.
<p>Mehr erfahren über <span class="visually-hidden">unsere Produkte</span></p>
Aussagen von Icons in Linkzweck mit aufnehmen (Dateiformat, neuer Tab)
Wenn ein Link zu einer Datei führt (z. B.: PDF oder ZIP) oder sich in einem neuen Tab öffnet und das durch ein Icon verdeutlicht wird, dann sollte das im Linktext genannt werden: „Jahresbericht 2024 (PDF)“
Falls kein Icon vorhanden ist, das einen Hinweis gibt, dann ist der Zweck für alle User unklar. Dann muss es auch keinen erweiternden Text geben.
WCAG-Technik(en) in Englisch:
Unser Test-Tool!
Die neuen Kick-off-Audits!
Prüfe selbstständig die kritischsten WCAG-Kriterien! Mit unseren einfach erklärten Anleitungen kannst du zu Beginn eines Projektes den Zustand einer Website schnell einschätzen: Was sind Kosten und Aufwände? Für nur 99,- €
