Carousel A11Y

title: "Accessible Carousel — Rotating Content with Keyboard and Screen Reader Support" description: "Learn how to build accessible carousels with pause controls, keyboard navigation, screen reader announcements, and ARIA live regions for dynamic updates." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

Accessible carousels provide controls to pause, navigate, and understand rotating content through proper ARIA roles, keyboard support, and live region announcements.

## What You'll Learn

How to build carousels that are accessible to keyboard users, screen reader users, and users who need control over auto-rotating content.

## Why It Matters

Auto-rotating carousels cause motion sickness, disorient screen reader users, and make it hard to interact with content that moves unexpectedly.

## Real-World Use

A homepage carousel shows three featured products. The carousel has Pause, Previous, and Next buttons. A screen reader user navigates to the carousel region, reads the current slide, and clicks Next to see the next product.

## Carousel Implementation

```html
<div role="region" aria-label="Featured products" aria-roledescription="carousel">
  <div aria-live="off">
    <div role="group" aria-roledescription="slide" aria-label="1 of 3">
      <h2>Product One</h2>
      <p>Description of first product.</p>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 of 3" hidden>
      <h2>Product Two</h2>
      <p>Description of second product.</p>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="3 of 3" hidden>
      <h2>Product Three</h2>
      <p>Description of third product.</p>
    </div>
  </div>

  <button aria-label="Previous slide">Prev</button>
  <button aria-label="Next slide">Next</button>
  <button aria-label="Pause auto-rotation" aria-pressed="false">Pause</button>
</div>

Slide Controls

let currentSlide = 0;
let isPaused = false;

function showSlide(index) {
  const slides = document.querySelectorAll('[role=group]');
  slides.forEach((s, i) => {
    s.hidden = i !== index;
    s.setAttribute('aria-hidden', i !== index);
  });
}

document.querySelector('[aria-label="Next slide"]').addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % totalSlides;
  showSlide(currentSlide);
});

Pause Auto-rotation

let autoTimer = setInterval(nextSlide, 5000);

pauseButton.addEventListener('click', function() {
  isPaused = !isPaused;
  this.setAttribute('aria-pressed', isPaused);
  if (isPaused) {
    clearInterval(autoTimer);
  } else {
    autoTimer = setInterval(nextSlide, 5000);
  }
});

Common Mistakes

1. Auto-rotation without pause control

WCAG requires a mechanism to pause, stop, or hide moving content that lasts more than 5 seconds.

2. No keyboard navigation for slides

Users must be able to navigate between slides using Previous/Next buttons.

3. Missing slide labels

Each slide needs aria-label="N of M" or a similar identifier.

4. Interactive content inside slides

Links and buttons in carousels are hard to access. Use simple content in slides.

5. aria-live on auto-rotating content

Use aria-live="off" so screen readers are not interrupted by every slide change. Only announce when the user interacts.

Practice Questions

1. What ARIA attribute describes the carousel region? aria-roledescription="carousel" on the region describes its purpose.

2. What WCAG criterion requires a pause mechanism? Success Criterion 2.2.2 (Pause, Stop, Hide) requires a way to pause auto-updating content.

3. Why should aria-live be off for auto-rotating slides? To prevent screen readers from announcing every slide change, which would be disruptive.

Challenge: Build a carousel with three slides. Include Previous, Next, and Pause buttons. Add keyboard support and test with a screen reader.

FAQ

Mini Project

Create a testimonial carousel with 4 quotes. Include Previous, Next, and slide indicators. Add a Pause button for auto-rotation. Test keyboard and screen reader support.

What's Next

Learn how to build an Accessible Mega Menu with complex dropdown hierarchies that work with keyboard navigation.