Multiple accessibility issues and solutions to fix

This is an issue about accessibility problems that are due to slick code structure and behaviors.

.slider :

• remove role=“toolbar” because it’s not relevant here. Sliders are not toolbars see https://www.w3.org/TR/wai-aria-1.1/#toolbar

.slick-prev, .slick-next :

• remove role=“button” as you already use button element,
• when slider on infinite loop mode content inside prev button on first slide need to be “Go to last slide” otherwise user will not know it’s looping
• when slider on infinite loop mode content inside next button on last slide need to be “Go to first slide” otherwise user will not know it’s looping
• by default I recommend to use “Previous slide” and “Next slide” as it’s more understandable that just “Previous” and “Next”
• by default I recommend to move focus on the new active slide (or first new one in case of multiple items) when user activate .slick-prev / .slick-next specially when there is focusable elements inside active slide
• move hidden label inside those button inside a <span class="sr-only"> see https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ because font-size=“0” can make the content not speakable in some screenreader

.slick-list :

• remove aria-live at least when autoplay is on otherwise it will announce the content everytime current slide is changed even is user is elsewhere on the page
• when not in autoplay I also recommend to remove it and instead to move focus on the new active slide (or first new one in case of multiple items) when user activate .slick-prev / .slick-next or dots navigation button specially when there is focusable elements inside active slide

.slick-track :

• remove role=“listbox” because it’s not relevant here. Sliders are not listbox see https://www.w3.org/TR/wai-aria-1.1/#listbox You can use role=“list” if you want a to provide list semantic but will make only sense if you have multiple item per slide.

.slick-slide :

• remove role=“option” because it’s not relevant here as listbox is not relevant You can use role=“listitem” if you want a to provide list semantic but will make only sense if you have multiple item per slide.
• replace aria-describedby by aria-labelledby because label inside corresponding dot is more a label than a description
• remove this aria-describedby/labelledby when there is no dots navigation

.slick-dots :

• remove role=“tablist” because it’s not relevant here. Dots navigation is not a tablist see https://www.w3.org/TR/wai-aria-1.1/#tablist
• on <li> inside it remove aria-hidden (because they need to be readable), role=“presentation” (because otherwise you loose <li> semantics, aria-selected (because not focusable), aria-controls (because not focusable)
• on button inside <li> remove role=“button” (because useless), tabindex=“0” (because useless)
• on button inside .slick-active add aria-current=“true”, this dot need also to visually be bigger than others otherwise there is information by color only
• by default I recommend to use “Slide x” where x= number as content inside button because it’s more understandable for users than 1,2,3, etc
• by default I recommend to move focus on the new active slide (or first new one in case of multiple items) when user activate button specially when there is focusable elements inside active slide
• move hidden label inside those button inside a <span class="sr-only"> see https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ because font-size=“0” can make the content not speakable in some screenreader

optional :

• could be great to have an option to add aria-describedby to button inside .slick-dots and to .slick-prev, .slick-next this way it will allow to add an id value of a hx before the carousel. Specially usefull when you have multiple carousel on the same page with different kind of content inside. For example if you have a news carousel then a products carousel and both of the have those title as hx user will know that there is “next slide news” button “next slide products” button and they are not the same
• on autoplay mode when focus is inside .slider you need to pause the carousel automatically otherwise user may not have enough time to read it before moving to next slide

[cespelage]

@ahmadalfy do you have an idea when the next version will be released? Many of the accessibility issues mentioned above are areas we’re trying to improve on our site for ADA compliance. Thanks in Advance!

[ahmadalfy]

There’re currently multiple PRs addressing accessibility concerns and we’re planning to merge them after review. Some are even not tagged yet. We will get this done with the next version