Considerations for an Accessible Carousel
Whilst working, as part of a development team, on a web application that makes heavy use of carousels I wanted to understand the accessibility issues and accessible implementation of the carousel UI feature.
Opinions of Experts
Other good articles detailing accessibility considerations and accessible implementation for carousels are:
- Anatomy of an accessible carousel
- Carousels and slideshows – accessibility for developers
- Use of ARIA to enhance accessibility – About carousels and aria tabs
- A W3C WAI-ARIA tutorial on carousel/slider concepts and conformance to WCAG 2.0 (in rough draft at the moment but useful nonetheless)
Accessibility Issues Overview
Accessibility issues detailed by the above articles:
- Loss of focus for screen readers and keyboard users caused by content automatically disappearing.
- Cognitive loss and distraction for all users but especially screen reader users caused by
- not allowing enough time to read/consume the content
- and not associating the controls (semantically or programmatically) with the content.
Expert Implementation Advice
Advice to developers:
- Provide controls to start, pause and stop elements and ensure these are keyboard navigable, have ample hit areas, and are labelled for screen readers
- Remove autoplay functionality
- Include appropriate alt text for images
- Include wai-aria attributes in the controls
In commercial endeavours the decision to replace the carousel with another UI feature or even just omit autoplay is often not the call of the contracting and accessibility minded front end developer. So if the site must contain a carousel and if that carousel does have to autoplay then the solution must be to give the user as much control as possible.
Summed up in the interview with Jared Smith, where he discourages the use of carousels altogether but provides advice if this is not an option:
“..we recommend not having it automatically advance. Give control of the content presentation to the user. If it does auto-advance, provide a pause link or button, and ensure that the carousel pauses if the user hovers their mouse over or sets keyboard focus to the carousel or its controls.”
Effectiveness of carousels
This post is geared towards the accessibility of carousels and similar UI elements. More information on the actual effectiveness of this method of displaying content can be found on
Brad Frost’s post on carousels and the Jared Smith links at the start of this post.