Screenreader-Links

Silktide findet Link-Elemente, die so fehlerhaft sind, dass sie für Hilfstechnologien unbrauchbar werden – Links ohne lesbaren Text, Links ohne Ziel und verwaiste, leere Link-Tags, die auf der Seite zurückgeblieben sind.

Damit ein Link mit Hilfstechnologien funktioniert, benötigt er sowohl ein Ziel (ein href-Attribut) als auch etwas Lesbares im Inneren:

<!-- Funktioniert: Ziel und lesbarer Text -->
<a href="/about">Über uns</a>

<!-- Funktioniert: ein Bild-Link mit Alternativtext -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>

Warum das wichtig ist

Ein Screenreader kündigt jeden Link anhand seines Textes an. Ein Link mit Ziel, aber ohne Text wird nur als „Link“ angekündigt – der Nutzer kann ihn aktivieren, hat aber keine Ahnung, wohin er führt. Ein Link mit Text, aber ohne Ziel wirkt klickbar, führt jedoch nirgendwohin. Beide Muster verletzen das grundlegende Prinzip, das es Menschen mit Hilfstechnologien ermöglicht, eine Seite über ihre Links zu navigieren.

So beheben Sie das

1. Bei einem Link mit Ziel, aber ohne lesbaren Text: Fügen Sie Text innerhalb des Links hinzu oder Alt-Text, wenn er nur ein Bild enthält.
2. Bei einem Link mit Text, aber ohne Ziel: Fügen Sie das fehlende href hinzu, oder wenn das Element tatsächlich ein Sprungziel für andere Links ist, verschieben Sie seine id stattdessen auf ein Nicht-Link-Element:

<!-- Veraltetes Sprungziel, in HTML5 nicht empfohlen -->
<a name="beispiel"></a>

<!-- Bevorzugt: eine id auf einem normalen Element -->
<div id="beispiel">...</div>

3. Bei leeren <a></a>-Tags ganz ohne Attribute: Entfernen Sie sie – sie erfüllen keinen Zweck. Sie bleiben oft durch Editoren oder Skripte zurück.
4. Wenn das Element eigentlich eine Schaltfläche ist – es löst eine Aktion aus statt zu navigieren –, verwenden Sie ein <button>-Element oder fügen Sie dem bestehenden Tag role="button" hinzu.

Wie Silktide dies testet

1. Jedes <a>-Element auf der Seite wird ermittelt und sein Text (einschließlich Alt-Text von Bildern und durch CSS hinzugefügtem Text), sein href sowie alle vorhandenen id- oder name-Attribute werden ausgelesen.
2. Drei Problem-Muster werden markiert:
   • Ein Link mit href, aber ohne lesbaren Text.
   • Ein Element mit Text sowie id oder name, aber ohne href – ein Sprungziel, das sich als Link ausgibt, oder ein Link, dem das Ziel fehlt.
   • Eine vollständig leere Anker-Markierung ohne Text, href, id oder name.
3. Zwei Muster werden absichtlich nicht markiert:
   • <a> mit Text, aber ohne href, id oder name – HTML5 erlaubt dies als „Platzhalter-Link“, der häufig später durch JavaScript befüllt wird.
   • Leere Anker mit einer id oder name, aber ohne href – dies sind veraltete Sprungziele, keine Links.

Weiterführende Informationen

• Erfolgskriterium 4.1.2 verstehen: Name, Rolle, Wert (WCAG 2.2)
• H91: Verwendung von HTML-Formularsteuerelementen und Links (WCAG-Technik)
• Link-Zweck
• Leerer Link