Tri-State-Checkbox

veröffentlicht in 2014

zuletzt bearbeitet in

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:

Grenzen für Funktionalität und Gestaltung

Normalerweise gibt es nur zwei Gründe, auf HTML für 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:

Mehrere Kontrollfelder mit den Zuständen: aktiviert, nicht aktiviert und teilweise aktiviert.

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.

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 a third state.

https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)

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

Konkret bedeutet das:

  1. Wenn Sie mit Kontrollfeldern (<input type="checkbox">) arbeiten, können Sie auch die indeterminate-Eigenschaft einsetzen, um den "teilweise aktivierten" Zustand darzustellen.
  2. Wenn Sie ohne Kontrollfelder arbeiten, sondern Grafiken oder andere Elemente 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.

Grafiken als Kontrollfelder

Wenn Kontrollfelder mit Grafiken gestaltet werden, dann haben Sie grundsätzlich zwei Möglichkeiten, sie barrierefrei nutzbar zu machen:

  1. Sie setzen die CSS-Eigenschaft appearance ein, um die Darstellung des Kontrollfelds zu unterdrücken und setzen ebenfalls per CSS eine Grafik anstelle des Kontrollfelds ein.
  2. Sie nutzen HTML-Elemente (zum Beispiel ein img-Element) für die Darstellung eines Kontrollfelds und ergänzen das HTML mit role="checkbox" und einem aria-checked-Attribut.

Im folgenden Beispiel wird ein Kontrollfeld durch eine Grafik per CSS ersetzt:

In diesem Beispiel ist kein ARIA erforderlich. Das Kontrollfeld ist nach wie vor vorhanden; es ist nur nicht am Bildschirm sichtbar. Bei einer Interaktion werden Nutzende das mit HTML erzeugte Kontrollfeld aktivieren oder deaktivieren. Um daraus eine Tri-State-Checkbox zu machen, kann mit der indeterminate-Eigenschaft gearbeitet werden.

Mit der appearance-Eigenschaft werden die Stileigenschaften des Kontrollfelds entfernt. Autoren können per CSS das Kontrollfeld nach Belieben gestalten. In dem Beispiel werden Grafiken als Pseudo-Elemente eingesetzt. Weitere barrierefreie Features sind:

Weitere Anforderungen der Barrierefreiheit

Bei allen Inhalten auf Webseiten gibt es meist mehrere Aspekte der Barrierefreiheit, die berücksichtigt werden müssen. Die folgenden Themen kommen im Zusammenhang mit Kontrollfeldern typischerweise vor.

Ein Kontrollfeld benötigt eine beschreibende Beschriftung (Erfolgskriterium 3.3.2). Die Beschriftung kann ein sichtbarer Text oder eine Grafik mit Alternativtext sein.

Kontrollfelder müssen per Tastatur bedienbar sein, das heißt sie müssen per Tab-Taste erreicht und per Leertaste aktiviert werden können (Erfolgskriterium 2.1.1). Sollte es eine Kontextänderung bei der Bedienung des Kontrollfeldes geben (etwa eine Veränderung des Fokus), so muss diese Änderung in Textform angekündigt werden (Erfolgskriterium 3.2.2).

Die Zielgröße eines Kontrollfelds ist relativ klein. Durch die Verknüpfung der Beschriftung per label-Element wird die Zielgröße deutlich größer. Die Web Content Accessibility Guidelines (WCAG) 2.2 stellt zwei Anforderungen an die Zielgröße: Wenn Sie das standardmäßig angezeigte Kontrollfeld ausblenden und mit Grafiken oder CSS-Eigenschaften neu gestalten, dann

Die Beschriftungen von Kontrollfeldern und die Kontrollfelder selbst müssen Mindestkontrastanforderungen erfüllen: