Kontrollfelder mit <input type="checkbox"> 
veröffentlicht in
Ein Kontrollfeld (<input type="checkbox">) repräsentiert ein Steuerelement mit zwei Zuständen: aktiviert und nicht aktiviert. Dargestellt wird es als kleines Quadrat, wobei im aktivierten Zustand ein Häkchen oder anderes Symbol in dem Quadrat zu sehen ist.
Ein mit HTML erzeugtes Kontrollfeld ist mit Assistenztechnologien grundsätzlich barrierefrei nutzbar:
<p>
<label>
<input type="checkbox">
Ich esse Gemüse
</label>
</p>
Das Kontrollfeld ist per Tastatur bedienbar, besitzt die Rolle „checkbox“, kann zwei Zustände erhalten und mit dem im Beispiel verknüpften label-Element hat das input-Element einen Namen.
Kontrollfelder benötigen grundsätzlich keine ARIA-Attribute. Die Semantik und Tastaturbedienung stellen der Browser bereit. Autoren sind für den Namen des Kontrollfelds verantwortlich (vorzugsweise ein label-Element für eine Beschriftung rechts neben dem Kontrollfeld).
Kontrollfelder mit drei Zuständen
Der HTML-Standard sieht ein Kontrollfeld nur mit zwei Zuständen vor. Ein Kontrollfeld mit drei Zuständen (Tri-State-Checkbox) wird hingegen in der ARIA-Spezifikation beschrieben. Es gibt zwei Techniken, eine Tri-State-Checkbox zu erzeugen:
Für ein Kontrollfeld mit dem
input-Element kann dieindeterminate-Eigenschaft per JavaScript zugewiesen werden:Mit der
indeterminate-Eigenschaft wird der Zustand des Kontrollfelds von Browsern als „teilweise aktiviert“ an Assistenztechnologien übermittelt.- Alternativ benötigt ein Element mit der Rolle „checkbox“ ein
aria-checked="mixed". Dieses Attribut ist für ein Kontrollfeld mit eineminput-Element nicht vorgesehen.
Anwendungsfälle für eine Tri-State-Checkbox sind Funktionalitäten wie "Alle aktivieren" oder "Alle erweitern" mit entsprechenden untergeordneten Elementen, die einzeln aktiviert oder erweitert werden können.
Weitere Attribute
Kontrollfelder können zahlreiche Attribute erhalten. Im Folgenden werden solche Attribute aufgeführt, die Einfluss auf die Barrierefreiheit haben können.
Die disabled- und readonly-Attribute
Für ein Kontrollfeld darf ein disabled-Attribut eingesetzt werden. Ob Kontrollfelder deaktiviert werden sollen, ist sicher eine Frage der gebrauchstauglichkeit. Deaktivierte Steuerelemente werden von Screenreadern nicht mehr als Formularelemente erfasst, können per Tastatur nicht erreicht werden und haben oft geringe Kontrastverhältnisse. Statt eines disabled-Attributs sollte eine nicht verfügbare Information in Textform erklärt werden.
Im gegensatz zu den meisten Formularelementen ist das readonly-Attribut für Kontrollfelder nicht spezifiziert. Erhält ein Kontrollfeld ein readonly-Attribut, werden Browser das Attribut ignorieren.
Das required-Attribut
Kontrollfelder können mit dem required-Attribut als Pflichtfelder ausgezeichnet werden:
<p>
<label>
<input type="checkbox" required>
Name für Pflichtfeld
</label>
</p>
Das required-Attribut verhindert, dass ein Formular abgeschickt werden kann, wenn das Kontrollfeld nicht aktiviert ist. Browser zeigen dann eine Fehlermeldung für das Kontrollfeld an.
Das required-Attribut wird von Screenreadern unterstützt, indem Screenreader einen zusätzlichen Text wie "erforderlich" zum Namen des Kontrollfelds hinzufügen. Ein zusätzliches aria-required-Attribut ist für Kontrollfelder mit einem required-Attribut nicht erforderlich und bestenfalls als "überflüssig" zu bezeichnen.
Die Kennzeichnung von Pflichtfeldern kann aber zu einem Problem werden, wenn mindestens ein Kontrollfeld aus einer Gruppe von Kontrollfeldern ausgewählt werden muss. In dieser Situation können Sie mit dem required-Attribut nicht arbeiten, weil Sie keine Möglichkeit haben, die Gruppe von Kontrollfeldern als erforderliche Eingabe auszuzeichnen. Sie sollten mit einer Gruppenbeschriftung wie das legend-Element arbeiten. Die Gruppenbeschriftung sollte einen Hinweis bieten, dass es sich um eine Pflichteingabe handelt:
Screenreader werden die Gruppenbeschriftung den Beschriftungen für die einzelnen Kontrollfelder voranstellen.
Das indeterminate-Attribut
Das indeterminate-Attribut bewirkt eine initiale Verschleierung des Zustands eines Kontrollfelds. Es handelt sich um eine rein visuelle Darstellung. Das Attribut führt nicht dazu, dass das Kontrollfeld "teilweise aktiviert" ist; dieser Zustand muss mit der indeterminate-Eigenschaft festgelegt werden (siehe oben).
Das checked-Attribut
Ein Kontrollfeld kann ein checked-Attribut erhalten. Das checked-Attribut ist nicht gleichbedeutend mit der checked-Eigenschaft. Mit dem Attribut wird eine initiale Aktivierung des Kontrollfelds vorgenommen, etwa wenn die Webseite geladen wird.
<p>
<label>
<input type="checkbox" checked>
Kontrollfeld wird beim Laden aktiviert
</label>
</p>
Bei Interaktion durch Nutzende wird die gleichnamige Eigenschaft des Kontrollfelds verändert. Das checked-Attribut verändert sich dadurch nicht.
Das aria-checked-Attribut
Es gibt ein aria-checked-Attribut, das aber für <input type="checkbox"> nicht vergeben werden darf.
<p>
<label>
<!--nicht nachahmen-->
<input type="checkbox" aria-checked="true">
Das ARIA-Attribut bewirkt nichts
</label>
</p>
Dieses Attribut hat keinen Einfluss auf den Zustand eines Kontrollfelds mit einem input-Element. Gemäß dem Modul „ARIA in HTML“ des HTML-Standards muss dieses Attribut bei Kontrollfeldern von Browsern ignoriert werden. Das Attribut ist für solche Kontrollfelder vorgesehen, die mit anderen Elementen wie Grafiken und der Rolle "checkbox" nachgebaut werden (siehe oben).
Das switch-Attribut
Kontrollfelder dürfen ein switch-Attribut erhalten. Mit diesem Attribut wird das Element zu einer Wechselschaltfläche. Wechselschaltflächen funktionieren dem Grunde nach wie Kontrollfelder, nur eignen sich Schaltflächen besser für die Bereitstellung von Funktionalität auf der Webseite, etwa für eine Filteroption in einer Suchmaske. Das switch-Attribut verändert dabei das Aussehen des Kontrollfelds.
Hinweis: Das switch-Attribut wird zum Zeitpunkt der Veröffentlichung dieses Beitrags nur in Safari unterstützt.
Kontrollfelder in Screenreadern
Gängige Screenreader identifizieren Kontrollfelder wie in der nachstehenden Tabelle aufgeführt, wenn sie per Tab-Taste fokussiert werden.
Hinweis: Screenreader bieten verschiedene Möglichkeiten, einzelne Elemente anzusteuern. Ein Kontrollfeld kann zum Beispiel direkt angesprungen werden oder alle Kontrollfelder können aufgelistet werden und per Pfeiltaste durchwandert werden. Als aktives Element kann ein Kontrollfeld auch mit der Tab-Taste fokussiert werden. Der gleiche Screenreader kann Kontrollfelder unterschiedlich identifizieren abhängig vom verwendeten Navigationsmechanismus.
| Beispiel | JAWS/Chrome | NVDA/Firefox | VoiceOver/Safari |
|---|---|---|---|
| Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + deaktiviert + Markierungsfeld oder Name des Elements + markiert + Markierungsfeld | |
| nicht fokussierbar | nicht fokussierbar | nicht fokussierbar | |
| Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + deaktiviert + Markierungsfeld oder Name des Elements + markiert + Markierungsfeld | |
| Name des Elements + Kontrollfeld + nicht aktiviert + erforderlich + ungültiger Eintrag oder Name des Elements + Kontrollfeld + Aktiviert + erforderlich | Name des Elements + Kontrollfeld + nicht aktiviert + erforderlich + ungültiger Eintrag oder Name des Elements + Kontrollfeld + aktiviert + erforderlich | Name des Elements + erforderlich + ungültige Daten deaktiviert + Markierungsfeld oder Name des Elements + erforderlich markiert + Markierungsfeld | |
| Name der Gruppe Pflichtfeld + Gruppe + Name des Elements + Kontrollfeld + nicht aktiviert oder Name der Gruppe Pflichtfeld + Gruppe + Name des Elements + Kontrollfeld + aktiviert | Name der Gruppe Pflichtfeld + Gruppierung + Name des Elements + Kontrollfeld + nicht aktiviert oder Name der Gruppe Pflichtfeld + Gruppierung + Name des Elements + Kontrollfeld + aktiviert | Name des Elements + deaktiviert + Markierungsfeld + Name der Gruppe Pflichtfeld + Gruppe oder Name des Elements + markiert + Markierungsfeld + Name der Gruppe Pflichtfeld + Gruppe | |
| Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + deaktiviert + Markierungsfeld oder Name des Elements + aktiviert + Markierungsfeld | |
| Name des Elements + Kontrollfeld + teilweise aktiviert | Name des Elements + Kontrollfeld teilweise aktiviert | Name des Elements + gemischt + Markierungsfeld | |
| Name des Elements + Kontrollfeld aktiviert oder Name des Elements + Kontrollfeld nicht aktiviert | Name des Elements + Kontrollfeld aktiviert oder Name des Elements + Kontrollfeld nicht aktiviert | Name des Elements + markiert + Markierungsfeld oder Name des Elements + deaktiviert + Markierungsfeld | |
| Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + deaktiviert + Markierungsfeld oder Name des Elements + markiert + Markierungsfeld | |
| Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + Kontrollfeld nicht aktiviert oder Name des Elements + Kontrollfeld aktiviert | Name des Elements + deaktiviert + Wechseln oder Name des Elements + aktiviert + Wechseln |
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
- muss das Kontrollfeld eine Zielgröße von 24px × 24px erreichen oder ausreichend Abstand zu anderen aktiven Elementen haben (Erfolgskriterium 2.5.8) und
- soll das Kontrollfeld eine Zielgröße von 44px × 44px erreichen (Erfolgskriterium 2.5.5).
Die Beschriftungen von Kontrollfeldern und die Kontrollfelder selbst müssen Mindestkontrastanforderungen erfüllen:
- Die Farbe der Beschriftung muss ein Kontrastverhältnis von mindestens 4,5:1 zu ihrer Hintergrundfarbe erreichen(Erfolgskriterium 1.4.3 und soll ein Kontrastverhältnis von 7,0:1 erreichen (Erfolgskriterium 1.4.6).
- Die Farben für das Kontrollfeld selbst unterliegen auch Mindestkontrastanforderungen. Wenn Sie das Kontrollfeld mit Grafiken oder CSS-Eigenschaften neu gestalten, dann müssen die Farben des Kontrollfelds sowie die Farbe des Häkchens jeweils mindestens 3,0:1 zu allen benachbarten Farben erreichen(Erfolgskriterium 1.4.11).
- Außerdem gibt es Anforderungen an den Fokusindikator. Wenn ein Kontrollfeld fokussiert wird und der Fokusindikator angezeigt wird, sollen die Pixel des Fokusindikators einen Unterschied im Kontrastverhältnis von 3,0:1 zu den gleichen Pixeln im nicht-fokussierten Zustand erreichen(Erfolgskriterium 2.4.13).