Accessibility problems with pagination controls

[mc2002tii]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Pagination controls use anchor elements instead of buttons which leads to accessibility issues. Anchor elements don't easily support being disabled and it is harder to provide context with them (meaning "1" for a page number doesn't meaningfully convey what it does to a screen reader). Button elements would be a lot easier to work with to convey the correct meaning for the various elements of the pagination control.

Reduced test cases

https://datatables.net/examples/styling/bootstrap5.html

ARC toolkit complains about the lack of href attributes on the disabled pagination links. JAWS does not provide any context on the page number links.

The author of DataTables suggested I come here for feedback because he is just following your example on how to use the pagination control.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

[patrickhlauke]

Pagination controls use anchor elements instead of buttons which leads to accessibility issues.

They're controls that navigate you to another page. So (unless you're using the component but hijacking it to use JS to provide in-page dynamic changes) links are the most appropriate element to use.

Anchor elements don't easily support being disabled

True, links don't have the same mechanism as a button/form control. But generally, a "disabled" link is simply text that is non-focusable and non-interactive.

it is harder to provide context with them (meaning "1" for a page number doesn't meaningfully convey what it does to a screen reader)

if you want to provide more context, the mechanisms there are exactly the same as for buttons - for instance, adding explicit aria-label, the same way you can/would for a button if that's what you're after.

https://datatables.net/examples/styling/bootstrap5.html

In this case, they are changing the behaviour here - they're not links anymore, but in their case they should indeed replace them with buttons.

ARC toolkit complains about the lack of href attributes on the disabled pagination links.

then ARC toolkit is wrong, because anchors without href are perfectly valid HTML.

JAWS does not provide any context on the page number links.

this wouldn't be any different if you swapped them out for buttons. unless the author provides some context (for instance, by adding an explicit aria-label, or wrapping the pagination in something like a named <nav> or role="region"), JAWS will likewise just announce them as "1, button" instead of "1, link".

he is just following your example on how to use the pagination control.

the documentation should probably explain that authors should adapt the pattern if they're planning to make it do stuff dynamically on-page (and use <button> then), but this alone won't make any more substantive difference to how accessible the controls are (other than giving a bit more of a hint of what might be happening when activating things ... when activating a link, a user will expect to navigate to a new page, or section of the current page; when activating a button, they're more likely to expect some action to take place - though in the case of the datatables example there, the author should also consider either using a live region to announce that the page was updated, or even explicitly moving focus back to the start of the table in response to activation.

[mc2002tii]

I think the problem with saying buttons with the pagination classes are appropriate in some situations is that the layout doesn't work ideally. At least in my limited testing trying to convert the pagination example code to buttons just ended up with a bunch of buttons (with all 4 corners radiused) bunched together instead of appearing like a button group.

[AllanJard]

Hi! DataTables author here. I used <a> tags for the DataTables / Bootstrap integration because that is the markup shown for the paging control in the docs. I hadn't realised that it would work with <button> tags as well. Given that DataTables updates the page dynamically rather than links, and from what you say, <button> tags would be more appropriate.

I've had that piece of feedback a number of times - I think it is noted by automated tests such as ARC. I don't immediately recall anyone explicitly saying they use a screenreader and it was causing them problems.

[patrickhlauke]

I think the problem with saying buttons with the pagination classes are appropriate in some situations is that the layout doesn't work ideally. At least in my limited testing trying to convert the pagination example code to buttons just ended up with a bunch of buttons (with all 4 corners radiused) bunched together instead of appearing like a button group.

You sure? from my testing (just quickly replacing the <a> elements with <button> in the docs page) it all works seamlessly

[mc2002tii]

Ah, nice! I overthought it and added "btn" to the class list when I did my test.