How to build an accessible Carousel in React

The container is a labelled region with aria-roledescription="carousel"; each slide is a labelled group ("n of total"); prev/next are real buttons and the dot indicators use roving tabindex with arrow-key navigation. Scrolling honours prefers-reduced-motion.

When to use a Carousel

• Presenting a sequence of media or cards the user pages through one at a time
• Image galleries, onboarding decks, or featured-content rotators
• When horizontal swiping/scrolling is a natural interaction on touch devices

When not to use it

• Content users must compare side-by-side — show a grid instead
• Critical information that must always be visible — carousels hide most of their content

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• Home
• End

Common mistakes

Avoid: Auto-rotating carousel for primary navigation or key calls-to-action

Prefer: A static list or grid where every item is visible

Auto-rotation and hidden slides reduce discoverability and accessibility of important content

Example

<Carousel>
  <img src="/1.jpg" alt="" />
  <img src="/2.jpg" alt="" />
</Carousel>

See the full Carousel reference →