Accessibility Issue(ISO VoiceOver, Android TalkBack)

1. When VoiceOver or TalkBack is on, only the first item of the carousel cant be focused, if the previous or next button has be clicked, the items current presented can’t be focus.
2. And there is weirder thing that some links of the items is not clickable.
3. If item div only include img with tabindex=“0”, when item be focused, then Slick recalculates position, but not update Prev and Next arrows. (Add this on 2/24/2016)

<div class="carousel">
    <div class="item">
        <img tabindex="0" src="" alt="Uploaded try-on image">
    <div>
    <div class="item">
        <img tabindex="0" src="" alt="Uploaded try-on image">
    <div>
    ...
</div>

(4). (Suggestion:) When the arrow button is disabled, the element should add tabindex=“-1”, so the keyboard is not able to focus it. (Add this on 2/24/2016)

[bfrable]

@leggomuhgreggo

        _.$slideTrack.attr('role', 'presentation');

        _.$slides.not(_.$slideTrack.find('.slick-cloned')).each(function(i) {
            $(this).attr('role', 'tabpanel');

            //Evenly distribute aria-describedby tags through available dots.
            var describedBySlideId = _.options.centerMode ? i : Math.floor(i / _.options.slidesToShow);

            if (_.options.dots === true) {
                $(this).attr('aria-describedby', 'slick-slide' + _.instanceUid + describedBySlideId + '');
            }
        });

changing role from listbox to region and role from option to tabpanel fixes this.

[bfrable]

So I encountered this issue and came across whats causing it.

    _.$slides.not(_.$slideTrack.find('.slick-cloned')).each(function(i) {
        $(this).attr({
            // 'role': 'option',
            // 'aria-describedby': 'slick-slide' + _.instanceUid + i + ''
        });
    });

If I comment out those two lines, everything works as expected. I’m not an accessibility expert, but I think screenreaders read role=option as a combo / select box and is making the slider as a whole clickable.

https://www.w3.org/TR/wai-aria/roles#option

@leggomuhgreggo slicktrack is getting a role of listbox and then each slide is getting a role of option. This is whats giving the “broken” experience. It might be a good idea to make these options so developers can achieve the experience they’re looking for.

Making each slide a tabpanel and giving slicktrack a role of region should be suffice though.