Carousels

Summary

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

Principle

Carousels are dynamic modules that optimize the display of page content in a limited space using a navigation system that controls the display of sliding panels, sometimes automatically.

They usually take the form of one or more content panels surrounded by “Previous” and “Next” buttons that allow you to scroll through the slides in the carousel. They are often accompanied by a pagination system.

Core HTML base

<section aria-roledescription="carousel" aria-labelledby="carousel-heading">
  <h2 id="carousel-heading">[Carousel heading]</h2>
  <div>
    <div role="group" aria-roledescription="slide" aria-label="1 of 5">
      [first slide content]
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 of 5">
      [second slide content]
    </div>
    <div role="group" aria-roledescription="slide" aria-label="3 of 5">
      [third slide content]
    </div>
    <div role="group" aria-roledescription="slide" aria-label="4 of 5">
      [fourth slide content]
    </div>
    <div role="group" aria-roledescription="slide" aria-label="5 of 5">
      [fifth slide content]
    </div>
  </div>
  <button aria-label="Previous slide"><svg aria-hidden="true">[...]</svg></button>
  <div aria-hidden="true">
    <span class="bullet"></span>
    <span class="bullet"></span>
    <span class="bullet bullet--active"></span>
    <span class="bullet"></span>
    <span class="bullet"></span>
  </div>
  <button aria-label="Next slide"><svg aria-hidden="true">[...]</svg></button>
</section>

ARIA roles, states and properties

• aria-roledescription="carousel" must be applied to the <section> tag containing all the carousel code.
• aria-labelledby="carousel-heading" must also be applied to the <section> tag and must reference the carousel heading ID. If no heading is present, replace this attribute with aria-label="[Carousel heading]".
• id="carousel-heading" must be applied to the carousel heading, if present.
• role="group", aria-roledescription="slide", tabindex="0", and aria-label="1 of 5" must be applied to each slide container. The values of the latter attribute must be filled in dynamically, based on the number and total number of slides.
• aria-label="Previous slide" and aria-label="Next slide" must be applied to the buttons used to change slides.
• aria-hidden="true" must be applied to the pagination system, and the bullets must not be accessible via the keyboard.

Keyboard interaction

Tab

Navigate through each slide in the carousel and the navigation buttons.

Shift + Tab

Same behavior as with the Tab key, but this time in reverse reading order.

Enter or Spacebar

When the keyboard focus is on the navigation buttons, displays the previous or next slide.

Expected behavior

• Tabulation in slides works in the same way as using the navigation buttons: when you tab to a hidden slide (either completely or partially), you must apply the slide change in order to make the slide that has focus fully visible on the screen.
• The pagination system is deliberately made inaccessible to the keyboard and screen reader so as not to interfere with navigation. In this example, where all slides are accessible by default using these assistive technologies, the pagination system is redundant.
• If swiping is used to change slides, the carousel must have at least one navigation system, either navigation buttons or pagination.
• In the case of an automatic scrolling carousel, a system for pausing and restarting the scrolling must be present.
• If the carousel has more than five slides, it is recommended to add a skip link just above the carousel that allows users to skip to the content following the carousel.

Comments

Updates

Back to top