Accessibility Improvements for Table Headers

phax

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

allan

a) According to our experts, the "aria-label" in a <th> element is read out aloud for every table cell.

Set language.aria.sortAscending and language.aria.sortDescending to be empty strings. That will mean the label is just the column title.

b) The sorting icons, that are added via CSS :before and :after are read out as "black upwards pointing triangle" - also for every cell

Is that still the case with the latest release which uses content: "▲"/""; to try and stop exactly that?

c) Additionally, if a column is clickable, the header text is placed in a <button> element, to indicate its "clickability".

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