KeyTable without ordering
KeyTable without ordering
JeyP
Posts: 6Questions: 2Answers: 0
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
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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
tabindexon the table header when ordering is enabled - is that what you mean?Allan
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!
Sure:
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
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
Thank you - any feedback you have would be very welcome indeed!
Regarding
aria-controlsthe Aria spec says:Isn't the current use we have correct? Triggering one of those
thelements causes the table to resort.Allan