Accessibility findings from ARC Toolkit with pagination controls

mc2002tii

Using DataTables 2.0.8 with Bootstrap 5 integration, ARC Toolkit complains about a few things with the pagination controls. Some of them are nitpicky, but I do think there are a couple legitimate findings that are a side-effect of having the pagination controls be anchor elements instead of buttons:

Findings:
1. The "aria-label" attribute is not allowed on anchor elements. Affects the first, previous, next, and last buttons in the pagination control when they are disabled.
2. Missing href attribute on anchor elements. Affects the first, previous, next, and last buttons in the pagination control when they are disabled.

I don't know how much work it would be to refactor the pagination controls to buttons instead of anchors (not simple I imagine), but that would be better semantically and would avoid some of these problems.

allan

DataTables' own styling does use button elements for exactly this reason. However, the Bootstrap documentation shows that it should use a elements, which is why the DataTables / Bootstrap 5 integration uses those tags.

I think question 1 might be best directed at the Bootstrap team - I'd be interested to know the outcome of that and if I should change anything in DataTables.

The second point about the missing href - good point. I'll see if I can do something about that.

Allan

mc2002tii

Thanks. I'll contact the Bootstrap people on the pagination example. Their code is kind of hacky to try to get around the problem of not being able to disable an anchor or provide aria-labels on them.

In the meantime could you wrap the controls in a nav instead of a div and add an aria-label with some explanatory text? I forgot that one other finding we got was for a lack of context when a screen reader read the page controls (i.e. it would just say "1" with no clue about what that meant).

allan

add an aria-label with some explanatory text

That has already been committed and will be released as part of DataTables 2.1. It will need to be configured with the new language.aria.paginate.number property.

In the meantime could you wrap the controls in a nav instead of a div

Yes - I'll make that change and post back when done.

Allan

mc2002tii

Thank you. I really appreciate how responsive you are.

I submitted a github issue to the Bootstrap team. We'll see how that goes; it looks like they've shot down a couple tickets about the pagination design in the past, but it has been a few years so maybe they'll be more open to it this time.

mc2002tii

You found my Bootstrap issue (https://github.com/twbs/bootstrap/issues/40579). I guess in their minds the pagination control is primarily for navigation between pages. But they did point out that it does work with button elements. You just have to not include the "btn" class like I did when I tested (<grumble>because that's what you do with every other use of buttons in Bootstrap</grumble>)

allan

Lol. I would have made that mistake as well I think!

I'm in the middle of some other stuff that I need to get passing the unit tests first, but when done I'll look at making those two changes.

Allan

mc2002tii

Thanks!

allan

nav element commit here and button tag for Bootstrap 5 commit here.

Both will be in the 2.1 release, which I expect to make in about two weeks time (holiday for a week and no way I'm pulling the release trigger before walking out the door ).

Allan

mc2002tii

Thank you! Enjoy your time off.

allan

I'll have my laptop (no rest for the wicked as they say), but thank you

Allan