ARIA

Tabs brauchen einen Namen

Regel: aria-tab-name
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Ein Tab ohne zugänglichen Namen wird als „Tab, 2 von 4“ angesagt, ohne zu verraten, was sich dahinter öffnet. Ohne Sicht ist die Tableiste damit unbenutzbar.

So beheben Sie es

Schreiben Sie die Tab-Beschriftung als Text in das Element.
Bei reinen Icon-Tabs ergänzen Sie aria-label mit demselben Wort wie im Tooltip.
Achten Sie darauf, dass das Icon aria-hidden ist und den Namen nicht stört.

Im Markup

Fehlerhaft

<button role="tab"><svg aria-hidden="true">...</svg></button>

Korrekt

<button role="tab" aria-label="Settings">
  <svg aria-hidden="true">...</svg>
</button>

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:

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

Weiterführende Quellen

Deque University zu aria-tab-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.