- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 106 / 193
2.4.4 Linkzweck (im Kontext)
Ein Link muss sagen, wohin er führt. Für sich gelesen sagt „hier klicken“ nichts.
/ Was es verlangt
Menschen mit Screenreader bewegen sich oft von Link zu Link durch eine Seite oder öffnen eine Liste aller Links, um den gesuchten zu finden. In beiden Fällen hören sie den Linktext fast ohne Umgebung. Ein Link, der nur mehr, hier oder Details lautet, oder ein Icon-Link ganz ohne Text sagt ihnen nichts. Auch wer per Sprache steuert, braucht einen Namen zum Aussprechen, und alle, die eine Seite überfliegen, profitieren von Links, die ihr Ziel nennen.
Der Zweck muss aus dem Linktext allein hervorgehen oder aus dem Text zusammen mit seinem programmatisch bestimmbaren Kontext: demselben Satz, Absatz, Listeneintrag oder derselben Tabellenzelle mit ihren Überschriften oder einem aria-label oder aria-labelledby am Link. Mehr lesen am Ende eines Absatzes zu einem Thema kann über den Kontext bestehen. Es besteht nicht, wenn nichts in der Nähe es erklärt. Das Kriterium nimmt Links aus, deren Zweck für alle Nutzenden mehrdeutig wäre.
/ Woran Seiten scheitern
- Ein Link enthält nur ein Icon oder ein Bild ohne Alternativtext, hat also keinen Namen, und der Screenreader liest ersatzweise die URL vor.
- Jeder Teaser einer Nachrichtenliste endet mit Mehr lesen, und der Link steht in einem eigenen Element, getrennt von der Überschrift, zu der er gehört.
- Ein Social-Media-Icon ist als CSS-Hintergrund oder SVG gezeichnet, und der Link darum hat keinen zugänglichen Namen.
- Der Linktext ist eine rohe URL oder ein Dateiname wie doc_final_v3.pdf.
- Mehrere Links mit denselben Worten, zum Beispiel Herunterladen, führen zu unterschiedlichen Dateien.
/ So prüfen Sie es selbst
- Gehen Sie mit Tab durch die Seite und lesen Sie nur den Text jedes Links, sobald er den Fokus erhält. Fragen Sie sich, ob Sie wissen, wohin er führt.
- Öffnen Sie eine Linkliste: im kostenlosen Screenreader NVDA mit Einfügen+F7, in VoiceOver über den Rotor. Lesen Sie die Liste von oben nach unten. Vage und wiederholte Namen fallen sofort auf.
- Prüfen Sie bei jedem vagen Link, ob sein eigener Satz, Absatz, Listeneintrag oder seine Tabellenzelle den fehlenden Teil liefert.
- Untersuchen Sie reine Icon-Links in den DevTools, wo der Bereich Accessibility den berechneten Namen zeigt. Ein leerer Name ist ein Verstoß.
- Lassen Sie ein kostenloses Werkzeug wie WAVE oder axe DevTools Links ohne Text auflisten.
/ So beheben Sie es
- Schreiben Sie das Ziel in den Linktext: Jahresbericht (PDF) statt hier klicken.
- Tragen Sie bei Bildlinks das Ziel in das alt-Attribut des img ein. Geben Sie SVG-Icon-Links ein aria-label am a-Element oder darin ein visuell verstecktes span mit Text.
- Behalten Sie ein wiederholtes Mehr lesen, aber erweitern Sie seinen Namen mit einem visuell versteckten span, das den Artikeltitel enthält, oder mit aria-labelledby, das auf den Link und die Überschrift verweist.
- Oder machen Sie die Überschrift selbst zum Link und streichen Sie das separate Mehr lesen.
- Bleibt der sichtbare Text kurz, achten Sie darauf, dass der zugängliche Name die sichtbaren Worte weiterhin enthält, damit Menschen mit Sprachsteuerung aussprechen können, was sie sehen.
/ Was unser Scanner prüft
Diesem Kriterium sind vier Prüfungen zugeordnet. Im HTML-Quelltext zählt link_text_missing Links und Schaltflächen ohne Text, aria-label, title oder Bild-alt, und link_text_generic zählt jene, deren gesamter Text einer kurzen Liste englischer Phrasen wie click here entspricht. Auf der gerenderten Seite meldet ambiguous-link-text identische Namen mit unterschiedlichen Zielen, und die axe-core-Regel link-name meldet Links ohne Namen. Keine Prüfung liest den umgebenden Satz.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Ist „Mehr lesen“ immer ein WCAG-Verstoß?
Nein. Auf Stufe A darf sich der Zweck aus dem Linktext zusammen mit dem Kontext ergeben, daher kann Mehr lesen innerhalb des Absatzes oder Listeneintrags, der das Thema nennt, bestehen. Es besteht nicht, wenn der Kontext nicht programmatisch verbunden ist, etwa wenn der Link in einem separaten Container steht. Das strengere AAA-Kriterium 2.4.9 verlangt, dass der Linktext allein genügt.
aria-label oder visuell versteckter Text im Link?
Beides gibt dem Link einen zugänglichen Namen. Visuell versteckter Text ist Teil des Inhalts und wird mit ihm gepflegt. Ein aria-label ersetzt für assistive Technologien den gesamten Text im Link, muss also die sichtbaren Worte wiederholen und bei jeder Änderung angepasst werden. Für reine Icon-Links eignet sich beides. Bei Links mit sichtbarem Text ist ergänzter versteckter Text die sicherere Wahl.
Ist identischer Linktext ein Problem?
Ja, wenn die Links zu unterschiedlichen Zielen führen, denn in einer Linkliste unterscheidet sie dann nichts. Links mit demselben Ziel können und sollten denselben Text tragen. Ein eigenes Kriterium, 3.2.4 Konsistente Erkennung, verlangt, dass Komponenten mit derselben Funktion innerhalb eines Satzes von Seiten einheitlich benannt werden.