💡 Hinweis: Optimierung der Checkbox (Button)

[deleonio]

• Unter „Beispiele“ werden Checkboxen ohne Beschriftung angezeigt (hideLabel). Die Beschriftung ist nur per Tooltip einblendbar. Dies ist nur in wenigen Fällen gemäß WCAG zulässig, z.B. wenn sich die Beschriftung der Checkbox innerhalb einer Tabelle aus dem Kontext (z.B. Spalten- und Zeilenüberschriften) ergibt. Hier wird aber so getan, als ob dies eine allgemein gültige Umsetzungsvariante wäre. Es fehlt eine entsprechende Warnung beim Attribut hideLabel. Außerdem fehlt ein Hinweis, dass für TastaturnutzerInnen die Beschriftung nicht wahrnehmbar ist, wenn sich die Checkbox im Status disabled befindet. Dann wird der Tooltip nur bei Mausbedienung eingeblendet (ist aber aufgrund seiner Transparenz schlecht sichtbar, siehe Abbildung).
• Das gilt analog für das Attribut hideError, mit der die Fehlermeldung unsichtbar gestaltet wird.
  
• Wenn sich die Checkboxen in einem iFrame befinden und der Tastaturfokus nicht im iFrame ist, können die Tooltips nicht mit ESC geschlossen werden (WCAG SC 1.4.13). Auf dieses Verhalten sollte zumindest hingewiesen werden, aber dazu findet sich auch auf der Seite zu den Tooltips nichts.
• Die Checkboxen vom Typ „Button“ besitzen im Standardlayout keinen Rahmen und keinen Hintergrund und sehen damit wie Text aus. Werden mehrere Checkboxen untereinander positioniert, sind sie nicht als bedienbar zu erkennen, sondern es entsteht der Eindruck, dass es sich um eine Liste handelt (<ul>, <li>).
• Die Checkboxen vom Typ „Button“ und „Switch“ können den Status „Unbestimmt“ besitzen. Dies ist jedoch sehr ungewohnt, da korrekt umgesetzt (Button mit aria-pressed und Switch mit role=switch) der Status nicht möglich wäre. Visuell ist die Darstellung des Status „Unbestimmt“ eine Herausforderung, weil dies kein bekanntes Pattern darstellt. Die NutzerInnen werden nicht verstehen, warum sie den initialen Status nicht bei Bedienung erneut erreichen können.
• Beim Lesen mit dem virtuellen Cursor von JAWS werden die Fehlermeldungen und Eingabehinweise (Hint text) zwei Mal ausgegeben.
• Beim Lesen mit dem virtuellen Cursor von JAWS werden die Beschriftungen zwei Mal ausgegeben, wenn sie verschachtelte Elemente enthalten.
• Beim Attribut error wär ein Hinweis sinnvoll, dass die Grafik vor der Fehlermeldung den Alternativtext „Fehler“ besitzt, so dass der Fehlerstatus dadurch bereits übermittelt wird.
• Beim Attribut access-key wäre ein Hinweis sinnvoll, dass nicht jeder Accesskey im Browser funktioniert (z.B. „e“ funktioniert nicht in Chrome)
• Beim Attribut tabindex wäre ein Hinweis sinnvoll, dass dies nur in wenigen Ausnahmefällen gesetzt werden soll und Werte kleiner 0 dazu führen, dass das Element nicht mehr mit der Tastatur erreichbar ist.
• Bei Verwendung der Windows-Spracheingabe („Nummern anzeigen“) werden viele Teile der Checkbox als separate Bedienelemente erkannt, z.B. der Stern (Pflichtfeldhinweis) und beim Typ switch der gesamte Bereich sowie der Status-Indikator.
• Die AAA-Kriterien der WCAG werden nicht erreicht, obwohl die BITV deren Einhaltung für bestimmte Inhalte und Seitenbereiche fordert (SOLL-Kriterium). So beträgt die Klickfläche der Checkbox mit versteckter Beschriftung 24x24 statt 44x44 px.

[deleonio]

Related:

• fix: checkbox button semantic #5653
• fix: checkbox button semantic #5654