Here at Allyant, we see a lot of carousels and sliders, and we’ve learned a thing or two about making them accessible. Our expert Accessibility Engineers find them on most websites across all industries and company sizes, from small nonprofits to large e-commerce platforms. But unfortunately, most of them have one thing in common: they are largely inaccessible to people who use screen readers and keyboards.
Slick Slider is one of the first and most widely-used code libraries that made carousels and sliders easy for developers to create. Since it is one of the carousel libraries we see most often when helping our clients fix their websites, it made sense to us to try to help resolve some of the issues at the source. Unfortunately, Slick Slider has not been actively maintained in several years, with more than 1,000 open issues and nearly 200 pending pull requests, so contributing improvements directly is not a simple task.
To help out developers worldwide who are looking to pass accessibility audits and make their websites better for users with disabilities, we’re officially releasing an accessible fork of Slick Slider with all of our best guidance! This fork includes some great new features, improvements to existing features, and a slew of new customization options, all battle-tested and approved by Allyant’s team of native screen reader users and Accessibility Engineers! Best of all, it is backward compatible with nearly every existing configuration – just replace your hosted files or CDN file references, and you’re good to go!
Try it!
All of the original live demos have been recreated as closely as possible so you can experience and compare the new features and changes for yourself: https://accessible360.github.io/accessible-slick.
We’re also excited to share our growing collection of realistic code samples on CodePen to help you build common use cases like beautiful hero banners and PDP thumbnail galleries: https://codepen.io/collection/nwRGZk.
Start using accessible-slick today!
accessible-slick is fully open-source and can be downloaded directly from the Github repository. We’ve also released it as a package on NPM, so you can use it as a dependency in your project right now using the following command: npm install @accessible360/accessible-slick
Support and maintenance
We will do our best to keep accessible-slick up-to-date with the latest Slick Slider version and promptly respond to any bugs you might find. For general questions around usage, installation, and project administration, create a thread in the Discussions tab!
