You just killed the accessibility!

[DimaGashko]

Issue description: I've no idea why you add the "tabindex" attribute to everything. It's too bad! You just killed keyboard navigation...

[coreymcollins]

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 (WebDevStudios/wd_s#481 (comment)) I've added some JS to do the following:

1. On load, all slides have their anchor tags and buttons set to tabindex=-1
2. 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
3. On slide change, all other slides have their anchor tags and buttons set to tabindex=-1
4. 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!

[ganlanyuan]

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.

[DimaGashko]

@ganlanyuan yeah you're right. I was tricked by focus: none on my project.