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
href
attribute, add attributerole="link"
, add attributearia-disabled="true"
)
I hope that makes sense
Best regards,
Philip
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-label
attribute 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