Page dots are not accessible

[borisdiakur]

The page dots are not accessible for three reasons:

1. They are not tabable. They are list items. You can fix this in several ways. Either give them a tabindex="0" or make them links or (and this is what I would recommend) make them real buttons.

2. If you are able to tab to a dot (because let’s say you applied a tabindex="0" to it), a screen reader will still recognise it as a list item and not as a button and read it out accordingly, which may confuse the user. Again you can fix this in several ways. Either you give the dot a role='button' or (and this is what I would recommend) make it a real button.

3. Let’s pretend you can tab to a dot and the screen reader recognises it as a button (because you went with the tabindex="0" + role="button" solution). Now you still cannot activate the dot by pressing enter on the keyboard. And again you can fix this in a few ways: Either you add a keyup event handler and check for the enter key code or (surprise surprise) you make the dot a real button (which will out of the box trigger the click event handler on a keyup enter).

To sum up: If you want to avoid styling issues and maybe need to account for backwards compatibility, give the dot a tabindex="0", a role="button" and apply another keyup event handler for the enter key. Other than that use real buttons.

And also please do not forget to apply the same or similar focus styles to the dots as to the previous and next page buttons.

To reproduce the issue simply visit the default pen below and try to use the dots via keyboard. Additionally (as a bonus, kind of) you can switch on a screen reader of your choosing.

Test case: https://codepen.io/desandro/pen/azqbop

[desandro]

Thanks for writing up this issue. Lots of great points here!

Changing Flickity page dots from <li> to <a> or <button> would be a significant change, one that I'd like to do in a major version. So this will have to wait a while. I promise to address this issue when that time comes.

[hlmurray]

@desandro Is there any update on this?

[tbredin]

Agree these should be changed to button elements, this would be the most appropriate for this use case.

I'd also love to see the contained text made configurable. Thanks

[desandro]

copy/pasting @tbredin 's proposal from #1116

---

I wanted to raise an issue that — without building an entirely custom navigation — the page dot text doesn't appear to be customisable, and the default text is not particularly accessible.

Proposal:

• Add config options for pageDotText and pageDotTextSelected
• Default these to something more descriptive, I would like to suggest something like:
  • pageDotText: "Move carousel to page ${pageIndex}
  • pageDotTextSelected: "Carousel page ${pageIndex}: currently active"

Additionally, I agree with this issue about the use of li's, and would like to suggest that these would be most appropriately changed to button elements since they do not navigate you away from the page or anchor you to a region on the page (so an a element is not quite appropriate either).

[mdoxwp]

Hey @desandro - am checking in about this. I don't see the carousel's being /button/'s yet. I don't see it fixed/changed on the demo page either. Am I missing it somewhere? I see you've committed the change.

[HasanArmstrong]

Hi team. We had an accessibility audit and the Flickity dots came back as being inaccessible. To avoid legal issues we will need to get this fixed or move to another library. Any ETA on when this will be fixed? @desandro

Thank you

[jademh]

+1 - would also like to see this change

[sheepysheepy]

+1 We also failed an accessibility audit, the suggested compliant code was the following:

<ol class="flickity-page-dots">
<li class="dot is-selected" aria-current="step"><button aria-label="Go to slide 1 of the image carousel"></button></li>
<li class="dot"><button aria-label="Go to slide 2 of the image carousel"></button></li>
<li class="dot"><button aria-label="Go to slide 3 of the image carousel"></button></li>
(...)
</ol>