Carousels

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interaction.
• Expected behavior.
• Notes.

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="Play slide carousel" /></button>
<button><img src="previous.png" alt="Previous slide" /></button>
<div aria-live="polite">
  <div role="tabpanel" id="slide-1" aria-roledescription="slide" aria-label="1 of 4">
    [Content of the first panel (shown, because associated tab is selected)]
  </div>
  <div role="tabpanel" id="slide-2" aria-roledescription="slide" aria-label="2 of 4">
    [Content of the second panel (hidden)]
  </div>
  <div role="tabpanel" id="slide-3" aria-roledescription="slide" aria-label="3 of 4">
    [Contenu of the third panel (hidden)]
  </div>
  <div role="tabpanel" id="slide-4" aria-roledescription="slide" aria-label="4 of 4">
    [Content of the fourth panel (hidden)]
  </div>
</div>
<div role="tablist" aria-label="Slides">
  <button role="tab" aria-selected="true" aria-controls="slide-1"><img src="active-bullet.png" alt="Slide 1" /></button>
  <button role="tab" tabindex="-1" aria-selected="false" aria-controls="slide-2"><img src="bullet.png" alt="Slide 2" /></button>
  <button role="tab" tabindex="-1" aria-selected="false" aria-controls="slide-3"><img src="bullet.png" alt="Slide 3" /></button>
  <button role="tab" tabindex="-1" aria-selected="false" aria-controls="slide-4"><img src="bullet.png" alt="Slide 4" /></button>
</div>
<button><img src="next.png" alt="Next slide" /></button>

ARIA roles, states and properties

• role="tablist" and aria-label="Slides" must be placed on the element which encapsulates the tabbed interface component.
• role="tab" must be placed on each tab.
• The tabindex="-1" attribute must be placed on each tab that are not selected.
• 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.
• The aria-live attribute must be applied to the slide container. Its value must be dynamically set according to the scrolling state of the carousel:
  • aria-live="polite" if the carousel does not scroll automatically.
  • aria-live="off" if the carousel scrolls automatically.
• role="tabpanel", aria-roledescription="slide" and aria-label="1 of 4" must be placed on each tab panel. The values of this last attribute must be filled in dynamically, depending on the number and total number of slides.
• Slides that are not displayed should be hidden using the CSS class display: none; or visibility: hidden;. If this is not possible, apply the following recommendations:
  • 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 displayed slide.
    • aria-hidden="true" on the other slides.
  • tabindex="-1" must be applied dynamically to each interactive element in the hidden slide. This attribute must be removed from elements in the slide which are displayed.
• Each tab must be programmatically associated with its corresponding slide by the aria-controls attribute:
  • Each slide 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 slide.

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.

Left arrow

When the focus is on a tab, this key 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 the last tab in the group and selects it.

Right arrow

When the focus is on a tab, this key 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.

Home

Moves focus to the first tab and shows the first slide.

End

Moves focus to the last tab and shows the last slide.

Enter or Spacebar

When the keyboard focus is on the navigation buttons, either of these keys displays the next or previous slide.

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 the slide(s) associated with the currently selected pagination tab are displayed. Other slides are hidden with display: none; or visibility: hidden; or optionally with aria-hidden="true".
• It is not possible to tab to any interactive element in the hidden slides. If the hidden slides are not hidden thanks to CSS, the tabindex="-1" attribute must be added dynamically to these elements. The attribute is then removed when the associated slide 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 tabindex="-1" attribute must also be modified dynamically each time the state of the tab is updated.
• If used, the value of the aria-hidden attribute must also be modified dynamically each time the state of the associated slide is updated.
• The text alternative for the image button “Play slide carousel” must be updated when the image button is active, for example, “Pause slide carousel”.

Notes

• Note that it is also possible to replace <img /> in buttons with text, scalable vector graphics <svg>, or icon fonts.
• In the case of a carousel containing no pagination bullets, all keyboard interactions and expected behaviors specific to the tab system are to be ignored. Thus, in the core HTML base, navigation bullets will be removed, and the role="tabpanel" attribute present on slides will be replaced by role="group".

Comments

Back to top