Verwendung
Elemente vom input type="checkbox" dienen der Auswahl einer oder mehrerer mehrerer Werte aus einer Wertemenge. Checkboxen können ebenso verwendet werden, um weitere Optionen ein- oder auszuschalten oder darüber je nach Aplikationslogik weitere Formularbereiche ein- und auszublenden. Wenn nur ein einziger Wert aus der Menge ausgewählt werden kann, so müssen hierfür Radiobuttons verwendet werden.
Checkboxen sollen nicht vorausgewählt sein wenn eine Maske lädt, da Nutzende hierdurch Gefahr laufen, diese Formularelemente zu übersehen oder falsche Angaben abzuschicken.
Bei Fehlern in einer Gruppe von Checkboxen wird die Fehlermeldung an der Gruppe präsentiert. Dabei ist zu beachten, dass eine einzelne Auswahl in einer Gruppe von Checkboxen nicht bereits zu einem Fehler führen darf.
Bei Fehlern an alleinstehenden einzelnen Checkboxen wird die Fehlermeldung im unmittelbaren Zusammenhang mit dem zugeordneten Label gezeigt.
Wenn keine fachlichen Gründe dagegen sprechen, dann sollte eine Gruppe von Checkboxen alphabetisch sortiert sein.
Beschriftung
Felder vom input type="checkbox" benötigen zwingend eine Beschriftung, in welcher der Zweck und ggf. auch das erwartete Format beschrieben wird. Dies wird über ein implizit oder explizit verknüpftes <label> erreicht.
Labels von Checkboxen stehen, wie bei Radiobuttons, grundsätzlich rechts neben dem Formularelement.
Wenn kein ausreichender Platz für ein sichtbares Label zur Verfügung steht (z. B. in Tabellen), dann ist auch ein äquivalentes aria-label oder ein visuell nicht sichtbares <label> zulässig. In diesem Fall muss darauf geachtet werden, dass sich der Zweck des Feldes visuell und programmatisch aus dem Kontext ergibt, wie zum Beispiel in Tabellen über einen entsprechend betexteten Spalten- oder Zeilen-Kopf.
Innerhalb einer Gruppe von Checkboxen muss auf eine konsistente und einheitliche Beschriftung geachtet werden: Die Labels sollen entweder ein vollständiger Satz, oder eine Phrase, oder ein einzelnes Wort mit einheitlicher Groß- und Kleinschreibung sein. Mischformen sind nicht erwünscht.
Tooltips
Einzeln stehende Checkboxen können ein zugeordnetes Tooltip erhalten, das programmatisch zugeordnet nach ihrem Label steht. Bei Gruppen von Checkboxen können die Tooltips auch der gesamten Gruppe zugeordnet werden, z. B. über entsprechende Platzierung an einem Fieldset bzw. einer Legend.
Inaktive Elemente
Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Vorauswahlen.
Readonly-Checkboxes sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt.
Do’s and Dont’s
So:
- Wenn Mehrfachauswahlen möglich sind
- Wenn eindeutige und singuläre Sachverhalte bestätigt werden müssen
- Gruppierung zusammenhängender Optionen
So nicht:
- Wenn nur eine Auswahl möglich ist und sich die Optionen gegenseitig ausschließen
- Inhaltlich nicht zusammenhängende Auswahlmöglichkeiten gruppieren
