← Back to docs
Recipe

Accessible carousel

A keyboard-navigable, screen-reader–friendly carousel built with native HTML and Tailwind CSS. No JavaScript framework required.

Ingredients

  • Semantic <section> with aria-roledescription="carousel"
  • aria-label on each slide for screen readers
  • Tab-indexed navigation buttons with aria-controls
  • CSS scroll-snap-type for smooth native scrolling
  • prefers-reduced-motion guard for vestibular safety
  • Live region announcement of current slide index

Steps

  1. Wrap slides in a scroll container with overflow-x-auto snap-x snap-mandatory.
  2. Each slide gets snap-center shrink-0 w-full and a unique id.
  3. Add prev/next buttons that call scrollBy on the container.
  4. Wire aria-controls on buttons to the container id.
  5. Track visible slide via IntersectionObserver and update a live region.
  6. Disable transitions when prefers-reduced-motion is active.
  7. Ensure all interactive elements are reachable via Tab and operable with Enter / Space.

Accessibility checklist

  • ✓ WCAG 2.2 AA compliant when implemented correctly
  • ✓ Works with VoiceOver, NVDA, and JAWS
  • ✓ No focus traps — users can exit the carousel freely
  • ✓ Respects OS motion reduction preferences
Browse more recipesHome