If you must use a carousel, make it accessible

What is a carousel or slider?

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

Why am I writing an article about carousels?

How do people use carousels?

  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)

Carousels for people who use a keyboard to navigate

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

Should the arrow buttons work for keyboard users?

  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

What’s next?

--

--

--

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.

More from Medium

Answering Questions About the DoJ Weighing in on Web Accessibility

Graphic with icons representing various people with disabilities.

Create an Accessible Hamburger Menu

The DoJ Provides Guidance on Web Accessibility

Close up of a government building with an American flag in front.

From Semantics of HTML5 to the Global Accessibility Awareness Day