Active slide has tabindex="-1"

[ygatesoupe]

Active slide should be able to gain focus when tabbing with keyboard, so that its content can be rendered by screen reader (NVDA in my case).

The only way to get silde content rendered by screen reader is to click on the actual slide, which is not convenient for most screen reader users.

Active slide .slick-current should have attribute tabindex set to "0"

http://jsfiddle.net/07vdsj40/

[leggomuhgreggo]

Fiddle or it didn't happen

Edit: Thanks!

[ygatesoupe]

Hi, I added a Fiddle link, can we reopen this ?

[andypillip]

Not only for screen readers, also for keyboard users this means they can never use the arrow keys, since those only work when a slide has focus.

[lordfpx]

I confirm that bug too.

[kakt00c]

i have this issue on my project as well.

[ygatesoupe]

Hi, I fixed this on my slick fork 334fef8861d26c384bd2ca1d76e0842cb937cdba

[leggomuhgreggo]

@ygatesoupe thanks for the fork! Accessibility needs a big overhaul, and tab focus will definitely be a part of that. I want to go through and inventory the changes that need to be made, to make sure the a11y updates will be clean. If anyone is confident in their accessibility expertise and interested in helping identify all the issues, organize the PRs, and test that would be enormously helpful.

Appreciate everyone's feedback.

[nmitic]

Anyone found a fix for this? For me every slide except the active one has tabindex="-1" which means user can not use TAB to navigate through the dots.

This is what generated code looks like for all dots(slides) except the one that is selected.

<li role="presentation"><button type="button" role="tab" id="slick-slide-control04" aria-controls="slick-slide04" aria-label="5 of 6" tabindex="-1">5</button></li>

fiddle --> https://jsfiddle.net/8ojmk2fd/

This is not the case with SlickJS demos on --> http://kenwheeler.github.io/slick/

Is this a new bug, should I create new issues out of it?

edit: version 1.8.0

edit 2: Same bug is presented in version 1.8.1, but not on version 1.6.0 which is the one used on the slickJS web site.

edit 3: I was wrong Slick web site uses 1.8.0

[chipcullen]

I am seeing the same behavior that @nmitic is reporting, in 1.8.1.

[ZNS]

Tabindex is set to -1 for all buttons here for some reason:

https://github.com/kenwheeler/slick/blob/9325b64f3ce8af474e7958e7bf61345d16ffb3c9/slick/slick.js#L1361

Commented that out and it seemed to work, but haven't tested with different options.

[esr360]

How is a user supposed to tab through each slide? I am displaying slides in a 6 * 2 grid using the following settings:

settings: {
    rows: 2,
    slidesPerRow: 6
}

12 "slides" are effectively visible per slide, user is to be able to tab through each one to select/deselect but currently doesn't seem possible.

[smitterko]

After doing a lot of research on this and trying to figure it out, I was able to get keyboard navigation to work with Slick 1.8.1. Make sure both these options are set for your Slick slider:

focusOnChange: true, accessibility: true

Once those are set, you should be able to tab and hit the Enter key to navigate through the carousel.

Hope this helps someone else who is working on ADA compliance.

[televators]

@smitterko I really appreciate that. I'm having to do a crap load of accessibility work on a big government site and Slick is throwing a stick into the spokes big time. I realized that turning on focusOnChange on an autoplay slider hijacks focus back to the slider even if you've gone down the page and have moved focus outside the slider. So, obviously that's not good and makes the option unusable unless your page is literally just the slider. I also have multiple sliders on most pages so doubly troublesome. I'm still seeing how well the accessibility option helps. Leaving this for posterity in case someone takes up the mantle or does more work and sees this thread.

[mjhandy]

Well is 2022, and I'm in the same boat. I have focusOnSelect, and accessibility both set to true. When a cloned item is set to slick-active, the tab-index is still -1.

[seanensemble]

I found that the active slides with class slick-active can be tabbed through. You can change the number of active slides with property slidesToShow.

So if you are showing 3 slides at a time, this should work.

slidesToShow : 3,