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:
Steve Grobschmidt (@AquinasWI) recently blogged a three-part series titled The Usability Principles, Accessibility Style. Using Jakob Nielsen’s 10 Usability Heuristics as a guideline, Steve discusses the principles and then explains how they each relate to accessibility. Great stuff!
This has become an issue for me of late, and it needs more attention. And that is lack of sub-headings in articles. Not just the page heading and/or article heading, but headings throughout an article to make it more accessible and usable. Especially so the longer an article is. (And of course, use proper markup! H1, H2, etc.)
Among many, I came across the following articles which could really use more headings. The articles are fairly long, and could no doubt be broken up into sections.
Why are headings so important? First of all, it’s part of accessibility guidelines such as WCAG 2.0; see section 2.4.6 Headings and Labels. The W3C points out that headings create meaning when read out of context. And they help people with limited short-term memory. In addition, headings provide:
Better navigation for screenreaders.
Default formatting when CSS is not available.
Scanning more usable and readable document.
Here are examples of articles with good use of headings: