Zustand Widget-Zustand

`aria-checked`

Gibt den aktuellen Aktivierungszustand eines Kontrollkästchens, Optionsfelds oder menübasierten Kontrollkästchens an. Akzeptiert "true", "false" oder "mixed". Das native HTML-Kontrollkästchen verwaltet diesen Zustand automatisch – es muss nur bei benutzerdefinierten Widgets manuell gesetzt werden.

Verwendung

Auf Widgets mit binärer oder dreistufiger Auswahl-Semantik: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" und role="switch". Wird das native <input type="checkbox"> oder <input type="radio"> verwendet, stellt der Browser den Aktivierungszustand assistiven Technologien bereits bereit – eine Duplizierung durch aria-checked ist nicht erforderlich.

Abgrenzung zu verwandten Zuständen:

aria-checked – für „Diese Option ist aus einer Gruppe von Auswahlmöglichkeiten ausgewählt, oft unabhängig von anderen“. Kontrollkästchen und Optionsfelder.
aria-pressed – für Umschaltflächen (Stumm / Laut). Das Element ist konzeptuell eine Schaltfläche; der Zustand gibt an, ob die Aktion aktiv ist.
aria-selected – für Elemente innerhalb eines Einzel-Auswahl-Containers wie tablist, listbox oder tree. Der Zustand gehört zum Auswahlmodell des Containers, nicht zum Element selbst.

Synchronisierung

Gültige Werte sind "true", "false", "mixed" und "undefined". "mixed" darf nur für ein übergeordnetes Kontrollkästchen verwendet werden, das eine Gruppe von untergeordneten Kontrollkästchen in inkonsistenten Zuständen zusammenfasst (das klassische Unbestimmt-Muster bei „Alle auswählen“). "undefined" ist in der Praxis selten; die meisten Entwickler verwenden stattdessen "false".

Das Attribut muss widerspiegeln, was der Nutzer sieht. Jeder Klick- und Tastatur-Handler, der das visuelle Häkchen aktualisiert, muss den neuen aria-checked-Wert im selben Code-Pfad setzen. Niemals eine „aktiviert“-Darstellung per CSS erzeugen, ohne das Attribut zu aktualisieren.

Für role="radio" innerhalb einer radiogroup sollte zu jedem Zeitpunkt genau eine Option aria-checked="true" tragen; alle anderen müssen "false" sein (nicht ausgelassen).

Häufige Fehler

aria-checked bei einem role="checkbox"-Element vollständig weglassen – der Screenreader kündigt „Kontrollkästchen“ ohne Zustand an.
Eine Klasse umschalten, um das Häkchen anzuzeigen, aber aria-checked nie aktualisieren.
aria-checked="true" auf einem nativen <input type="checkbox"> setzen – der Browser ignoriert es, und der doppelte Zustand kann außer Synchronisation geraten.
aria-checked="mixed" auf einem einzelnen Kontrollkästchen setzen, statt auf einem übergeordneten Element, das untergeordnete Elemente zusammenfasst.
Benachbarte Optionsfelder ohne aria-checked="false" lassen – assistive Technologien können den nicht aktivierten Zustand nicht ableiten.
aria-checked mit aria-selected bei Listbox-Optionen oder Tabs verwechseln.

Beispiel

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">E-Mail-Einstellungen</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Wöchentliche Zusammenfassungen senden
  </div>
</div>