accessible-slick: A new accessible carousel library
Here at Accessible360, we see a lot of carousels and sliders, and we’ve learned a thing or two about making them accessible. Our team of expert Accessibility Engineers finds them on most websites across all industries and company sizes, from small nonprofits to large e-commerce platforms, and practically all of them have one thing in common: they are largely inaccessible to screen reader and keyboard users!
One of the first and most widely-used code libraries that made carousels and sliders easy for developers to create is Slick Slider. Since it is one of the carousel libraries that 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 around the world 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 Accessible360’s team of native screen reader users and Accessibility Engineers! Best of all, it is backwards compatible with nearly every existing configuration - just replace your hosted files or CDN file references and you’re good to go!
All of the original live demos have been recreated as closely as possible so you can experience and compare all of 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 version of Slick Slider, and to promptly respond to any bugs you might find. For general questions around usage, installation, and project administration, create a thread in the Discussions tab!