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

Wenn ein Kontrollfeld mit HTML erzeugt wird, dann hat das Kontrollfeld alles, was es für eine barrierefreie Bedienung benötigt:

<p><label><input type="checkbox">Ich esse Gemüse</label></p> 

Im Einzelnen:

• Das Kontrollfeld besitzt eine Rolle ("checkbox"), einen Zustand ("aktiviert" oder "nicht aktiviert") und einen Namen (hier durch die Verknüpfung der Beschriftung mit dem label-Element). Diese semantischen Informationen können im Accessibility-Tree in den Entwicklerwerkzeugen des Browsers überprüft werden.

  

• Das Kontrollfeld kann standardmäßig per Tastatur bedient werden (zum einen per Tab-Taste fokussiert und zum anderen per Leertaste aktiviert und deaktiviert werden). Außerdem erhält das Kontrollfeld einen sichtbaren Fokusindikator.
• Das Kontrollfeld kann bei benutzereigenen Stilvorgaben (zum Beispiel im [Kontrastmodus]) wahrgenommen werden.

Wenn Kontrollfelder mit Grafiken gestaltet werden oder die Funktionalität mit JavaScript nachgebildet wird, dann sind die Kontrollfelder oft nicht barrierefrei. Dennoch lassen sich autorendefinierte Kontrollfelder barrierefrei umsetzen. Dafür sollte die appearance-Eigenschaft eingesetzt werden, wie im nachfolgenden Beispiel:

Mit der appearance-Eigenschaft werden die Stileigenschaften des Kontrollfelds entfernt. Das Kontrollfeld ist damit nicht sichtbar, aber nach wie vor zugänglich. Autoren können per CSS das Kontrollfeld nach Belieben gestalten. In dem Beispiel werden Grafiken als Pseudo-Elemente eingesetzt. Weitere barrierefreie Features sind:

• Der Fokusindikator wird deutlich sichtbar gestaltet.
• Die Zielgröße ist mindestens 44px × 44px groß.

Alternativen zu HTML-Kontrollfelder

Normalerweise gibt es nur zwei Gründe, auf HTML-Kontrollfelder zu verzichten:

1. Das Kontrollfeld soll drei statt zwei Zustände besitzen können. Neben "Aktiviert" und "nicht aktiviert" soll auch "teilweise aktiviert" dargestellt werden können.
2. Das Kontrollfeld soll optisch anders dargestellt werden, wobei die Möglichkeiten mit CSS für die gewünschte Darstellung nicht ausreichen.

Hingegen, wenn ein Kontrollfeld dynamische Funktionen erhält, um beispielsweise eine Ergebnisliste zu filtern, handelt es sich nicht mehr um ein Kontrollfeld, sondern um eine Wechselschaltfläche.

Drei statt zwei Zuständen

Wenn ein Kontrollfeld drei Zustände haben soll, sieht HTML kein Attribut für den Zwischenzustand "teilweise aktiviert" vor:

Die Kennzeichnung eines Kontrollfelds mit dem indeterminate-Attribut ist zwar möglich, um den Zustand des Kontrollfelds zu verschleiern, aber es handelt sich um eine reine visuelle Angelegenheit. Das indeterminate-Attribut hat keinerlei Semantik.

Weil die Darstellung von "teilweise aktiviert" für ein Kontrollfeld mit HTML semantisch nicht umgesetzt werden kann, muss eine andere Technik eingesetzt werden. Folgende zwei Techniken erlauben die Kennzeichnung einer sogenannten Tri-State-Checkbox:

• wenn ein Kontrollfeld die indeterminate-Eigenschaft per JavaScript erhält, erhält es den Zustand "teilweise aktiviert".

• wenn ein Element mit der expliziten Rolle "checkbox" ein aria-checked-Attribut mit dem Wert "mixed" erhält, erhält das Kontrollfeld den zustand "teilweise aktiviert".

  Hinweis: Das aria-checked-Attribut darf nicht für ein Kontrollfeld (<input type="checkbox">) vergeben werden. Da Kontrollfelder sowohl eine checked-Eigenschaft als auch ein aria-checked-Attribut besitzen würden, werden Browser immer nur den Wert der checked-Eigenschaft an Assistenztechnologien weiterleiten.

Konkret bedeutet das:

1. Wenn Sie mit Kontrollfeldern arbeiten, können Sie auch mit der indeterminate-Eigenschaft arbeiten, um den "teilweise aktivierten" Zustand darzustellen.
2. Wenn Sie ohne Kontrollfelder arbeiten, sondern nur mit Grafiken oder anderen Elementen zur Darstellung von Kontrollfeldern einsetzen, müssen Sie unter anderem mit einem aria-checked-Attribut zusammen mit der Rolle "checkbox" arbeiten, um einen "teilweise aktivierten" Zustand semantisch abzubilden.

Weitere Aspekte der Barrierefreiheit

Bei allen Inhalten auf Webseiten gibt es meist mehrere Aspekte der Barrierefreiheit zu berücksichtigen. Bei dem einfachen Kontrollfeld oben wurden beispielsweise der Fokusindikator und die Zielgröße – beides Kriterien auf Konformitätsstufe AAA der WCAG 2.2 – zusätzlich berücksichtigt. Im folgenden werden zwei Aspekte erläutert, die im Zusammenhang mit Tri-State-Checkboxen typischerweise vorkommen.

1. 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.
2. 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 den Zusatztext nicht nachvollziehbar. Es ist also in manchen Situationen erforderlich, den Zusatztext technisch (und nicht nur visuell) mit dem Steuerelement herzustellen.

Änderung des Kontextes

Wenn Werte in einem Formularelement oder andere Inhalte einer Webseite dynamisch geändert werden, erfahren Screenreadernutzende die Änderung nicht zwingend. 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 ist bei dynamischen änderungen der Nutzer über diese Möglichkeit textlich zu informieren. Die folgenden Beispiele berücksichtigen diesen Aspekt.

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.