Auto-Rotating Image Carousel Example

NOTE: This is a new example as of the January 2019 release of WAI-ARIA Authoring Practices 1.1. Please provide feedback in issue 971.

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

Accessibility Features

Automatic rotation of slides in the carousel can be easily controlled by any user.
- 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 button is hidden off-screen when it does not have keyboard focus, and becomes visible when users move focus to it with Tab.
  - When not visible, the button is positioned off-screen, instead of being hidden with display:none, so it is always available to screen reader users. This ensures the rotation control is accessible to people using a screen reader that does not move the mouse or keyboard focus when the user is moving its reading cursor.
  - If the carousel is rotating, the button is labeled "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 button is labeled "Start Automatic Slide Show."
  - If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation.
  - If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation.
To improve readability of the caption text and content, the transparency of the caption area is decreased when the mouse hovers over the carousel content. This improves the color contrast ratio of the white text, especially when light colored images are present in the background.

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. The rotation control button moves on screen when it receives keyboard focus and off screen when it is not focused. Off-screen positioning allows it to be available to screen reader users when not focused.
`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 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-disabled="true"`	`button`	Applied to the automatic rotation control button when rotation is stopped and conditions that prevent automatic rotation are present. The button is disabled when a pointer is hovering over the carousel or any element in the carousel has keyboard focus. The `aria-disabled` state is used instead of the HTML `disabled` attribute to keep the button in the `Tab` sequence. If hover or focus is removed from the carousel, the `aria-disabled` attribute is removed from the button.
`button`		`a`	Identifies the element as a `button`.
	`aria-label="LABEL_STRING"`	`a`	Defines the accessible name for the next and previous slide buttons.
	`aria-controls="IDREF"`	`a`	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.css
Javascript: carousel.js
Javascript: carouselItem.js
Javascript: carouselButtons.js
Javascript: pauseButton.js

HTML Source Code

<section id="myCarousel"
         class="carousel slide"
         aria-roledescription="carousel"
         aria-label="Highlighted television shows">
  <button class="pause">
    Stop Carousel
  </button>
  <div class="carousel-inner">
    <a class="previous carousel-control"
       role="button"
       tabindex="0"
       aria-controls="myCarousel-items"
       aria-label="Previous Slide">
      <svg width="30"
           height="30"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg">
        <polygon points="30 0 30 30 0 15"
                 stroke="white"
                 fill="white"
                 stroke-width="2"></polygon>
      </svg>
    </a>
    <a class="next carousel-control"
       role="button"
       tabindex="0"
       aria-controls="myCarousel-items"
       aria-label="Next Slide">
      <svg width="30"
           height="30"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg">
        <polygon points="0 0 30 15 0 30"
                 stroke="white"
                 fill="white"
                 stroke-width="2"></polygon>
      </svg>
    </a>
    <div id="myCarousel-items"
         class="carousel-items"
         aria-live="off">
      <div class="carousel-item active"
           role="group"
           aria-roledescription="slide"
           aria-label="1 of 6">
        <div class="carousel-image">
          <a href="#">
            <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-1">
              Dynamic Europe: Amsterdam, Prague, Berlin
            </a>
          </h3>
          <div class="hidden-xs hidden-sm">
            <p>
              7 pm Tuesday, March 3, on TV
            </p>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="slide"
           aria-label="2 of 6">
        <div class="carousel-image">
          <a href="#">
            <img src="images/lands-endslide__800x600.jpg" alt="Land's End in Cornwall">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-2">
              Travel to Southwest England and Paris
            </a>
          </h3>
          <div>
            <p>
              Sept. 14 to Sept. 24 or 27
            </p>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="slide"
           aria-label="3 of 6">
        <div class="carousel-image">
          <a href="#">
            <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-3">
              Survey confirms that TV  is America’s most trusted institution
            </a>
          </h3>
          <div>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="slide"
           aria-label="4 of 6">
        <div class="carousel-image">
          <a href="#">
            <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-4">
              Foyle’s War Revisited
            </a>
          </h3>
          <div>
            <p>
              8 pm Sunday, March 8, on TV: Sneak peak at the final season.
            </p>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="slide"
           aria-label="5 of 6">
        <div class="carousel-image">
          <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-5">
              Great Britain Vote: 7 pm Sat.
            </a>
          </h3>
          <div>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="slide"
           aria-label="6 of 6">
        <div class="carousel-image">
          <a href="#">
            <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-6">
              Mid-American Gardener: Thursdays at 7 pm
            </a>
          </h3>
          <div class="hidden-xs hidden-sm">
            <p>
              Watch the latest episodes.
            </p>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
    </div>
  </div>
  <!-- carousel-inner -->
</section>
<!-- /.carousel -->
<div class="col-sm-1"></div>