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

Wenn eine Checkbox mit HTML erzeugt wird:

dann hat die Checkbox alles, was sie für eine barrierefreie Bedienung benötigt:

• die Checkbox 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 des Betriebssystems überprüft werden.
• Die Checkbox 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 die Checkbox einen sichtbaren Fokus-Indikator.
• Die Checkbox kann standardmäßig bei benutzereigenen Stilvorgaben (z.B. im Kontrastmodus) wahrgenommen werden.

Wenn Checkboxen mit Grafiken gestaltet werden und die Funktionalität mit JavaScript nachgebildet wird, dann fehlen oft die oben aufgezählten Aspekte der Barrierefreiheit. Es gibt nur zwei Gründe, auf HTML-Checkboxen zu verzichten:

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

Hingegen, wenn eine Checkbox dynamische Funktionen erhält, um beispielsweise eine Ergebnisliste zu filtern, handelt es sich nicht mehr um eine Checkbox, sondern um einen Switch-Button.

Drei statt zwei Zustände

Wenn eine Checkbox drei Zustände haben soll:

sieht HTML das indeterminate-Attribut für den Zwischenzustand zwischen "aktiviert" und "nicht aktiviert" für <input type="checkbox"> vor. Die Kennzeichnung einer teilweise aktivierten Checkbox mit dem indeterminate-Attribut ist nach der HTML-Spezifikation eine reine visuelle Angelegenheit:

Note: The control is never a true tri-state control, even if the element’s indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of athird state.

Weil die Darstellung von "teilweise aktiviert" semantisch mit HTML nicht möglich ist, muss das aria-checked-Attribut mit dem Wert "mixed" eingesetzt werden.

Das aria-checked-Attribut darf nicht für eine Checkbox, die mit dem INPUT-Element generiert wird, vergeben werden. Wenn eine Checkbox sowohl ein checked- als auch ein aria-checked-Attribut besitzen, dann werden Browser immer nur den Wert des checked-Attributs an den Accessibility-Tree weitergeben. Warum das so sein muss, wird in den Core Accessibility API Mappings erklärt.

Für eine Tri-State-Checkbox muss ein anderes Element eingesetzt werden wie z.B. die Grafik, die das Kontrollkästchen darstellt (wobei es genauso gut ein umfassendes DIV- oder P-Element sein könnte). Die Grafik sollte als IMG-Element mit leerem Alternativtext eingebunden werden. CSS-Techniken sollten für die Einbindung der Grafik vermieden werden, weil sie im Kontrastmodus Probleme verursachen können.

Mit role="checkbox" und dem aria-checked-Attribut (mit den Werten "true", "false" oder "mixed") können HTML-Elemente als Checkboxen bestimmt werden. Die Rolle beeinflusst dabei die visuelle Darstellung oder die Funktionalität des HTML in keinster Weise. Vielmehr handelt es sich bei diesen ARIA-Attributen um Anweisungen an den Browser, wie die Semantik an den Accessibility-Tree übermittelt werden soll.

Über die Zuweisung der Semantik hinaus muss das Widget auch per Tastatur fokussiert werden können. Das wird durch ein tabindex="0" erreicht:

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

Event-Handling

Bevor eine barrierefreie Tri-State-Checkbox erzeugt wird, müssen folgende Voraussetzungen geschaffen werden:

1. Eine Tri-State-Checkbox kann nicht mit einer HTML-Checkbox erzeugt werden. Anstelle der Checkbox müssen Grafiken eingesetzt werden, d.h. es sind drei Grafiken für die drei Zustände erforderlich.
2. Das Widget selbst (das Element, an dem die Event-Handler gehängt werden) kann wie oben ein P-Element oder ein anderes (aber nicht beliebiges) Element sein. Bevor ein Element die Rolle einer Checkbox erhält, sollten die Konformitätsbedingungen für den Einsatz von ARIA in HTML konsultiert werden.
3. Bei einer Tri-State-Checkbox handelt es sich um eine Checkbox, die drei Zustände annehmen kann, und untergeordnete Optionen — z.B. HTML-Checkboxen. Sowohl die Tri-State-Checkbox als auch die zugehörigen Optionen benötigen Event-Handler:
   • wenn die Tri-State-Checkbox per Klick oder per Leertaste aktiviert oder deaktiviert wird, müssen die zugehörigen Optionen ebenfalls aktiviert bzw. deaktiviert werden
   • wenn die Optionen (z.B. Checkboxen) aktiviert oder deaktiviert werden, müssen alle Optionen durchlaufen werden, um zu bestimmen, ob die Tri-State-Checkbox einen aktivierten, einen nicht aktivierten oder einen teilweise aktivierten Zustand erhalten soll.

Es werden zwei gleichartige Beispiele als Demonstrationen bereitgestellt:

• tri-state-checkbox mit <input type="checkbox"> und der indeterminate-Eigenschaft.: Diese Technik ist nicht barrierefrei.
• Tri-State-Checkbox mit einer Grafik und den ARIA-Attributen role="checkbox" und aria-checked: diese Vorgehensweise ist vorzuziehen.

Weitere Features

Für Screenreader gibt es zwei weitere Aspekte, die berücksichtigt werden sollten:

1. Wenn die Optionen einer Tri-State-Checkbox bedient werden, kann sich der Zustand der Tri-State-Checkbox ändern. Solche dynamischen Änderungen des Kontextes müssen nach den WCAG 2.0 angekündigt werden.
2. In manchen Formularen stehen die einzelnen Formularbeschriftungen in einem Zusammenhang, z.B. mit einer Frage. Die Formularbeschriftungen sind ohne den Zusatztext nicht nachvollziehbar. Es ist also in manchen Situationen erforderlich, diese Beziehung technisch (und nicht nur visuell) herzustellen.

Änderung des Kontextes

Wenn Werte in einem Formular oder andere Inhalte auf einer Seite dynamisch geändert werden, dann erfährt ein Screenreadernutzer die Änderung nicht zwingend. Wenn dynamische Änderungen oben auf einer Seite und die Bedienung unten auf der Seite stattfindet, muss der Nutzer sich der Stelle mit den Änderungen bewusst sein und dorthin navigieren, um die geänderten Inhalte lesen zu können. Deshalb ist bei dynamischen änderungen der Nutzer über diese Möglichkeit textlich zu informieren. Die oben verlinkten Beispiele berücksichtigen diesen Aspekt.

Visuelle Beziehungen technisch abbilden

Eine Technik, für Formularelemente einen Kontext herzustellen, ist mit FIELDSET und LEGEND:

Die Gruppenbeschriftung (Text im LEGEND-Element)wird dann den Formularbeschriftungen vorangestellt, z.B. "Welches Gemüse essen Sie? Aubergine". Je nach Screenreader wird die Gruppenbeschriftung vor jeder Formularbeschriftung oder nur bei der ersten Formularbeschriftung vorangestellt. Die Gruppenbeschriftung sollte deshalb kurz und präzise formuliert sein.