Accessability improvement for paginagion

Accessability improvement for paginagion

phaxphax Posts: 18Questions: 5Answers: 0
edited January 2023 in Feature requests

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 attribute role="link", add attribute aria-disabled="true")

I hope that makes sense :)
Best regards,
Philip

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    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

  • phaxphax Posts: 18Questions: 5Answers: 0

    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

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    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

  • phaxphax Posts: 18Questions: 5Answers: 0

    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

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    An aria-label sounds like a good way to implement this. Thanks for the suggestion.

    Allan

  • phaxphax Posts: 18Questions: 5Answers: 0

    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

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin
    Answer ✓

    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

  • phaxphax Posts: 18Questions: 5Answers: 0

    Hi Allan,
    Wow, that was blazingly fast :smile:
    Looking forward to the next release.

    Next request coming up ;-)

    // Philip

Sign In or Register to comment.