💡 Hinweis: Optimierung der Checkbox (Button) (2)

[deleonio]

InputCheckbox

https://public-ui.github.io/docs/components/input-checkbox
Die Checkboxen mit variant=button

• Bei Bedienung mit Leertaste wird die Seite gescrollt
• Rolle und Status werden nicht an die Accessibility API übermittelt, d.h. keine Sprachsteuerung möglich und keine korrekte Ausgabe mit dem Screenreader (der Screenreader gibt lediglich die Beschriftung als reinen Text aus)
• Während Dragon und Windows-Spracheingabe die anderen Checkboxen zumindest über ihren Namen ansteuern und bedienen können, ist das bei diesen Checkboxen nicht möglich
• Bei Kontrastanpassung nicht als Bedienelement zu erkennen
• Darüber hinaus ist der nicht gewählte Zustand mit „+“ nicht sinnvoll gekennzeichnet („+“ als Gegenteil von „-“ kann als positiv = gewählt angesehen werden)
• Falls diese Checkboxen mal die Rolle checkbox besitzen, würde folgendes Problem auftreten: Visuell sehen die Checkboxen wie Schalter aus, so dass Sprachsteuerung erschwert ist. Außerdem auch verwirrend für Menschen mit Restsehvermögen bei Nutzung eines Screenreaders (bzw. wenn der sehende Mensch zum Screenreader-Nutzer sagt: „Klick mal auf den Schalter“, aber das Element ist kein Schalter)
  Ursache: Fokus bekommt nicht die Checkbox, sondern ein generisches Element mit tabindex=0, in dem sich die Beschriftung befindet

Bei den Checkboxen mit variant=switch

• Bei Kontrastanpassung nicht als Bedienelement zu erkennen
• Lesereihenfolge falsch: Erst die Beschriftung und anschließend die Checkbox (tritt z.B. mit NVDA als Problem auf, nicht bei JAWS, da JAWS die Checkbox-Beschriftung nie dort ausgibt, wo sie sich im Quellcode befindet)
• Darüber hinaus ist der nicht gewählte Zustand mit „+“ nicht sinnvoll gekennzeichnet („+“ als Gegenteil von „-“ kann als positiv = gewählt angesehen werden)
• Hinweis: Besser wäre die Verwendung von role=switch

Bei den Standard-Checkboxen

• Lesereihenfolge falsch: Erst die Beschriftung und anschließend die Checkbox (tritt z.B. mit NVDA als Problem auf, nicht bei JAWS, da JAWS die Checkbox-Beschriftung nie dort ausgibt, wo sie sich im Quellcode befindet)
• Status „unbestimmt“ bei Kontrastanpassung nicht zu erkennen

• Beschriftung der Checkbox wird nicht angezeigt und auch nicht vom Screenreader ausgegeben

• Kontrast der gewählten Checkbox nicht ausreichend (bei Europa Component Library): roter Hintergrund zu grauem Häkchen 2,1:1

• Barrierefreiheitshinweis auf der Seite ist nicht sinnvoll:
  • Checkboxen können in scrollbaren Containern gruppiert werden
  • Checkboxen können in Pop-ups gruppiert werden (Schalter, der eine Liste der Checkboxen öffnet)
  • Lange Checkbox-Gruppen können mit Skip-Links versehen werden
  • Die Auswahllisten mit Mehrfach-Auswahl sind keine Alternative für Checkboxen aufgrund der stark erschwerten Bedienung bei Mehrfachauswahl (insbesondere bei nicht-zusammenhängender Mehrfachauswahl – das gilt für Maus- und Tastaturbedienung sowie für die Bedienung mit Screenreader oder Sprachsteuerung. Bezeichnend ist, dass die korrekte Bedienung nicht mal auf der Seite https://public-ui.github.io/docs/components/select erläutert wird, sondern bei der Mehrfachauswahl nur die zusammenhängende Mehrfachauswahl beschrieben ist). Darüber hinaus sind bei Mehrfach-Auswahl mit dem Screenreader die gewählten Listeneinträge nicht wahrnehmbar. Die Möglichkeit der Mehrfach-Auswahl ist bei den Auswahllisten nicht wahrnehmbar.

[Andreas-Englisch]

Für die ersten Teilprobleme gibt es schon #5546

[Andreas-Englisch]

Für Darstellungsfehler von "Unbestimmt" bei Windows-Kontrastanpassung existiert: #5548

[deleonio]

Related:

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