Accessability improvement for paginagion
Accessability improvement for paginagion
Feature request based on DataTables 1.13.1
Description of problem:
Our WAI experts suggested the following improvements to the pagination control:
- The active page should get the following attribute:
aria-current="page" - In front of the pagination, some "Screenread only text" like
<span class=sr-only“>to result page </span>should be added. The class "sr-only" is the "Screenreader only" class from Bootstrap 4. Unfortunately, the current DOM model does not allow such a modification - Inactive links (like the very first "Back" button or the "Ellipsis" (...) button) can be focused via the keyboard (and are read by Voice Over) but are inactive. The suggestion is to make these links not focusable (remove
hrefattribute, add attributerole="link", add attributearia-disabled="true")
I hope that makes sense 
Best regards,
Philip
This question has an accepted answers - jump to answer
Answers
Hi Philip,
Thanks for this feedback! I've made this commit to DataTables for the Bootstrap 5 integration which does the first and last items from your list. Do you fancy trying it and making sure it fits for your use? If it looks good, I'll make similar changes to the other integrations and the core control.
I haven't included item 2 yet as that is a bit more work (it needs a new translation string, and all the documentation that goes with that...). Is there an aria role that could be used for the paging control so that would make it obvious what it is and not need another string?
Allan
Hi Allan,
Thanks for the swift commit - highly appreciated.
I think that looks very good. Except the aria-disabled="true" for disabled buttons it is fine. So a simple
'aria-disabled': btnClass.indexOf('disabled') === -1 ? 'true' : null,should do the trick.Regarding point 2 I will do some further analysis
Hi Philip,
Brilliant - thank you. I've just made another commit that addresses that issue and expands the change to the other supported styling integrations.
Regards,
Allan
Hi Allan,
Sadly there is nothing that comes to our mind that would work without an additional string for item 2.
An alternative implementation is to add an
aria-labelattribute to the link, with a text like "Go to page [pagenumber]"hth, Philip on behal of Nicolas
An aria-label sounds like a good way to implement this. Thanks for the suggestion.
Allan
Hi Allan,
Thanks for the fixes so far. We now need to request one more tiny detail:
When using the Bootstrap 4 UI mapping, the "tabIndex" is not propagated correctly.
My suspicion is, that the line https://github.com/DataTables/Dist-DataTables-Bootstrap4/blob/master/js/dataTables.bootstrap4.js#L162 is the source of the error.
Changing this line from
'tabindex': settings.iTabIndex,to:
'tabindex': disabled ? -1 : settings.iTabIndex,seems to solve the issue.
Does that sound reasonable to you?
Maybe other UI mappings are also affected???
Thanks, Philip
Hi,
I totally agree with the change - thanks for flagging it up. I clean missed this before. I've also taken the opportunity to tidy up some lazy code in DataTable's built in paging button.
Commit is here and it will be in the nightly shortly.
Regards,
Allan
Hi Allan,
Wow, that was blazingly fast
Looking forward to the next release.
Next request coming up ;-)
// Philip