What WAI-ARIA roles should be used for carousels, like the one below?
Notes:
aria-live
on the individual slides.The aria-roledescription attribute provides a way to define a different human-readable name to be presented by AT as the role of an element. Note: Only use aria-roledescription to clarify the purpose of non-interactive container roles and to provide a more specific description to a widget.
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.”
Summary: Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large or small viewports, people often scroll past carousels. A static hero or integrating content in the UI may be better solutions.
In terms of accessibility, carousels are not ideal and pose some issues. To a visually impaired person, they are rapidly changing images which are controlled by an often arbitrary or non-existent set of buttons.
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.
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
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.
From the official W3 tutorials:
To group the carousel in a way that is perceivable for assistive technologies, the
role
attribute with a value ofregion
can be used. To identify the region, thearia-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"
role="marquee"
A carousel is not a listbox.
From the listbox description
A widget that allows the user to select one or more items from a list of choices.
The listbox role is a subclass of select. While I'm sure there are exceptions, carousels are generally not used as form elements where users "select one or more items", and should not use a role that would otherwise treat them as such.
A better role for a carousel is tablist so long as bullets or numbering for the carousel slides are provided and toggle depending on which one is active:
A list of tab elements, which are references to tabpanel elements.
An all around-better role for carousels is marquee, as there is no dependency on showing "tabs" as bullets or numbers to access different slides:
A type of live region where non-essential information changes frequently.
Now that other answers already can't agree on role "listbox", "region" or "marquee", another one pops up: role "group", in combination with role description "carousel".
From the, very official, WAI-ARIA Authoring Practices 1.2 (emphasis mine):
A carousel container element [...] has either role region or role group. The most appropriate role for the carousel container depends on the information architecture of the page. [...]
The carousel container has the aria-roledescription property set to carousel.
A11y is hard.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With