metafizzy / metafizzy/flickity
Page dots are not accessible
- Dominant language
- JavaScript
- Stars
- 7.6k
- Forks
- 593
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
Research direction
Start with the default CodePen test case linked in the issue and locate the page-dot implementation in the Flickity source. Check keyboard access, screen-reader semantics, activation with Enter, and focus styling. Done means the dots are operable and announced as controls with visible focus styling, with the behavior verified using keyboard and a screen reader.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100