Data and collections

Accessible carousels: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

A carousel needs understandable slide controls and an accessible way to stop automatic rotation when used. Preserve meaningful reading order, distinguish the current slide and avoid unexpected motion or focus changes.

A practical example

A product carousel shows several views of the same item. Previous and Next buttons have clear names, the current slide is identified, and rotation remains stopped after the user requests a pause.

How to check it

  1. Operate previous/next and any slide-selection controls with the keyboard.
  2. Pause automatic rotation and check focus/hover behavior and whether rotation restarts unexpectedly.
  3. Read the current slide and verify hidden slides do not create confusing focus stops or repeated announcements.

What can be missed

A rotating carousel often adds complexity without helping the task. Prefer a stable gallery when possible, and never use continuous announcements to narrate every automatic slide change.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<section aria-roledescription="carousel" aria-label="Product views">
  <button type="button">Previous view</button>
  <button type="button">Next view</button>
  <div role="group" aria-roledescription="slide" aria-label="1 of 3">Front view</div>
</section>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.