Rolle Widget

`checkbox`

Kennzeichnet ein Element als Kontrollkästchen mit zwei oder drei Zuständen. Bevorzugt wird <input type="checkbox">; role="checkbox" kommt nur zum Einsatz, wenn das native Element nicht verwendet werden kann – etwa bei einem Tri-State-Steuerelement, das einen gemischten Wert anzeigen muss.

Verwendung

Empfohlen wird <input type="checkbox">. Das native Element liefert Fokus, Aktivierung per Leertaste, die Pseudoklasse :checked, die Formularübermittlung und die JS-Eigenschaft indeterminate für Tri-State-Zustände. role="checkbox" ist für zwei Szenarien vorgesehen:

Ein Tri-State-Kontrollkästchen wird benötigt, das als aria-checked="mixed" bereitgestellt wird (ein „Alle auswählen“-Element, das den Zustand untergeordneter Elemente widerspiegelt).
Ein Design-System liefert eine benutzerdefinierte Kontrollkästchen-Komponente, die nicht ersetzt werden kann.

Wird role="checkbox" auf einem Nicht-Input-Element implementiert, muss aria-checked gesetzt werden (es ist erforderlich), tabindex="0" verwaltet und das Keydown-Ereignis für die Leertaste behandelt werden.

Tastatur- und Fokus-Vertrag

Gemäß dem APG-Checkbox-Muster:

Tab setzt den Fokus auf das Kontrollkästchen.
Die Leertaste schaltet aria-checked zwischen "true" und "false" um (sowie "mixed" bei Tri-State).
Enter aktiviert ein Kontrollkästchen NICHT – nur die Leertaste. (Native Elemente ignorieren Enter in den meisten Browsern ebenfalls.)

Der Fokus verbleibt nach der Aktivierung auf dem Kontrollkästchen.

Häufige Fehler

role="checkbox" ohne gesetztes aria-checked-Attribut. Der Zustand ist ab dem Moment erforderlich, in dem sich das Element im DOM befindet.
aria-checked="true" wird nur als Klassen-Hook verwendet – die visuelle Darstellung wird geändert, das Attribut bei einem Klick jedoch nie aktualisiert.
Benutzerdefinierte Kontrollkästchen, die auf Klick reagieren, aber nicht auf die Leertaste.
Ein natives <input> innerhalb eines <div role="checkbox"> zu verschachteln – doppelte Semantik verwirrt Screenreader.
Tri-State-Steuerelemente, bei denen die Leertaste den Zustand von „false“ → „true“ → „mixed“ → „false“ durchläuft. Die APG schreibt „false“ → „true“ → „false“ vor; „mixed“ wird programmatisch durch die Seite gesetzt, nicht durch den Nutzer.

Beispiel

<!-- Bevorzugt -->
<label>
  <input type="checkbox" name="terms" required>
  Ich stimme den Nutzungsbedingungen zu
</label>

<!-- Benutzerdefiniertes Tri-State-„Alle auswählen“ -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="mixed"
  aria-labelledby="selectAllLabel"
>
</div>
<span id="selectAllLabel">Select all rows</span>