Jared Smith (@jared_w_smith) of WebAIM recently launched a clever web page on why carousels are not good practice called Should I Use A Carousel? (which totally went viral on its launch day!) There is a slide deck Keyboard and Interaction Accessibility Techniques (on Slideshare) for which this website was made. I was fortunate enough to see Jared present this at Open Web Camp 5 July 13 at PayPal.
I don’t think that a carousel itself is super terrible. But in my experience, carousels are hardly ever coded with accessibility in mind and hardly ever designed with decent usability. In addition, supporting smaller devices is an issue and coupled with the poor usability data, carousels are overall a bad idea. If you absolutely must implement a carousel, here are some design/interaction tips:
- Let the user start the carousel animation.
- Give the user the ability to pause the carousel.
- Ensure the controls have textual labels.
- Ensure the control of the currently displayed panel is indicated visually and programmatically.
- Ensure the controls have ample hit areas (for mobile, fine motor disability).
On the development side, a carousel can be challenging to make screen reader accessible. It seems that the most straight forward approach is to use the ARIA tab model which is pretty straight forward and fun to do! Here’s a summary of what to do in the markup:
- Each carousel content container has a role of tabpanel.
- Each control, typical designed as dots, has a role of tab.
- The container of the controls/tabs has a role of tablist.
- Add aria-labelledby to the tabpanels which point to the id of the associated control/tab.
- To each control/tab, add aria-controls (which points to the id of the associated tabpanel) and aria-selected (boolean) attributes.
Here are some code resources to help make sense of this. This first by Marco may be most relevant:
- Advanced ARIA tip #1: Tabs in web apps by Marco Zehe
- Tab Panel Example by Web Axe author
- Accessible jQuery-ui Components – tab example
- Open Ajax tab panel example
- Accessible ARIA Tabs by Accessible Culture
More:
- Added: Carousel Concepts by W3C WAI
- Added: The Unbearable Inaccessibility of Slideshows via SitePoint
- Added: Accessible Tabs – Part 2: The Solution by Nomensa
- Anatomy of an accessible carousel (Slideshare) by Access iQ
- Accessible carrousel using ARIA (tab pattern) – July 2018
Updated August 2017