Understand how to create and test for accessible carousels and slideshows.
Note: This is a stub article — it contains a small amount of useful guidance that we hope to expand later. If you would like to contribute to expanding this article, email email@example.com.
What are carousels?
A carousel — also known as a slider or slideshow — is an interactive widget used to present multiple slides or panels of content, one at a time. Some carousels allow users to see more than one slide or panel at a time.
A carousel typically includes buttons for displaying the next or previous slides, or sliding the panels to the left or right. Often, there is a set of small buttons with no text labels, one for each slide in the carousel. These enable the user to press a button and jump to a specific slide.
Sometimes, a carousel will start advancing through its slides automatically as soon as the page loads and without the user’s express permission.
For some examples of carousels, see ColorLib’s 20 Best Bootstrap Carousel Examples 2023.
Note: Avoid carousels as much as possible.
Carousels are widely considered to provide a poor user experience. Designers are strongly encouraged to consider other user interface designs.
Some typical issues with carousels include:
- animation that distracts users’ attention
- poor screen reader accessibility
- poor keyboard-only accessibility
- there's not enough time for users to read a slide before the next slide is automatically displayed
- content is hidden in slides that haven’t been displayed yet, making their discovery more difficult for users.
To learn more about why carousels provide bad experiences for all users, see:
Create an accessible carousel
Where the decision has been made to use a carousel, see the following guidance and examples for making one that is accessible:
- Carousel (Slide Show or Image Rotator) Pattern — ARIA Authoring Practices Guide — W3C
- A Step-By-Step Guide To Building Accessible Carousels — Smashing Magazine
- A Content Slider — Inclusive Components
- Tabbed Interface - Carousel - Web Experience Toolkit — Government of Canada.
- Check that the carousel’s structure, content and functionality
are programmatically expressed in semantic markup, and that elements
have accessible names, roles, states and properties where needed.
- Structure, Semantics and Labelling — A Step-By-Step Guide To Building Accessible Carousels — Smashing Magazine
- Testing for accessible names — Knowledge Area: Accessible names and descriptions
- Testing for roles — Knowledge Area: Roles, states and properties
- Testing for states and properties — Knowledge Area: Roles, states and properties.
- Check that all of the carousel’s functionality is keyboard accessible. See Testing keyboard accessibility — Knowledge Area: Keyboard accessibility.
- Check that all text, meaningful graphical elements and interactive components have sufficient colour contrast and do not rely on colour alone to convey any information. See Testing colour and contrast — Knowledge Area: Colour and contrast.
- If the carousel includes links, follow the instructions in Testing links — Web Content Type: Links.
- If the carousel includes or is used as a button, follow the instructions in Testing buttons — Web Content Type: Buttons.
- If the carousel includes images, see Testing images — Web Content Type: Images.
- If the carousel includes videos, see Testing videos — Web Content Type: Videos.