ARIA

Schalter, Radiobuttons und Checkboxen brauchen einen Namen

Regel: aria-toggle-field-name
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Ein Schalter ohne Namen wird als „Schalter, aus“ angesagt — der Zustand ist klar, der Gegenstand nicht. In einer Einstellungsliste klingt so jede Zeile gleich.

So beheben Sie es

Verknüpfen Sie die sichtbare Beschriftung über aria-labelledby oder nutzen Sie ein natives <label>.
Fehlt eine sichtbare Beschriftung, ergänzen Sie aria-label mit dem Namen der Einstellung.
Verlassen Sie sich nicht auf danebenstehenden Text: Nähe auf dem Bildschirm ist keine Beziehung im Code.

Im Markup

Fehlerhaft

<div role="switch" aria-checked="false" tabindex="0"></div>

Korrekt

<div role="switch" aria-checked="false" tabindex="0" aria-label="Dark mode"></div>

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-toggle-field-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.