Tri-State-Checkbox 
veröffentlicht in 2014
zuletzt bearbeitet in
Die indeterminate-Eigenschaft
Das Kontrollfeld ist das einzige HTML-Element, das drei Zustände unterstützt. Die HTML-Spezifikation gibt zwar eindeutig vor, dass ein Kontrollfeld nur zwei Zustände haben darf, aber Autoren können per JavaScript einem Kontrollfeld einen unbestimmten Zustand (indeterminate-Eigenschaft) zuweisen, der von Browsern an Assistenztechnologien als "teilweise aktiviert" übermittelt wird. Anwendungsfälle sind Funktionalitäten wie "Alle aktivieren" oder "Alle erweitern" mit entsprechenden untergeordneten Elementen, die einzeln aktiviert oder erweitert werden können.
Im folgenden Beispiel können mit dem ersten Kontrollfeld alle nachfolgenden Kontrollfelder aktiviert oder deaktiviert werden. Wenn die nachfolgenden Kontrollfelder aber teilweise aktiviert und teilweise nicht aktiviert sind, erhält das erste Kontrollfeld den unbestimmten Zustand. In Assistenztechnologien wie Screenreader wird im zweiten Fall das Kontrollfeld als "teilweise aktiviert" identifiziert.
Die indeterminate-Eigenschaft ist nicht zu verwechseln mit dem indeterminate-Attribut in HTML. Das HTML-Attribut hat keine semantische Bedeutung und verschleiert lediglich den Zustand eines Kontrollfelds.
Ob die Eigenschaft gesetzt ist, können Sie in den Entwicklerwerkzeugen des Browsers feststellen:
Ob der Zustand "teilweise aktiviert" für das Kontrollfeld vom Browser festgelegt wurde, erkennen Sie am Wert "mixed" in den Entwicklerwerkzeugen des Browsers:
Weitere Aspekte der Barrierefreiheit
Bei allen Inhalten auf Webseiten gibt es meist mehrere Aspekte der Barrierefreiheit zu berücksichtigen. Im folgenden werden zwei weitere Aspekte erläutert, die im Zusammenhang mit Tri-State-Checkboxen typischerweise vorkommen.
- Wenn die untergeordneten Steuerelemente einer Tri-State-Checkbox bedient werden, kann sich der Zustand der Tri-State-Checkbox dynamisch ändern. Solche dynamischen Änderungen des Kontextes müssen nach den WCAG 2.2 angekündigt werden.
- In manchen Formularen stehen die einzelnen Beschriftungen in einem Zusammenhang zueinander, etwa eine Frage mit mehreren Steuerelementen, die als Antwort dienen. Die Beschriftungen der einzelnen Steuerelemente sind ohne die Gruppenbeschriftung nicht nachvollziehbar. Es ist also in manchen Situationen erforderlich, den zusätzlichen Kontext technisch (und nicht nur visuell) mit dem Steuerelementen zu verknüpfen.
Änderung des Kontextes
Wenn Werte in einem Formularelement oder andere Inhalte einer Webseite dynamisch geändert werden, erfahren Screenreadernutzende die Änderung nicht. Wenn dynamische Änderungen oben auf einer Webseite und die Bedienung unten auf der Webseite stattfindet, müssen Nutzende sich der Stelle mit den Änderungen bewusst sein und dorthin navigieren, um die geänderten Informationen lesen zu können. Deshalb sind bei dynamischen Änderungen des Kontextes Nutzende über dieses Verhalten textlich zu informieren. Das Beispiel oben berücksichtigt diese Anforderung.
Visuelle Beziehungen technisch abbilden
Eine Technik, für Formularelemente einen zusätzlichen Kontext herzustellen, ist mit den fieldset- und legend-Elementen:
<fieldset>
<legend>Welches Gemuese essen Sie?</legend>
<p><input id="checkbox1" type="checkbox"><label for="checkbox1">Aubergine</label></p>
<p><input id="checkbox2" type="checkbox"><label for="checkbox2">Moehren</label></p>
</fieldset>
Ein fieldset-Element ist ein Element mit der Rolle "group", wobei der Name der Gruppe durch ein legend-Element festgelegt werden kann. Die Gruppenbeschriftung wird dann den Beschriftungen für die Formularelemente vorangestellt, zum Beispiel "Welches Gemüse essen Sie? Aubergine". Je nach Screenreader wird die Gruppenbeschriftung vor jeder Beschriftung oder nur bei der ersten Beschriftung vorangestellt. Die Gruppenbeschriftung sollte daher kurz und präzise formuliert sein.