Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

Slider/Carousel Concepts

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

Overview

Carousels are like slideshows, in that they display only a portion of their content at any one time. They are typically content blocks containing images, text or both and can be static or rotating. In either case some content is hidden to be revealed by user action or the rotation script in time. The user has a choice whether or not to view the hidden content. To create or select an accessible carousel, consider the following aspects:

  • Structure: The carousel as a whole as well as individual slides should have structural markup (code) that enables users to establish where they are;
  • Controls: User interaction to change the display must be possible by both keyboard and mouse, as well as being identifiable, both visually and to people who can’t see them;
  • Action: When a control is activated the visually rendered effect should be replicated in actual content and functionality;
  • Scrolling: If the carousel automatically changes slides, a mechanism must be provided to pause or stop the movement.

Who benefits

Accessible carousels effectively draw attention to featured pages or products in a small space and at the same time ensure that:

  • People using keyboard navigation or voice input software: Can identify the current slide and navigate between slides;
  • People using screen readers: Will understand where they are and how to navigate between slides ;
  • Users aren’t distracted by movement:They will be able to pause the rotation while reading static content elsewhere on the page;
  • People who can’t read quickly: Can stop slide rotation giving them time to read and understand the content of each slide.

Important

Providing a mechanism to pause any automatic movement is a conformance requirement for the entire page on which the movement occurs. See conformance requirement 5 (non interference).

Relationship to WCAG 2.0:

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

  • Keyboard, SC2.1.1: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes … (Level A).

  • Pause, Stop, Hide, SC 2.2.2: … 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 … (Level A);

  • name, Role, Value SC 4.1.2: