If you must use a carousel, make it accessible

What is a carousel or slider?

Some people call them carousels, some people call them sliders. A carousel or slider is a content display paradigm in which a list of related content items are presented in panels as a horizontal slideshow. The slideshow is usually navigated by “next” and “previous” arrow buttons. Usually each item has a graphic, some text, and an associated link. Carousels can have one or multiple panels in the viewable area. Here is an example of a carousel that has multiple panels in the viewable area.

An image carousel example with 3 panels and previous and next buttons

Why am I writing an article about carousels?

Good question. I hate carousels. The carousel paradigm for displaying content exists for one reason only. It exists because groups fight for that coveted front and center position on a web site homepage. A carousel is one way to guarantee that each group’s content has an opportunity to have a turn in that spot. Studies show that users rarely interact with them.

How do people use carousels?

Well, studies show that most people don’t use carousels. But we can consider three general personas who could use them:

  1. Sighted users who use a mouse pointing device
  2. Non-sighted users who use a screen reader and keyboard to navigate
  3. Sighted users who use a keyboard to navigate
An image carousel example with 3 panels and previous and next buttons

Carousels for sighted users (who use a mouse pointer)

Sighted users perceive carousel content as a series of panels usually navigated via arrow buttons. The main carousel accessibility consideration for sighted users is to not make it auto-play. If you must make the carousel auto-play, then you need to provide a pause or stop button. If you use a pause or stop button, place it before the carousel, and provide descriptive link text like, “Pause animated content.”

Carousels for people who use a keyboard to navigate

Consider that non-sighted people do not need to know that you have collected content items for display in a carousel format. For a non-sighted person, the important interaction is that they can tab through each item. As they tab, relevant information should be included in the focused area so that they have context on each piece of content. Thanks to Jaimecortesf for pointing out in the comments that the carousel panels should be marked up as an unordered list.

An image carousel example with 3 panels and previous and next buttons

Should the arrow buttons work for keyboard users?

Making the arrow keys work with the keyboard results in a cumbersome interaction for keyboard users. The problem is that for a keyboard user, if the focus is on the arrow keys, it is not on the panel content.

  1. Focus on panel 1 content.
  2. Focus on panel 2 content.
  3. Focus on panel 3 content.
  4. Focus on “next” arrow.
  5. Pressing “return” or “Enter” moves the carousel to reveal the next set of panels.
  6. The person would need to “back-tab” off of the “next” arrow back onto the panel they are interested in, if they want to follow the link. This is awkward. Note that this functionality would not be accessible for a non-sighted user. The non-sighted user would hear “next,” the panel-set would move, and they would have no idea they needed to back-tab to get, say, the 4th panel content into focus.
An image carousel example with 3 panels and previous and next buttons

That’s not fair

The sighted person is not forced to use the carousel at all. They can click around the page wherever they want. Yet keyboard users are forced to navigate through the carousel in its entirety. That’s not fair.

What’s next?

Developers must be instructed on where to put these links and what the link label should be. User experience designers need to explain desired carousel keyboard functionality to developers as part of their documentation.

--

--

CPWA Certified Accessibility professional, front end development, technology leadership, user experience, random haiku poems.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alison Walden

Alison Walden

CPWA Certified Accessibility professional, front end development, technology leadership, user experience, random haiku poems.