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.
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interaction.
- Expected behavior.
- Note.
- Examples of components.
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 code is based on the “Tab Panel” design pattern found in the WAI-ARIA 1.0 Authoring Practices of the W3C.
Core HTML base
ARIA roles, states and properties
role="tablist"
must be placed on the element which encapsulates the tabbed interface component.role="tab"
must be placed on each tab.- The
tabindex
attribute must be placed on each tab. Its value must be set dynamically according to the state of the associated tab:tabindex="0"
on the selected tab.tabindex="-1"
on the inactive tabs.
- The
aria-selected
attribute must be applied to each tab. Its value must be set dynamically according to the state of the associated tab:aria-selected="true"
on the selected tab.aria-selected="false"
on the other tabs.
role="tabpanel"
must be placed on each tab panel.- The
aria-hidden
attribute must be applied to each panel. Its value must be set dynamically according to the state of the associated panel:aria-hidden="false"
on the selected tab.aria-hidden="true"
on the other tabs.
tabindex="-1"
must be applied dynamically to each interactive element in the hidden tabbed interface. This attribute must be removed from elements in the tab panel which are displayed.- Each tab must be programmatically associated with its corresponding panel by the
aria-controls
attribute:- Each tab panel must have an
id
attribute set to a unique value. - Each tab must have an
aria-controls
attribute set to the value of theid
for the associated panel.
- Each tab panel must have an
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
- Among all the tabs, only one can be selected at a time and only the active tab can receive the focus.
- When an inactive tab is selected, the previously selected tab becomes inactive and the focus is on the newly selected tab.
- Only one panel can be visible at a time. Only the tab currently selected is displayed. The other tabs are hidden with
aria-hidden="true"
anddisplay: none;
orvisibility: hidden;
. - It is not possible to tab to any interactive element in the hidden panels. The
tabindex="-1"
attribute must be added dynamically to these elements. The attribute is then removed when the associated panel is visible. - The arrow keys are used to navigate the list of tabs and to select the current tab.
- The value of the
aria-selected
attribute must be modified dynamically each time the state of the associated tab is updated. - The value of the
tabindex
attribute must also be modified dynamically each time the state of the tab is updated. - The value of the
aria-hidden
attribute must also be modified dynamically each time the state of the associated tab is updated. - The text alternative for the image button “Stop scrolling the carousel” must be updated when the image button is active, for example, “Play slide carousel”.
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.