Compare Carousel Examples

Example Pause Keyboard ARIA Roles ARIA Property/States A11y Features A11y Issues Other Issues
Example 1: No A11y Plugin

Bootstrap.js Options:

  • data-keyboard="true"
  • data-pause="hover"
  • Hover only
  • tab to previous/next slide buttons
  • tab to interactive content in slides
  • role="button" on next/previous buttons
none
  • Next/Previous buttons have accessible names
  • No information that there is a carousel composite widget on the page
  • No information on the number of slides or which slide is visible
  • No information on where slide content starts and ends
  • Keyboard focus disappears when tabbing to links on "hidden" slides
  • Needs keyboard event handlers to support "space bar" activation on buttons, since the button are made with a elements.
none
Example 2: PayPal A11y Plugin

PayPal Accessibility Plug-in information

  • Cycling through images disabled
  • tab to previous/next slide buttons
  • tab to listbox and use arrow keys to move through list items
  • role="listbox" on the div.carousel-inner containing the slide (div.item) elements
  • role="option" for each div.item containing slide content
  • role="button" on next/previous buttons
  • aria-selected on the each div[role=option] elements, set to true for the visible element, otherwise set to false
  • Needs keyboard event handlers to support "space bar" activation on buttons, since the button are made with a elements.
  • Cycling through images disabled will be considered a problem by most designers
Example 3: Tabpanel A11y Plugin

Modified version of PayPal Accessibility Plugin for Carousel to use tabpanel design pattern, instead of list

  • hover
  • Keyboard focus on tablist (note: does not restart)
  • tab to previous/next slide buttons
  • tab to tablist and use arrow keys to move through list items
  • added "Pause Carousel" button
  • role="complementary" on the div.carousel containing the all the elements associated with the carousel (note: if there is already a role, the "complementary" landmark will not be added)
  • role="tablist" on the ul.carousel-indicators containing the (li[data-slide-to=N]) elements
  • role="tab" on the li[data-slide-to=N] used as an indication of the number of slides and which slide is visible
    • Accessible name is added as child text content using the css sr-only class to label each slide
    • If the slide includes a .carousel-caption with an h3 element, the h3 content is used as part of the name
  • role="tabpanel" for each div[item] containing slide content
  • role="button" on next/previous buttons
  • tabindex on the each li[data-slide-to=N] elements, set to 0 if selected, otherwise set to
  • aria-selected on the each li[data-slide-to=N] elements, set to true for the visible element, otherwise set to false
  • aria-controls on the each li[data-slide-to=N] elements, points to the corresponding div[role=tabpanel] element
  • Tab labels now include slide number and title information
  • Updates prev and next button labels to indicate next slide number and total number of slides
  • Provides keyboard event handlers to support "space bar" activation on prev and next buttons, since the button are made with a elements.
  • Cycling through images is not restarted when stopped by the keyboard, this may be considered a problem by some designers