Carousels

Since the writing of this sheet, the ARIA specification has been updated from ARIA 1.0 to ARIA 1.1.

This fact sheet is based on the ARIA 1.0 design from WAI-ARIA Authoring Practices 1.0, and the recommendations below may have to be modified once the ARIA 1.1 design patterns are formalized.

For more information on the changes in the ARIA 1.1 update, see WAI-ARIA Authoring Practices 1.1.

Summary

Principle

Carousels are dynamic modules that allow several images to fit into the same space. They are controlled by a navigation system of scrolling panels, which is sometimes automatic.

They usually contain a visible slide with flanked by “Previous” and “Next” buttons, to scroll through the various slides of the carousel. They are often associated with page navigation buttons.

If the carousel is “auto-scrolling”, a “Pause” button is displayed to pause and resume scrolling.

This auto-scrolling carousel has a pause/play button.

This code is based on the “Tab Panel” design pattern found in the WAI-ARIA 1.0 Authoring Practices of the W3C.

Core HTML base

<button><img src="pause.png" alt="Pause carousel scrolling" /></button>
<ul role="tablist">
  <li role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-1"><img src="bullet.png" alt="Panel 1" /></li>
  <li role="tab" tabindex="0" aria-selected="true" aria-controls="pannel-2"><img src="active-bullet.png" alt="Panel 2" /></li>
  <li role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-3"><img src="bullet.png" alt="Panel 3" /></li>
</ul>
<button><img src="previous.png" alt="Previous slide" /></button>
<div>
  <div role="tabpanel" id="panel-1" aria-hidden="true">
    [Contents of first panel (hidden)]
    <a href="#" tabindex="-1">Example link</a>
  </div>
  <div role="tabpanel" id="panel-2" aria-hidden="false">
    [Content of second panel (showing, because associated tab is selected)]
    <a href="#">Example link</a>
  </div>
  <div role="tabpanel" id="panel-3" aria-hidden="true">
    [Content of the third panel (hidden)]
    <a href="#" tabindex="-1">Example link</a>
  </div>
</div>
<button><img src="next.png" alt="Next slide" /></button>

ARIA roles, states and properties

Keyboard interaction

Tab

When the user tabs into the tabbed interface component, this key places the focus on the selected tab in the group. When the focus is on a tab, pressing the Tab key allows the user to leave the tabbed interface component.

Shift + Tab

This key combination has the same behavior as the Tab key, except in the reverse order.

Up arrow or Left arrow

When the focus is on a tab, either of these keys moves the keyboard focus to the previous tab in the slide show and selects this tab. If the keyboard focus is on the first tab in the group when the key is pressed, the keyboard focus moves to last tab in the group and selects it.

Down arrow or Right arrow

When the focus is on a tab, either of these keys moves the keyboard focus to the next tab in the slide show and selects this tab. If the keyboard focus is on the last tab in the group when the key is pressed, the keyboard focus moves to the first tab in the group and selects it.

Ctrl + Up arrow

When the focus is in a panel, this key combination moves the keyboard focus to the tab associated with this panel.

Ctrl + Page up

When the focus is in a panel, this key combination moves the keyboard focus to the previous tab and selects this tab. If the keyboard focus is on the first tab of the group when the key combination is pressed, the keyboard focus moves to the last tab and selects it.

Ctrl + Page down

When the focus is in a panel, this key combination moves the keyboard focus to the next tab and selects this tab. If the keyboard focus is on the last tab of the group when the key combination is pressed, the keyboard focus moves to the first tab and selects this tab.

Enter or Spacebar

When the keyboard focus is on the navigation buttons, either of these keys displays the next or previous panel. When the keyboard focus is on the pause button, either of these key toggles between pause and play.

Expected behavior

Note

Note that it is also possible to replace <img /> in buttons with text, scalable vector graphics <svg>, or icon fonts.

Components

The “Carousel” components are shown here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments.

Comments

Add a comment

Required fields are marked *.

Back to top