旋转木马的 WAI-ARIA 角色（又名滑块、幻灯片、画廊）

Question

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

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 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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"

Answer 5

tl;dr:

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.

Answer 6

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.