Description
openedon Sep 7, 2021
What
Improve focus when interacting with the tour via tab + space/enter keys to navigate.
An alternative here would be to show a static text (eg: 3/8) instead of the navigation dots
Why
Currently navigating the tour contents via tabbing feels cumbersome and requires many key presses to reach the various controls. Navigating by clicking the little dots or using the "Next" button throws the user back to the top, and they'd need to traverse all the focusable elements to continue. See the gif below, trying to progress through the slides via tab + space/enter.
p.s. we are improving keyboard navigation via the use of left/right arrow keys in a separate issue. This is in addition.
How
There are potentially a couple of ways to approach this, and some investigation may be worth it. A couple of pointers to guide the work a bit ( props to @razvanpapadopol ):
- Some official W3C documentation on video carousels that deal with similar concepts: https://www.w3.org/TR/wai-aria-practices-1.1/#_video-carousel
- Ideally, if some element is clickable with a mouse, they should be able to select it also using the keyboard. So it might mean implementing either a tabs pattern or a buttons pattern for the little dots.
- Let's also check out the Gutenberg guides and their accessibility to see if there's anything there we can refer to.