Tri-State-Checkbox veröffentlicht in 2014zuletzt bearbeitet in 2016

ARIA-Beispiel mit role="checkbox" und aria-checked

Um eine Tri-State-Checkbox semantisch so aufzubereiten, dass Screenreader und andere Assistenztechnologien alle drei Zustände identifizieren können, kann ein HTML-Element mit verschiedenen ARIA-Attributen ergänzt werden. Mit role="checkbox" und dem aria-checked-Attribut (mit den Werten "true", "false" oder "mixed") können HTML-Elemente als Kontrollfelder mit drei Zuständen bestimmt werden. Die Rolle beeinflusst dabei weder die visuelle Darstellung noch die Funktionalität des HTML. Vielmehr handelt es sich bei diesen ARIA-Attributen um Anweisungen an den Browser, wie die Semantik an den Accessibility-Tree übermittelt werden soll.

Wenn eine Tri-State-Checkbox mit ARIA umgesetzt wird, darf kein input-Element für das Kontrollfeld als Grundlage dienen. Es muss ein anderes Element eingesetzt werden wie zum Beispiel ein img-Element, das das Kontrollfeld darstellt. Es können dabei nicht beliebige Elemente die Rolle "checkbox" erhalten, siehe dazu auch die Konformitätsbedingungen für den Einsatz von ARIA in HTML.

Natürlich benötigt die Tri-State-Checkbox einen Namen. Während Formularelemente normalerweise mit dem label-Element einen Namen erhalten, ist das label-Element für Elemente, die keine HTML-Formularelemente sind, nicht spezifiziert. Daher muss eine Tri-State-Checkbox ihren Namen erhalten. Da in diesem Beispiel ein img-Element eingesetzt wird, können wir das alt-Attribut nutzen.

Über die ARIA-Attribute hinaus muss das Kontrollfeld auch per Tastatur fokussiert werden können. Das wird durch ein tabindex="0" erreicht:

<p><img src="nicht-aktiviert.png" role="checkbox" alt="Ich esse Gemüse" aria-checked="false" tabindex="0">
<span aria-hidden="true">Ich esse Gemüse</span></p>

Hinweis: Weil das Kontrollfeld seinen Namen per alt-Attribut erhält, ist die Beschriftung (in Assistenztechnologien) redundant. Daher wird die Beschriftung vor dem Accessibility-Tree mit dem aria-hidden-Attribut verborgen.

Was in diesem Beispiel noch fehlt, ist das Event-Handling für Tastatur und Maus.

Event-Handling für eine Tri-State-Checkbox

Folgende Aspekte müssen durch das Event-Handling für eine Tri-State-Checkbox abgedeckt werden:

1. Da eine Tri-State-Checkbox mit einem HTML-Kontrollfeld nicht erzeugt werden darf, müssen die drei Zustände zum Beispiel mit drei Grafiken dargestellt werden. Diese werden bei Interaktion entsprechend ausgetauscht
2. Die visuell dargestellten Zustände müssen auch im HTML präsentiert werden. Das Element mit der Rolle "checkbox" muss je nach visueller Darstellung den Wert "false", "true" oder "mixed" für das aria-checked-Attribut erhalten.
3. Bei einer Tri-State-Checkbox handelt es sich um ein Kontrollfeld, das drei Zustände annehmen kann. Normalerweise werden solche Kontrollfelder dafür eingesetzt, mehrere untergeordnete Steuerelemente zu aktivieren oder zu deaktivieren. Sowohl die Tri-State-Checkbox als auch die untergeordneten Steuerelemente benötigen Event-Handler:
   • wenn die Tri-State-Checkbox per Klick oder per Leertaste aktiviert oder deaktiviert wird, müssen die untergeordneten Steuerelemente ebenfalls aktiviert beziehungsweise deaktiviert werden
   • wenn die untergeordneten Steuerelemente (zum Beispiel Kontrollfelder) aktiviert oder deaktiviert werden, müssen alle untergeordneten Steuerelemente durchlaufen werden, um festzustellen, ob die Tri-State-Checkbox einen aktivierten, einen nicht aktivierten oder einen teilweise aktivierten Zustand erhalten soll.

Im folgenden Codepen können Sie die Funktionsweise ausprobieren. Wie Rolle und Zustand sich ändern, können Sie in den Entwicklerwerkzeugen Ihres Browsers oder in einem Screenreader überprüfen.

Abschließend ist noch zu sagen, dass im Vergleich zu anderen Techniken dieUmsetzung einer Tri-State-Checkbox mit ARIA verhältnismäßig kompliziert ist. Mit CSS zusammen mit der indeterminate-Eigenschaft ist die Umsetzung einer Tri-State-Checkbox einfacher.