Standards · ARIA

Rolle Widget

switch

Kennzeichnet ein Element als Ein/Aus-Schalter. Funktional einer Checkbox ähnlich, wird jedoch als "switch, on" oder "switch, off" angekündigt statt als "checked" — besser geeignet für Einstellungsschalter. Ein natives HTML-Äquivalent existiert bislang nicht.

Verwendung

Für ein binäres Einstellungselement, bei dem „ein“ und „aus“ den Zustand besser beschreiben als „aktiviert“ und „deaktiviert“ — WLAN, Dunkelmodus, Benachrichtigungen, Flugmodus. Da es kein natives HTML-Schalter-Element gibt, stehen zwei gültige Ansätze zur Verfügung:

  1. <button type="button" role="switch" aria-checked="false"> — bevorzugt, da der native Fokus und die Aktivierung des Buttons übernommen werden.
  2. <input type="checkbox" role="switch"> — ebenfalls akzeptabel; die Formularübermittlung funktioniert weiterhin, und die Rollenüberschreibung ändert die Ansage durch assistive Technologien.

role="switch" sollte nicht für Elemente verwendet werden, die nicht wirklich binär sind. Wenn die Aktion eine Navigation auslöst, ein Menü öffnet oder einen Prozess startet, ist button oder link die richtige Wahl.

Tastatur- und Fokusvertrag

Gemäß dem APG-Schalter-Muster:

  • Tab verschiebt den Fokus auf den Schalter.
  • Leertaste schaltet aria-checked um. Enter sollte ebenfalls umschalten (das APG empfiehlt beides, da Benutzer bei einem button-basierten Schalter ein button-ähnliches Verhalten erwarten).
  • Der Fokus verbleibt nach dem Umschalten auf dem Schalter.

aria-checked akzeptiert bei einem Schalter nur "true" oder "false" — "mixed" ist hier ungültig.

Häufige Fehler

  • role="switch" ohne aria-checked beim ersten Rendern. Der Zustand ist erforderlich.
  • aria-checked="mixed" bei einem Schalter. Dieser Wert ist nur für Checkboxen gültig.
  • aria-pressed statt aria-checked verwenden. aria-pressed gehört auf einen Umschalter (z. B. Stummschalten/Ton einschalten), bei dem der Button eine Aktion ausführt. Ein Schalter hingegen repräsentiert einen Einstellungszustand.
  • Ein Schalter, der aria-checked bei reiner CSS-Umschaltung nicht aktualisiert.
  • Zu kleine Schaltflächen-Treffbereiche, die WCAG 2.5.8 (Zielgröße) nicht erfüllen. Der interaktive Bereich muss mindestens 24 × 24 CSS-Pixel erreichen.

Beispiel

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Dark mode
</button>