Carousels aren't effective or popular with real users, but sometimes you just have no choice! At Accessible360, we see carousels on client sites every day, and we've found them to be a common source of accessibility barriers practically every time they are used.
To help make a difference for end users and developers sooner rather than later, we're releasing this set of realistic, ready-to-use code snippets for popular carousel packages that you can start using right now to create more accessible carousels and sliders! So far we have snippets for:
If you'd like to see snippets for other carousel packages or use cases, please let us know!
All of these code snippets can also be found over on CodePen in this collection (they are exactly the same!).
accessible-slick is a drop-in replacement for the classic Slick Slider package that adds a layer of built-in accessibility improvements. Since practically all of its accessibility improvements are baked right into the package, these code snippets end up being the smallest and simplest.
- Hero banner - live demo and source code
- Linked product cards - live demo and source code
- PDP product image with thumbnails - live demo and source code
- Product tiles with quick view functionality - live demo and source code
Flickity has some good things going for it, but also a few major issues for accessibility. Avoid using the wrapAround and accessibility options, and be sure to hide all the interactive content inside of each slide.
- Hero banner - live demo and source code
- Linked product cards - live demo and source code
- PDP product image with thumbnails - live demo and source code
- Product tiles with quick view functionality - live demo and source code
Owl Carousel 2 is officially deprecated and should not be used for new projects! Avoid using the inaccessible built-in slide dots, and be sure to use the events API to hide all non-visible slides.
- Hero banner - live demo and source code
- Linked product cards - live demo and source code
- PDP product image with thumbnails - live demo and source code
- Product tiles with quick view functionality - live demo and source code
Slick Slider is perhaps the most widely-used carousel package, even though it has been abandoned (though not officially deprecated) by its author. Ironically, you should avoid the accessibility option, since it actually makes the markup worse for disabled users! Be sure to use the latest version (1.8.1 as of May 2021), which includes some important updates that affect accessibility. Custom JavaScript will be needed to ensure that non-visible slides are actually hidden.
- Hero banner - live demo and source code
- Linked product cards - live demo and source code
- PDP product image with thumbnails - live demo and source code
- Product tiles with quick view functionality - live demo and source code
Splide may be the most accessible package of all of these, with good use of semantic HTML. Avoid the keyboard and slideFocus options. Some minor work needs to be done to ensure that non-visible slides are fully hidden.
- Hero banner - live demo and source code
- Linked product cards - live demo and source code
- PDP product image with thumbnails - live demo and source code
- Product tiles with quick view functionality - live demo and source code
The research and code snippets provided in this article were made by Accessible360, whose expert accessibility engineers were invaluable in providing their insight, feedback, and time on this topic.
If your company is looking for an accessibility partner to help bring your product to the next level through live user audits, monitoring, training, or remediation support, then get in touch today!
