The more I work with accessibility, the more I see the connection that accessibility and usability are strongly tied together. If a type of interface element is difficulty to make “accessible”, chances are that there may be a problem with usability even for “abled” users.
The carousel (the interface element that rotates images on a Web page with links to amazing, can’t-miss content!). As with any animated element, screen reader accessibility will be an issue, but as it turns out carousels can be inaccessible to a number of audiences and turn out to NOT really do what the site designers want them to do – namely point users to different types of content on a site.
Carousel Accessibility Issues
For the record, here are the issues one might encounter when considering carousel accessibility when it’s constantly rotating.
Screen Readers
The headlines at least need to be identified and be accessible as links. Images may need an ALT text as well if they have content. What’s more problematic though is that if a headline changes and is not properly announced, a screen reader user may not know anything has changed. The person may click Link 1 and end up at the page for Link 2.
Keyboard Accessibility
In addition to screen reader accessibility, any interface needs to work with a keyboard, even for sighted users who may have motion impairments. This can be done, but it leads to the more serious problem of figuring out which dot to click.
Sighted Users with Less than Perfect Reading Skills
Imagine that you have some form of dyslexia, or are a low vision user zooming in on content, or are a non-native speaker, or haven’t had your morning caffeine yet. You may not have time to read that headline before it tastefully dissolves into another headline. You can experience this phenomenon at http://shouldiuseacarousel.com. In a truly awful rotating carousel, you have to wait for all the headlines to cycle through before seeing the headline. In a better carousel, you have to remember which dot number you want to access. That gets hard for anyone if there are five or more dots at the bottom.
It should be noted that some users could not overcome the distraction of the constant rotation so could never really read the content and advance to the right page. For this reason, any content set on constant rotation without a pause button does not comply with WCAG 2.0 Guideline 2.2
Yet paradoxically, if a user clicks the the Pause button, will he or she know what to click next? The major problem with carousels isn’t accessibility, but poor link scent.
Other Issues
This article The Unbearable Inaccessibility of Slideshows by Gian Wild points these and other issues about typical carousels out in full detail.
Not Usable Either
As it turns our, carousels aren’t really clicked on by sighted users either. One one study by Erik Runyon of his university’s homepage carousel, only 1.07% clicked on any one slide. Of those, only 10.9% clicked slides 2-5. A version of non-rotating carousel still exists. It may be WCAG 2.0 compliant, but it’s not fulfilling its function.
Does keeping the auto-rotate feature affect click rates? A little, but not much. On the site with rotating carousel, only 9.4% of users clicked anything, and of those, only 45.43% clicked anything other than slide 1. That’s still a lot of missed content.
Note: Full disclosure – the home page of this university also has a non-rotating carousel. No one happened to ask my opinion….
In addition to this study, other usability studies (e.g. Nielsen Norman Group) have found that not many users click on carousels. One problem is banner blindness which happens when users interpret loud showy elements as ads which can be ignored. The other is that dots or arrows don’t provide a lot of link scent, especially if a slideshow carousel is embedded on a home page. Users may be more likely to interact with other links where the destination is more apparent.</p
Some Decent Carousel Interfaces
Despite these objections to the rotating carousels, I would say that not all carousels are bad. There are some interesting examples which do work to guide the user to the appropriate content.
One type is the carousel or slideshow meant used to display a specific set of themed images. An example is this Penn State Paris vigil gallery. The purpose of the slideshow is reasonably clear – to show photos from a nighttime vigil. The interface allows you to go at your own pace and includes keyboard navigation as an option. Each image also includes an ALT tag.
The next two examples show a usable, and quasi accessible layout. Thanks to those who pointed these out to me. One example is the top sliders at the Corning Museum of Glass and the other is from The Economist which lists all available headlines after the carousel image. Both are usable in the sense that the content of each carousel item is visible readable on a screen reader. Images either have an ALT tag (Economist) or the text is embedded in an SVG graphic (Corning Museum). The Economist version is also keyboard accessible although the CSS should be modified to make location of the cursor more obvious. There is also some keyboard function with the Corning Museum site, but the sliders don’t slide all the way across.
The most interesting thing about these carousel layouts is that they are much more easy to make accessible without too much in the way of special techniques (other than ensuring keyboard accessibility).