Carousels

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.

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

• 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 the id for the associated panel.

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" and display: none; or visibility: 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

Comments

Back to top