Selektion in der TableStateless auf Barrierefreiheit prüfen

[deleonio]

Die initiale Umsetzung ist so weit abgeschlossen: #6389

Todo:

• Ergebnis des Tests hier zusammentragen

[sdvg]

@deleonio Von wem soll der Test-Report hier kommen? Ich schätze @anicyne war falsch verlinkt :)

[laske185]

https://develop--kolibri-public-ui.netlify.app/#/handout/basic

[cbraehmig]

Hier ein interessanter Artikel:

https://adrianroselli.com/2023/11/dont-turn-a-table-into-an-aria-grid-just-for-a-clickable-row.html

[cbraehmig]

Bezeichnung

Für die Bezeichnung der Checkbox zur Auswahl eines Datensatzes muss ein sprechender und eindeutiger Name gewählt werden. Im besten Fall ist ein eindeutiger Identifikator Bestandteil dieses Namens. Falls es keinen eindeutigen Identifikator gibt, ist eine Kombination aus mehreren Feldern zu nehmen die einen Doppelten Namen zu einem hohen Anteil ausschließt.

Die Kopfzeile über den Checkboxen muss einen Wert enthalten. Dieser sollte Standardgemäß auf „Zeile auswählen“ gesetzt werden, jedoch überschreibbar sein. In der Kopfzeile sollte darauf hingewiesen werden, dass diese spalte Interaktion bietet.

Ein Direktes Label für die Checkboxen wird nicht benötigt, weil der Zweck aus der Checkbox Bezeichnung und dem Tabellenlayout ersichtlich wird.

[cbraehmig]

Tastaturbedienung

Die Frage ist, ob die Checkboxen per Tabulatur oder mit den Pfeiltasten fokussiert werden können.

Die erste Überlegung war die Tastatursteuerung per Pfeiltasten zu definieren. Dagegen spricht das andere interaktive Elemente in der Tabelle aktuell nur per Tab erreichbar sind. Deshalb ist eine Bedienung per Tab aus Sicht eines einheitlichen Bedienkonzeptes sinnvoller.

Die Auswahl der Checkboxen erfolgt über die Leertaste.

[cbraehmig]

Sonstiges

Der Zustand, ob eine Checkbox ausgewählt ist, soll ausgegeben werden (Default bei derzeitiger Checkbox).

Die Positionierung der Checkbox Spalte muss immer am Anfang der Tabelle liegen

Die Klickfläche muss die AAA Kriterien (44x44 Pixel) erfüllen.

[fohi17]

Test des Beispiels passt für mich barrierefreiheitstechnisch. Wenn die erste Spalte noch ne Überschrift kriegt hab ich nichts zu meckern.
Ansonsten hab ich dem nichts hinzuzufügen.

• Bezeichnung passt, bis auf die Spaltenüberschrift
• Bedienung mit TAB passt (für dieses Beispiel gut. Für eine umfangreichere Tabelle mit mehreren interaktiven Elementen in einer Spalte müsste man sich das nochmal überlegen denke ich).
• Zustand wird ausgegeben
• Position passt
• Klickfläche passt