← All patterns · Status widgets

Carousel

Slideshow of items the user can advance through.

Pattern

A carousel rotates through a sequence of items — typically images or feature cards — with controls to advance, reverse, and pause. Auto-rotating carousels have particular accessibility constraints.

Roles

  • region
  • group

States and properties

aria-roledescription
Set to "carousel" so screen readers announce it correctly.
aria-label
Naming the carousel.
aria-live
On the slide region; off when auto-rotating, polite when paused.

Keyboard interaction

Tab
Move into the carousel controls.
Enter / Space on next/previous
Advance / reverse.

WCAG criteria

  • 2.2.2 — Pause, Stop, Hide
  • 2.1.1 — Keyboard

Canonical reference

WAI-ARIA Authoring Practices Guide — Carousel

More