Carousel Concepts

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

Carousels, commonly also referred to as “slide shows” or “sliders”, display a series of content items one at a time; for example, a series of news headlines. Carousels are usually animated, so that the displayed item is periodically rotated. This tutorial highlights the particular accessibility considerations for such carousels:

  • Structure: Provide structural markup for the carousel and its items, and later enhance these structures with styling and scripting.

  • Functionality: Provide functionality to display the carousel items one at a time, and to allow users to browse through them.

  • Animations: Provide users with control over any animations in your carousel.

Why is this important?

Carousels are frequently used, in particular on home pages, to draw the readers' attention to featured articles and products of the website. Given their prominence, inaccessible carousels can be a major obstacle for many website visitors. On the other hand, accessible carousels provide more effective access for many users including:

  • People using keyboard navigation and voice input software can navigate between carousel items.
  • People using screen readers will understand where they are and how to navigate between carousel items.
  • People who are distracted by movement are able to pause the animations while reading the web page.
  • People who need more time to read have sufficient time to read and understand each carousel item.

Success Criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)

  • 2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true:

    • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and

    • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

    (Level A)

  • 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)