Carousels

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 generally contain a visible slide with “Previous” and “Next” buttons, which scroll through the slides of the carousel. They are often accompanied by page navigation buttons.

In the case of an automatically scrolling carousel, a button to pause and play the animation is present.

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 selectes 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 selectes 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.

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

Comments

Add a comment

Required fields are marked *.

Back to top