KeyTable without ordering

JeyP

Example:
$("#table").DataTable({
"keys": true,
"ordering": false
});

https://codepen.io/JeyP/pen/WNopGpW

Description of problem:

Hello,

I use KeyTable to make my tables accessible. Unfortunately, the whole thing does not work in the table header if "ordering" is set to "false". Since I use an ordering method that comes from the backend and is triggered by it, I cannot navigate through the table header with the keyboard.

Is there a way to activate KeyTable for the table header without having it set "ordering" to "true"?

Thanks and best regards
JeyP

allan

I don't quite get what you mean I'm afraid. KeyTable doesn't add any focus to the header, regardless of ordering on the table. We add a tabindex on the table header when ordering is enabled - is that what you mean?

Allan

JeyP

Hmm yeah, it could be tabindex aswell. Either way, is it possible to add tabindex and/or focus on table-header without ordering enabled?
Thanks!

allan

Sure:

$('#myTable thead th').attr('tabindex', 0);

Or just add the attribute in your raw HTML, which would allow it to work without Javascript.

However, I'm not clear on why you want that? My understanding is that software such as VoiceOver and Jaws doesn't need it - see Apple docs and Jaws docs.

In fairness I'm not a screenreader user, so I can't say for sure - although I haven dabbled a little while working on accessibility for DataTables, and keyboard navigation in the browsers didn't need any extra coding. If you have more detailed insight though, I'd very much welcome it, as any improvements to the accessibility of DataTables would be excellent.

Allan

JeyP

Thank you, i will try that for sure!

One of my tables has a peculiarity for which I need this function.
Due to the structure of my project, I cannot load the data into the table on via server side (approx. 100,000 entries with many dependencies), as this would take far too long. So I had to rebuild the "ordering" function, so that it sends a backend request. The loaded rows behave the same way as the "ordering" function. Because the table header sends an action, it must be possible to move through it with the keyboard.

I chose DataTable mainly because of the good a11y. You did a very good job with the implementation. Thanks a lot for this!

I have one more note, however: aria attributes are described very incorrectly in many sources and most screenreader/audit tools read them differently or not at all (example aria controls="tableId" on the "th"). Bootstrap has also mistakenly used this for many years, although that has more negative than positive benefits.

We have an a11y-audit test in a few weeks. If I have to make some changes to the DataTables, I'll let you know here again!

Thanks
JeyP

allan

Thank you - any feedback you have would be very welcome indeed!

Regarding aria-controls the Aria spec says:

Identifies the element (or elements) whose contents or presence are controlled by the current element.

Isn't the current use we have correct? Triggering one of those th elements causes the table to resort.

Allan