Redundanter Link: Warnung verstehen und beheben
Also called: Doppelter Link, Benachbarte Links mit gleicher URL, Wiederholter Link
Definition
Ein redundanter Link ist ein Link direkt neben einem anderen Link mit demselben Ziel – meist Bild-Link und Text-Link in einer Produkt- oder Beitragskarte. Wer per Tastatur oder Screenreader navigiert, trifft zweimal hintereinander auf dasselbe Ziel.
Ein redundanter Link führt auf dieselbe Seite wie der Link direkt daneben – typischerweise sind Produktbild und Produktname getrennt verlinkt. Prüftools melden ihn als „Redundanter Link“ oder „Benachbarte Links führen zur selben URL“. Es handelt sich um eine Best-Practice-Warnung, nicht um einen harten WCAG-Verstoß. Trotzdem verdoppelt er den Aufwand für alle, die per Tastatur oder Screenreader unterwegs sind.
Was es bedeutet
Wer mit der Maus arbeitet, sieht eine Karte und klickt irgendwo darauf. Wer die Tastatur nutzt, muss zweimal Tab drücken, um an der Karte vorbeizukommen. Ein Screenreader kündigt zwei Links hintereinander an, etwa „Link, Blaue Sneaker“ und gleich danach noch einmal „Link, Blaue Sneaker“. Auf einer Kategorieseite mit 24 Produkten sind das 24 zusätzliche Tab-Stopps und 24 doppelte Ansagen.
Die zugehörige Regel ist WCAG 2.4.4 Linkzweck (im Kontext), ein Kriterium der Stufe A in WCAG 2.2: Der Zweck jedes Links muss aus seinem Text oder seinem programmatischen Kontext hervorgehen. Zwei benachbarte Links zum selben Ziel sind meist durchaus verständlich – das Kriterium ist also erfüllt. Deshalb führt das W3C die Lösung, Technik H2 „Benachbarte Bild- und Text-Links für dieselbe Ressource zusammenfassen“, nur als empfohlene (advisory) Technik, nicht als Pflicht.
Eine wichtige Ausnahme gibt es: Hat der Bild-Link keinen Alternativtext, ist er nicht bloß doppelt, sondern ein leerer Link. Der verstößt gegen 2.4.4 und 4.1.2 (W3C-Fehler F89).
| Muster | Ergebnis |
|---|---|
| Bild-Link (ohne alt) + Text-Link, gleiche URL | Leerer Link – WCAG-Verstoß |
| Bild-Link (alt = Produktname) + Text-Link, gleiche URL | Redundanter Link – doppelt zu hören, Best Practice |
Ein Link um Bild und Text, Bild mit alt="" |
Besteht – ein Stopp, eine Ansage |
Praxisbeispiele
<!-- Redundanter Link: zwei Tab-Stopps, gleiches Ziel -->
<a href="/schuhe/blauer-sneaker"><img src="sneaker.jpg" alt="Blauer Sneaker"></a>
<a href="/schuhe/blauer-sneaker">Blauer Sneaker</a>
<!-- Behoben (W3C H2): ein Link, leeres alt, weil der Text den Link benennt -->
<a href="/schuhe/blauer-sneaker">
<img src="sneaker.jpg" alt="">
Blauer Sneaker
</a>
<!-- Alternative: Bild-Link bleibt, wird aber aus Tab-Reihenfolge und Vorlesebaum genommen -->
<a href="/schuhe/blauer-sneaker" tabindex="-1" aria-hidden="true">
<img src="sneaker.jpg" alt="">
</a>
<a href="/schuhe/blauer-sneaker">Blauer Sneaker</a>Das leere alt="" im zusammengefassten Link ist Absicht: Der Linktext sagt schon, wohin er führt. Ein zusätzlicher Alternativtext mit denselben Worten würde den Namen doppelt vorlesen lassen.
Bild und Text in einen gemeinsamen Link packen, das Bild mit leerem alt versehen, wenn der Text das Ziel benennt, und pro Karte höchstens einen „Mehr erfahren“-Link mit aussagekräftigem Text anbieten.
Bild, Titel und „Ansehen“-Button als drei getrennte Tab-Stopps zur selben URL verlinken oder den Alternativtext eines alleinstehenden Bild-Links entfernen, um „Doppelungen zu vermeiden“.
So beheben Sie einen redundanten Link
Shop-Templates sind die häufigste Quelle. Betreiben Sie einen Shopify-Shop, prüfen Sie zuerst Kollektionsseiten und „Ähnliche Produkte“.
Häufige Fragen
Was ist ein redundanter Link in der Barrierefreiheit?
Ein Link direkt neben einem anderen Link mit demselben Ziel, etwa Bild-Link und Text-Link in einer Karte. Tastatur- und Screenreader-Nutzer stoßen zweimal auf dasselbe Ziel.
Ist ein redundanter Link ein WCAG-Verstoß?
Meist nicht. WCAG 2.4.4 ist erfüllt, wenn der Zweck jedes Links klar ist – und das ist bei beiden Links in der Regel so. Das Zusammenführen (Technik H2) empfiehlt das W3C nur. Zum Verstoß wird es, wenn der Bild-Link gar keinen zugänglichen Namen hat.
Warum braucht das Bild nach dem Zusammenführen ein leeres alt?
Weil der Linktext das Ziel schon benennt. Ein Alternativtext mit denselben Worten würde direkt danach vorgelesen – der Produktname wäre zweimal zu hören.
Wie finde ich redundante Links auf meiner Website?
Sehen Sie sich wiederkehrende Templates an: Produktraster, Teaser-Listen, Kopfbereiche mit Logo und Website-Name. Prüfen Sie dann je Template eine Seite mit dem kostenlosen WCAG-Scanner, um zu sehen, welche Link-Fehler es erzeugt.
Related terms
Leerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenAlternativtext: Gute Alt-Texte für Bilder schreiben
Ein Alternativtext ist eine kurze Textbeschreibung eines Bildes im alt-Attribut. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.
Read definition: Alternativtext: Gute Alt-Texte für Bilder schreibenIcon-Button: So geben Sie ihm einen Namen
Ein Icon-Button ist eine Schaltfläche, die nur ein Symbol zeigt – Lupe, Kreuz, drei Striche – und keinen sichtbaren Text. Barrierefrei ist er erst mit einem zugänglichen Namen im Code, der Hilfstechnologien sagt, was er bewirkt.
Read definition: Icon-Button: So geben Sie ihm einen Namen