Auto-Rotating Image Carousel Example with Buttons for Slide Control

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 either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons. The accessibility features section that follows the example describes these features in detail.

Similar examples include:

Example Options

Example

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 affects 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 inside the image, background images could cause color contrast for the controls and text to become insufficient. However, this view includes the following features to prevent this potential problem and ensure it meets WCAG 2.1 color contrast requirements:

One way to avoid the color contrast issues caused by displaying controls and text within the images is to position the controls outside the image. Displaying the controls and text on a solid background makes it easier to control color contrast. One of the view options provides an example of this technique.

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 become unusable as announcements of the continuously changing content constantly interrupt anything else the user is reading.

Keyboard Support

Rotation Control Button

Key Function
Tab
  • 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
Enter
Space
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 landmark region.
aria-roledescription="carousel" section
  • Informs assistive technologies to identify the element as a "carousel" rather than a "region."
  • Affects how the assistive technology renders the role but does not affect 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."
  • Affects 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