Auto-Rotating Image Carousel Example with Buttons for Slide Control

About This Example

The following example implementation of the Carousel 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:

• Auto-Rotating Image Carousel with Tabs for Slide Control: An image carousel that demonstrates accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with a set of tabs.

Example Options

Carousel View and Behavior Options Display controls and captions outside of image

This option is more accessible than rendering controls and captions within the image, because controls are easier to perceive and captions are easier to read without rotating images behind them.

Pause auto-rotation on load (reload needed)

This option controls whether the carousel is paused or playing on page load. The paused option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation, but allows users to start auto-rotation using the start/stop button.

Note: If the user has chosen reduced motion in system settings, auto-rotation will always be paused on load.

Disable auto-rotation

This option improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation by disabling the auto-rotation feature and removing the start/stop button from the user interface. Users can use the previous and next buttons to manually navigate through the slides.

Example

Dynamic Europe: Amsterdam, Prague, Berlin

7 pm Tuesday, March 3, on TV

Travel to Southwest England and Paris

Sept. 14 to Sept. 24 or 27

Great Children's Programming on Public TV

Foyle’s War Revisited

8 pm Sunday, March 8, on TV: Sneak peek at the final season.

Great Britain Vote: 7 pm Sat.

Mid-American Gardener: Thursdays at 7 pm

Watch the latest episodes.

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:

• If operating system preferences have been set for reduced motion or disabling animations, the auto-rotation is initially paused.

• Hovering the mouse over any carousel content pauses automatic rotation. Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus, that prevents rotation has been triggered.

• Moving keyboard focus to any of the carousel content, including the next and previous slide elements, pauses automatic rotation. Automatic rotation resumes when keyboard focus moves out of the carousel content unless another condition, such as mouse hover, that prevents rotation has been triggered.

• The carousel also contains a rotation control button that can stop and start automatic rotation.

  • The rotation control button is the first element in the screen reader reading order.
  • The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.
  • If the carousel is rotating, the button's accessible name is "Stop Automatic Slide Show", informing screen reader users that the slides are changing in addition to providing a way to stop the changes.
  • If the carousel is not rotating, the accessible name of the button is "Start Automatic Slide Show".
  • If a user activates the rotation control button to start rotation it is assumed the user wants auto-rotation to start immediately, so focus and/or hover states within the carousel for pausing rotation are ignored. The rotation will only stop if the rotation control button is activated again.

• The example includes an option to completely disable automatic slide rotation. When this option is selected the start/stop button is not rendered and the slides can only be rotated through activation of the next and previous buttons.

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:

• When the rotation control, next slide, and previous slide buttons are rendered within the image, the buttons have foreground and background colors that meet WCAG 2.1 color contrast requirements. In addition, the focus styling uses SVG images that make the focus indicator highly visible when a control receives keyboard focus.
• The transparency of the caption area is decreased so the caption text meets the 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

• 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

Role, Property, State, and Tabindex Attributes

• 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.
• NOTE: The aria-roledescription value is defined using the language of the page and should be localized by the author.

| | | 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.
• NOTE: The aria-roledescription value is defined using the language of the page and should be localized by the author.

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

• CSS: carousel-prev-next.css
• JavaScript: carousel-prev-next.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.