WAI-ARIA Roles for Carousels (a.k.a. sliders, slideshows, galleries)

cantera picture cantera · May 30, 2013 · Viewed 8k times · Source

What WAI-ARIA roles should be used for carousels, like the one below?

USA.gov carousel example

Notes:

  • I'm familiar with the slider role, but this refers to a different type of widget.
  • The example is from USA.gov and the only aria role I see in use that's related to the carousel is aria-live on the individual slides.

Answer

Luca picture Luca · Jun 3, 2013

as you correctly say, role=slider is not right for a carousel. The one that you should use is role=listbox

quoting from MDN (see link below):

The listbox role is used to identify an element that creates a list from which a user may select one or more items which are static and, unlike HTML elements, may contain images.

see https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role for additional information on other ARIA roles you should use, such as role=option for each entry in the listbox.

You could also have a look at this YUI plugin (YUI 2 is deprecated but the documentation is still valid for the purpose of your question) http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/carousel/carousel-ariaplugin.html

that adds aria roles to an existing carousel via javascript. I'm not suggesting to use it, but you can certainly infer what it does and replicate it in your markup as needed.