About the Carousel Widget

How to use the Carousel widget:

The carousel takes up three tab stops at most:

  • The 'previous' button (if not diabled)
  • The carrousel items list
  • The 'next' button (if not diabled)

When the carousel list is focused, it can be navigated using the following shortcuts:

  • Left Arrow: Move focus to the previous carousel item
  • Right Arrow: Move focus to the next carousel item
  • Page Up: Move focus to the next carousel item group
  • Page Down: Move focus to the previous carousel item group
  • Home: Move focus to the first carousel item in the list
  • End: Move focus to the last carousel item in the list

The carousel is marked up as an ARIA listbox widget. To be announced properly by screen readers, the accordion must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.

Accessibility Changes Made to the Original Carousel:

  • Added ARIA markup so role, name & state information is exposed
  • Added keyboard navigation for switching items using arrow keys
  • Made carousel items focusable and navigable

Demo: Sample Carousel Displaying Pictures of Flowers

My Favorite Flowers Carousel

  • Sun Flower
  • White Flower
  • Lilly
  • Orange Flowers
  • Petals
  • More Petals
  • Rose
  • Tulip
  • Unidentified Flower
  • Purple Flower