Auto-Rotating Image Carousel Example

The following example implementation of the carousel design pattern demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads. For instance, rotation stops when users move focus to any control or link in the carousel or hover the mouse over carousel content. The accessibility features section that follows the example describes these features in detail.

Example View Options


Accessibility Features

Controlling Automatic Slide Rotation

Users can stop and start slide rotation, which is an essential aspect of accessibility of the carousel for a variety of people with disabilities. People with low vision or a cognitive disability that effects visual processing or reading benefit from being able to control slide rotation so they have sufficient time to explore slide content. Similarly, since screen reader users cannot perceive automatic rotation, it can make reading the page confusing and disorienting. For example, when slides are automatically rotating, a screen reader user may read an element on slide one, execute a screen reader command to read the next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.

This example includes the following features for giving users control over slide rotation:

Color Contrast of Text and Rotation Controls

In the view of this carousel where the controls and captions are displayed on top of the image, the background images can cause color contrast for the controls and text to become insufficient. This view includes the following features to meet WCAG 2.1 color contrast requirements:

Screen Reader Announcement of Slide Changes

When automatic rotation is turned off, the carousel slide content is included in a live region. This makes it easier for screen reader users to scan through the carousel slides. When screen reader users activate the next or previous slide button , the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content. Very importantly, if automatic rotation is turned on, the live region is disabled. If it were not, the page would be come unusable as announcements of the continuously changing content constantly interrupt anything else the user is reading.

Keyboard Support

Rotation Control Button

Key Function
  • Moves focus through interactive elements in the carousel.
  • Rotation control, previous slide, and next slide buttons precede the slide content in the Tab sequence.
Enter or Space Toggle the auto rotation of slides in the carousel.

Next and Previous Slide Buttons

Key Function
Display next or previous slide in the carousel.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
region section
  • Role region is implied for any section element that has an accessible name.
  • Defines the carousel and its controls as a land mark region.
aria-roledescription="carousel" section
  • Informs assistive technologies to identify the element as a "carousel" rather than a "region."
  • Effects how the assistive technology renders the role but does not effect functionality, such as commands for navigating to landmark regions.
aria-label="Highlighted television shows" section Provides a label that describes the content in the carousel region.
aria-live=off div.carousel-items
  • Applied to a div element that contains all the slides.
  • Identifies the container element as a live region that is in the "off" state, meaning assistive technology users are not informed about changes to the region.
  • The live region is off when the carousel is automatically rotating.
aria-live=polite div.carousel-items
  • Applied to a div element that contains all the slides.
  • Identifies the container element as a live region in the "polite" state, meaning assistive technology users are informed about changes to the region at the next available opportunity.
  • This causes screen readers to automatically announce the content of slides when the next and previous slide buttons are activated.
group div.carousel-item
  • Applied to each of the elements that contains the content of a single slide.
  • Enables assistive technology users to perceive the boundaries of a slide.
aria-roledescription="slide" div.carousel-item
  • Informs assistive technologies to identify the element as a "slide" rather than a "group."
  • Effects how the assistive technology renders the role but does not remove any assistive technology functions related to group elements.
aria-label="N of 6" div.carousel-item
  • Provides each slide with a distinct label that helps the user understand which of the 6 slides is displayed.
  • Note: Normally, including set position and size information in an accessible name is not appropriate. An exception is helpful in this implementation because group elements do not support aria-setsize or aria-posinset.
aria-label="LABEL_STRING" button Defines the accessible name for the pause auto-rotation button and the next and previous slide buttons.
aria-controls="IDREF" button
  • Identifies the content on the page that the button controls.
  • Refers to the div that contains all the slides.

Javascript and CSS Source Code

HTML Source Code