Accessibility Improvements for Table Headers
Accessibility Improvements for Table Headers
Hi Allan,
We are continuously improving our WCAG compliance and Datatables is an important control.
We are using the Bootstrap 4 UI, so please bare that in mind, when reading the requests.
a) According to our experts, the "aria-label" in a <th> element is read out aloud for every table cell. So we would like to have it removed, if possible.
b) The sorting icons, that are added via CSS :before and :after are read out as "black upwards pointing triangle" - also for every cell. The best way to modify this, would be to place it in a separate element that uses the aria-hidden="true" attribute.
c) Additionally, if a column is clickable, the header text is placed in a <button> element, to indicate its "clickability".
We crosschecked with https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/ for best practices and it seems logical.
I know, that this might be a bit tricky...
What do you think of this?
Thanks and BR,
Philip
Answers
Set
language.aria.sortAscendingandlanguage.aria.sortDescendingto be empty strings. That will mean the label is just the column title.Is that still the case with the latest release which uses
content: "▲"/"";to try and stop exactly that?That would be a major change, and not one that I'm currently planning to make. It would significantly impact styling.
The plan with DataTables 2 is to make the sorting / header control far more flexible - including being able to wrap the sorting control into buttons while leaving the rest of the header alone.
Allan