Accessibility issues with rotating content displays such as carousels, slideshows, photo galleries of content can be addressed by giving the user control.
- Provide users enough time to read and use content
- Remove any autoplay functionality and allow users control to start, pause, and stop elements
- Controls must be keyboard navigable and images must have appropriate alternate text if they are meaningful
- Include WAI-ARIA attributes in the controls
Carousels, slideshows, slide decks, sliders, rotating gallery, image belt: they're all names for and types of rotating displays of content — typically with strong visual impact — in a fixed spot on a webpage.
The carousel is a great way of focusing attention on selected content on a page while making effective use of limited space. Even before any specific accessibility issues are considered, this also presents a significant usability issue: a carousel dominates attention to the extent that other content may be ignored.
Before implementing a carousel, it is wise to closely examine the business goals the carousel is meant to support and whether a different feature or function would achieve these aims.
As a developer, you may find yourself in the situation of being required to work with or set up a carousel or similar presentational mechanism. A carousel is no different that other types of content and will need to comply with the same accessibility conditions as the rest of the site.
To do that, it's worth starting with what appears to be the carousel's greatest strength: it requires no user control in displaying a selected set of images. Read another way, this can also mean it permits no user control in displaying a selected set of images. For some people with disabilities, this can have a severe impact on their ability to perceive and understand the content.
This can include:
- People using screen readers
- People with low vision
- People only using keyboards
- People with cognitive disabilities
- People with reading and learning disabilities
Guideline 2.2 Enough time states:
Provide users enough time to read and use content.
Since "enough time" can vary wildly from person to person, the best way to make a carousel accessible is to give the user control of it. This guideline has two main points. The amount of time available to perform an action required of the user can be modified or stopped by the user, and the user can easily control any moving content, both of these in an accessible manner.