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
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
- Linked product cards
- PDP product image with thumbnails
- Product tiles with quick view functionality
Flickity
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
- Linked product cards
- PDP product image with thumbnails
- Product tiles with quick view functionality
Owl Carousel 2
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
- Linked product cards
- PDP product image with thumbnails
- Product tiles with quick view functionality
Slick Slider
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
- Linked product cards
- PDP product image with thumbnails
- Product tiles with quick view functionality
Splide
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.