Namen und Rollen

Links brauchen einen Namen

Regel: link-name
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Screenreader-Nutzende navigieren über eine Liste aller Links. Ein Link ohne Namen erscheint dort als seine URL — und eine Liste aus „Mehr erfahren“ ist kaum besser.

So beheben Sie es

Der Linktext soll das Ziel für sich allein beschreiben.
Bei reinen Icon-Links ergänzen Sie aria-label („Warenkorb, 3 Artikel“).
Muss „Mehr erfahren“ sichtbar bleiben, erweitern Sie den Namen mit einem aria-label, das diesen Text enthält.

Im Markup

Fehlerhaft

<a href="/cart"><svg aria-hidden="true">...</svg></a>

Korrekt

<a href="/cart" aria-label="Basket, 3 items">
  <svg aria-hidden="true">...</svg>
</a>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

2.4.4 Linkzweck (im Kontext) (öffnet in neuem Tab) — WCAG-Stufe A
4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu link-name (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.