Search code examples
javascripthtmlaccessibilitywai-aria

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

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.
Solution

  • 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.