A website carousel (also called a “slider" or “slideshow") presents a collection of items one at a time. They’re a common feature on eCommerce websites and blogs — but from an accessibility perspective, carousels are a liability.
If you’re considering a carousel, make sure it’s actually necessary. According to one study, only about 1% of users click on carousels, and many users associate the feature with low-quality content. We recommend using columns, buckets, videos, or other accessible alternatives to carousels wherever possible — these alternatives can be more engaging for users, and they’re usually better for accessibility.
With that said, carousels can be made more accessible, provided that you think about users with disabilities when designing your content. Here are a few tips to keep in mind.
1. Consider using a CSS-only carousel
Yes, this is possible. When you use CSS alone, you can use native semantic HTML, which is always preferable to WAI-ARIA for communicating information to screen readers and other assistive technologies (AT).
CSS carousels use scroll-snapping to improve the user experience (and accessibility). They can be much better than JavaScript for communicating changes to users, though you’ll still need to test your markup.
This guide to accessible CSS carousels, written by Jennifer Wjertzoch, includes tips for making sure your code meets the Level AA requirements of the Web Content Accessibility Guidelines (WCAG), the international standards for accessibility.
Related: Plain Old Semantic HTML: A Perfect Basis for Accessibility
2. Make sure your carousel can be operated with a keyboard alone
Many people use a keyboard alone (with no mouse) to navigate. Your carousel should have easily understandable controls, and keyboard focus indicators should be clearly visible at all times.
Don’t implement custom keyboard controls. People who navigate with a keyboard will expect your website to work the same as every other website on the internet — if users can’t navigate through the carousel by tabbing through the slides, you’ve got a problem.
Related: What is Keyboard Accessibility?
3. Give users a way to pause carousel movement
Autoplay is bad for accessibility, so if you have the option, keep autoplay disabled. Remember, most users dislike autoplay, and you’re not promoting engagement by showing them content that they didn’t request.
If autoplay is essential (for example, if you’re designing an eStore for a client who insists on using it), you should at least provide users with a way to pause or stop playback. This is required by WCAG 2.1 Success Criterion 2.2.2, “Pause, Stop, Hide.”
Related: Why Autoplay Is an Accessibility No-No
4. Don’t use list markup for your carousel.
Your carousel is not a list, and screen readers often announce the number of items in lists. If you’re hiding slides that aren’t visible onscreen, the screen reader output may not match the actual number of slides.
Instead, use WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) to define your carousel semantically. The aria-label attribute can be used for the wrapper element. A simple label like aria-label=”carousel-buttons" on the wrapper will identify where the carousel starts and ends.
Individual slides should also have an aria label to inform screen readers of the number of slides. For example: aria-label=”slide 1 of 5.”
Related: 4 Questions to Ask Before Using ARIA
5. Use aria-hidden=”true" on items that aren’t visible
One reason that carousels are bad for accessibility: The content changes frequently (and in most cases, for no good reason — again, we’re really not fans of carousels in general).
The aria-hidden attribute hides elements from the accessibility tree, and it’s appropriate to use here. When slides aren’t visible, they should have the aria-hidden=”true" attribute. When they’re visible, use aria-hidden=”false.”
We’re just scratching the surface here — carousels require quite a bit of ARIA to communicate changes and controls. For more guidance, review the World Wide Web Consortium’s example of an accessible carousel.
Related: What WAI-ARIA “Hidden" Warnings Mean For Your Website
6. Don’t forget to write alternative text for images
Accessible carousels involve quite a bit of work, and for developers, it’s easy to forget the basics. All images need accurate alternative text (alt text), which should describe the purpose and function of the image on the page.
Review the best practices for writing alt text when creating your content. Keep your descriptions concise and accurate — and if your images have pictures of text, make sure that text is available via the alt description.
Related: What is the Best Way to Write Alternative Text?
7. Test your carousels with a screen reader
If you don’t have much experience with screen readers or other assistive technology, you won’t have the same experience as experienced AT users. Even so, manual testing is essential for carousels and other complex elements.
The best practice is to involve manual testers with disabilities, but if you cannot do so, you can download a free screen reader like NVDA and familiarize yourself with the controls. As you navigate, ask questions:
- Can I understand all of the carousel’s content by listening to the audio output?
- Can I navigate the carousel using keyboard controls alone?
- Do I know which element is receiving focus?
- Are image descriptions accurate and useful?
- Are all of the changes to the carousel communicated when they occur?
If you need guidance when building carousels or testing their accessibility, we’re here to help. Send us a message to connect with a subject matter expert.
