Tiny-slider: You just killed the accessibility!
__Issue description__: I've no idea why you add the "tabindex" attribute to everything. It's too bad! You just killed keyboard navigation...
DimaGashko
All 3 comments
We've been looking at working Tiny Slider into our WordPress starter theme at WebDevStudios. One of the pain points of a lot of carousels we've tested is accessibility and the issue with trying to tab through a site and _not_ break or get stuck in a carousel.
We had the same issue you and others noted where tabbing through slides with links/buttons in them just kind of broke everything visually.
In this update in a yet-to-be-reviewed PR (https://github.com/WebDevStudios/wd_s/pull/481#issuecomment-514283367) I've added some JS to do the following:
- On load, all slides have their anchor tags and buttons set to tabindex=-1
- Also on load, any anchor tags and buttons inside of the initial slide are set to tabindex=0 so they can be naturally tabbed to
- On slide change, all other slides have their anchor tags and buttons set to tabindex=-1
- Also on slide change, the new current slide has its anchor tags and buttons set to tabindex=0 so they are tab-able
It's a first pass so it can likely be cleaned up and I want to do some stress testing, but in my tests thus far it's allowing me to tab through ONLY the active slide and not get caught up in the never-ending tab madness. It sets the links/buttons in inactive slides to tabindex=-1 so they never get picked up when tabbing, and they only become keyboard accessible/available when their parent slide is active.
Wanted to share it as it sounds like we were fighting the same issue and I thought it might be of some help to you and others!
coreymcollins
on 23 Jul 2019
Check out #4
tabindex="-1" was added so that user doesn't necessarily Tab through all the dots and controls in order to get the right one.
I was referring to http://mmckinnon.com/blog/2015/accessible-carousels-part-2.
ganlanyuan
on 6 Sep 2019
@ganlanyuan yeah you're right. I was tricked by focus: none on my project.
DimaGashko
on 17 Sep 2019
Related issues
notrealdev
路
5Comments
stu-fu
路
3Comments
hernimen
路
3Comments
afberg
路
4Comments
craigryan
路
5Comments
Most helpful comment
We've been looking at working Tiny Slider into our WordPress starter theme at WebDevStudios. One of the pain points of a lot of carousels we've tested is accessibility and the issue with trying to tab through a site and _not_ break or get stuck in a carousel.
We had the same issue you and others noted where tabbing through slides with links/buttons in them just kind of broke everything visually.
In this update in a yet-to-be-reviewed PR (https://github.com/WebDevStudios/wd_s/pull/481#issuecomment-514283367) I've added some JS to do the following:
It's a first pass so it can likely be cleaned up and I want to do some stress testing, but in my tests thus far it's allowing me to tab through ONLY the active slide and not get caught up in the never-ending tab madness. It sets the links/buttons in inactive slides to
tabindex=-1so they never get picked up when tabbing, and they only become keyboard accessible/available when their parent slide is active.Wanted to share it as it sounds like we were fighting the same issue and I thought it might be of some help to you and others!