Slick: Accessibility Updates

[Ex0r]

short description of the bug / issue, provide more detail below.

As mentioned in other issues, there are some lacking accessibility features in the current version of slick. Using the WCAG and W3 as a 'gold standard' for carousels, there are a few outlined issues that would need to be addressed:

Play/pause controls. This could be remedied by making configurable settings to enable play/pause controls that allow the carousel to be paused/played. These would work similarly to how the next/previous and dots work. You can do this outside of the slick.js main stack, but in doing so there are edge cases where the slider still plays or doesn't resume play. (and for accessibility, all edge cases need to be covered).

Hiding controls on transition. Leaving the controls available while the slide transitions is confusing to screen readers, and people using screen readers. Building functionality into the main slick.js stack to auto-hide controls when a transition is happening would remedy this. (next/previous, buttons, play/pause controls)

Alert the screen reader when a new slide becomes visible. This triggers to the screen reader that a new slide is available by audibly playing back 'Slide x of y'.

More Details

I would be interested in helping with some of these issues, but my JavaScript knowledge isn't the strongest, nor is my understanding of the slick.js codebase so my help aside from testing and feedback is pretty limited.

Accessible websites are starting to become the norm now, so I feel it's important that all of the tools we use are updated to keep accessibility in mind.

Here is the W3 resource to making accessible carousels. Using this as a guide, I think we could get slick to meet these standards and make it more accessible for everyone:

https://www.w3.org/WAI/tutorials/carousels/

[kwilkins]

Voicing support for this

• screen reader and narrator issues not reading buttons or if they're disabled
• items in the carousel view can't be tabbed properly, or if they can be focused they aren't brought to the viewable center