Death to the Website Carousel

UPDATE (March 6, 20104) : Added a new example, and did some minor fixes.

This is not by any means a new idea, but as I am in the process of redesigning the website, I did think about the carousel. The existing website doesn’t have one, but glancing at my WordPress statistics, the image carousel plugin review post has been getting the highest number of hits, and I have that post for a reason (that is I had to put one into the last site I did).

Should You Use a Carousel?

You know, there’s a website for that: www.shouldiuseacarousel.com (credit to @gollydamn for sending this my way)

Accessibility Issues

If that doesn’t convince you, shall I show you what the last site I worked on looks like with JavaScript turned off?

Okay, I understand not a lot of people have JavaScript turned off, but there is no reason why a carousel can’t be coded in such a way as to not cover other content when JS is turned off (see the final example).

A carousel or slider poses other accessibility issues as well.

Accessibility Break #1: No Auto Play & Controls

Nothing on a page should automatically play, move, what have you.

While the Web Consortium Accessibility Guidelines (WCAG) allows for auto play, it still says users must have the ability to pause, stop or hide it. The techniques go on to say that the user should also have the ability to restart it using the same method as pausing.

How would a user pause or stop a carousel when they first open your page? Is it obvious? Are there both mouse and keyboard controls to do so?

Accessibility Break #2: Keyboard Accessibility

Ever try to using a page without a mouse? It’s not always easy, and worse when there is a carousel, because you normally don’t know that your focus is inside the carousel. (To be fully accessible, keyboard users should always know what link they have focus on.) Even if you do, how do you get out? Normally you have to tab through all the image/links in the carousel without knowing where the end is. WHERE IS THE END?!

On a side note: Whether a screen reader will read through them all or only the one displaying really depends on the code, whether there’s any alt text, and how the screen reader interacts with it. It’s hard to say, but if it does, you can only hope there aren’t 10+ images in the carousel.

Accessibility Break #3: Alt Text

I think by now we all know that you have to have “alt text” for images. While some carousels allow you to put in alt text, many of them don’t have it built in. Even if it does, did the writer remember to include a note on where the link goes to and if applicable, that it opens in a new window? I must admit I don’t even always remember to. This leads us to the next point.

Accessibility Break #4: Descriptive Link

I don’t think telling the user where the link goes is necessary if it just goes to a bigger version of the image, because that’s expected behaviour. Carousels, however, tend to lead you to another page, not to the larger size of an image. Somehow, you need to tell the user where the link goes. Since the link text can’t do that (because it’s an image), then your alt text needs to do it for you, but the person writing the alt text needs to remember.

But a Carousel Can be Fully Accessible Right?

Yes. I won’t deny that if you have a programmer who knows their stuff and understands accessibility, they could modify an existing or create a new carousel that is fully accessible. However, is it worth the time and effort?

The San Rafael Public Library recently redesigned their website and do a pretty good job with their carousel and book selector. However, even their carousel has some issues, such as not having keyboard controls, and having the same news/events information 3 times for screen readers (the alt text for the image, the caption for each image, and then strangely a hidden caption with the exact same information for each image).

I can tell you that I haven’t found an existing plugin/library that meets accessibility criteria. The closest I’ve found is one of the Drupal ones with auto-play turned off.

Consider Usability & User Experience

If you’ve gotten this far and you’re still not convinced, then here are some more reasons.

Banner Blindness

Even if you’re not familiar with the term, I’m sure you’re familiar with the concept of banner blindness (coined back in 1998!). Basically, users tend to ignore anything that look like ads. It seems ignoring ad-like content is particularly true for anything at the top of the page, or in the sidebar.

User Frustration

While I have yet to actually read on any research about it (though I’m fairly sure it exists), I don’t know how often I’ve had users be frustrated with carousels and the like when they actually try to use, read, click on, or stop them.

Users Don’t Click on It & Even More Reasons

Conversion XL wrote a good summary on some of the statistics (Notre Dame saw 1% of clicks on their first slide and none on the others) and usability studies done, also covering some other reasons: taking users’ attention away from what’s important, and the problem of too many messages.

While geared towards libraries, Michael Schofield did a presentation on the Truth about Carousels at NEFLIN 2013 Tech Conference with some great points.

Finally, if you still must have a carousel, I found an article that covers some key features you should have if you still insist on using one.

Conclusion

TL;DR version: Please stop even thinking about it. You’ll just frustrate all your users.