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

Here's an example of an accessible carousel using jQuery UI: http://hanshillen.github.io/jqtest/#goto_carousel

The control bar is a list of images, marked up with <ul role="listbox">. Each <li> has role="option", tabindex="-1", and aria-selected="false".

The two arrows are <button> elements with title="previous" and title="next", and when a button is pressed the previous or next list item is selected, in which case that list item's attributes change to aria-selected="true" and tabindex="0". The latter means the user can tab directly to the current selected image, which of course has suitable alt text.

Another option not included in this example might be to add role="alert" to the viewer div, so when the content of that div changes the new alt text is automatically read. That way users don't have to press tab to see what the image is, then shift+tab to go back to the button.


I have seen many examples using role="listbox", but this feels incorrect to me. A listbox is a form control, wanting to get a selection from a user. If the purpose of your carousel is to have a user select an option, then use listbox, but most people do not use carousel components in this manner. A better role would be a tablist. Tablists are used to represent data (as opposed to capturing an option). Carousel represent data. The links to display a certain image would have the role of tab and each image with it's corresponding data such as its caption would get a role of tabpanel.

See http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#tabpanel


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.


From the official W3 tutorials:

To group the carousel in a way that is perceivable for assistive technologies, the role attribute with a value of region can be used. To identify the region, the aria-label attribute can be used, as show in the example below:

<div class="carousel" role="region" aria-label="Recent news">
    …
</div>

So you should use role="region"