[a11y] 9.1.3.1e - Data tables implemented correctly

[tbsbdr]

• Context: The Web UI should be accessible according to the WCAG2.1 /BITV 2.0 guidelines. The number in the title relates to the test-steps: https://www.bitvtest.de/bitv_test/das_testverfahren_im_detail/pruefschritte.html
• "Status" relates to the evaluation scheme https://www.bitvtest.de/bitv_test/das_testverfahren_im_detail/verfahren.html#c1262
• "a11y" is short for accessibility

---

General notes

Pages 1 to 3:

Issue A

The current implementation of sortable column headings inside the tables lead to a wrong interpretation from screen readers when navigating through data cells. The screen reader announces the text of the span element and also the label of the button ( aria-label ) together as the column header - e.g. "Größe Nach size sortieren".

It would be better to waive the span element and use only the words "Name", "Größe" and "Geändert" as button labels. The information about the sort functionality will be conveyed to the users by using the aria-sort-attribute.

For sample implementation see

• https://dequeuniversity.com/library/aria/table-sortable
• https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html (Example 2).

Note: The labels of the buttons / column headings ( aria-label ) contain english words what makes it more complicated for the user to unterstand the content - e.g. "Nach mdate sortieren".

Issue B

Column 1 has a column heading "Alle Dateien auswählen" - this will also be read by a screenreader and leads to bad comprehensibility (Column 1, Row 2: "Alle Dateien auswählen Ordner auswählen").

Status: partly fulfilled