Skip to main content Skip to Get in Touch or Chat

Building Accessible Carousels and Sliders

Carousel with three visible slides containing Bob Ross quotes, with previous and next buttons and slide dot buttons for navigation

At Accessible360, we help our clients fix inaccessible web carousels and sliders practically every day. In fact, in our experience, carousels and sliders are some of the most common sources of accessibility barriers that we find, regardless of the size or type of website they are found on!

As part of our mission to help make the web Accessible For All™, we’ve been working hard to create resources for our clients to help them build more accessible carousels and sliders, and now we’d like to share that content with you!

At this year’s Open Source North conference on May 20th (Global Accessibility Awareness Day!), our Developer Advocate, Jason Webb, and Senior Accessibility Engineer / Legal Lead, Aaron Page, gave a talk titled “What We Learned From Trying to Build an Accessible Carousel”, in which they shared some great “best practices”, design tips, and code samples that could apply to ANY carousel or slider.

Get Started Today!

We’re here to help make your digital properties more accessible. So, we’ve created a clear, detailed guide on how to build an accessible carousel or slider for your organization.

Best practices are great to have, but most carousels and sliders are built using open-source packages like Slick Slider, Flickity, Splide, and more, each with their own limitations and quirks that can make it even more difficult to build an accessible carousel or slider.

To help make this a little bit easier, we’ve released a set of realistic, ready-to-use code samples for some of the most popular packages that you can copy and paste TODAY!

Screenshot of CodePen collection of accessible carousel and slider code snippets.

Try Using accessible-slick!

If you’re building a new project and have been thinking about using Slick Slider to build out your carousels or sliders, try using Accessible360’s accessible-slick package instead! It includes all of the best practices we describe above, so you can spend more time building cool content and less time fixing accessibility issues.

Keep in mind that Slick Slider is no longer being maintained. So, if there are non-accessibility related features you’d like to see that aren’t part of the Slick Slider package, we would recommend using a different package.

Below are a few links to get you started with accessible-slick:

← Return to the blog