Carousel

What Is a Carousel?

A carousel is a UI component that cycles through multiple slides (banners, features, photos, etc.) in the same area. It's commonly used for hero banners on homepages and product galleries.

While convenient, carousels are prone to accessibility issues when theyauto-rotate without user control, cannot be stopped, orcannot be operated with a keyboard — making them one of the most problematic patterns.

Why Does Accessibility Matter?

• People who struggle with auto-playing content. Continuously moving banners are a significant burden for people who read slowly, have difficulty maintaining attention, or are sensitive to motion (e.g., vestibular disorders). The ability to stop the rotation is essential(WCAG 2.2.2 "Pause, Stop, Hide").
• Keyboard-only users. If the previous/next/play-pause controls are built with<div> elements, they cannot be operated. Use native <button> elements instead.
• Screen reader users. Without labels like "1 of 3" on each slide, users cannot tell how many slides there are or which one is currently displayed. If content is continuously announced during auto-rotation, it becomes confusing — turning off aria-live during rotation is key.

Live Demo (Recommended Implementation)

The carousel below follows the APG pattern. Try operating the play/pause and previous/next controls with your keyboard.

Keyboard Interaction

Required WAI-ARIA Roles & Properties

Implementation: Recommended Pattern (Good)

Markup:

<section class="carousel"
         aria-roledescription="carousel"
         aria-label="Featured Picks">
  <!-- Play/pause button is required for auto-rotating carousels -->
  <div class="carousel-controls">
    <button type="button" aria-label="Stop auto-rotation" data-toggle>⏸</button>
    <button type="button" aria-label="Previous slide" data-prev>‹</button>
    <button type="button" aria-label="Next slide" data-next>›</button>
  </div>

  <div class="carousel-slides">
    <div role="group" aria-roledescription="slide" aria-label="1 of 3">
      …Slide 1…
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 of 3" hidden>
      …Slide 2…
    </div>
    <div role="group" aria-roledescription="slide" aria-label="3 of 3" hidden>
      …Slide 3…
    </div>
  </div>
</section>

Playback control and pause script:

let index = 0;
let playing = true;
let timer = null;

function show(i) {
  index = (i + slides.length) % slides.length;
  slides.forEach((s, n) => (s.hidden = n !== index));
}
function start() {
  playing = true;
  toggle.setAttribute('aria-label', 'Stop auto-rotation');
  // Turn off live region during rotation to prevent disruptive announcements
  slidesBox.setAttribute('aria-live', 'off');
  timer = setInterval(() => show(index + 1), 4000);
}
function stop() {
  playing = false;
  toggle.setAttribute('aria-label', 'Start auto-rotation');
  // Announce changes when stopped or manually controlled
  slidesBox.setAttribute('aria-live', 'polite');
  clearInterval(timer);
}

toggle.addEventListener('click', () => (playing ? stop() : start()));
prev.addEventListener('click', () => { stop(); show(index - 1); });
next.addEventListener('click', () => { stop(); show(index + 1); });

// Pause auto-rotation on focus/hover
carousel.addEventListener('mouseenter', () => playing && clearInterval(timer));
carousel.addEventListener('mouseleave', () => playing && start());
carousel.addEventListener('focusin', () => playing && clearInterval(timer));
carousel.addEventListener('focusout', () => playing && start());

Anti-pattern (Bad)

Below is a carousel with unstoppable auto-rotation. The arrows are <div>elements that cannot receive focus, and the slides have no position labels.

<!-- ❌ Anti-pattern -->
<div class="carousel">
  <!-- No way to stop auto-rotation, no slide labels -->
  <div class="slides">
    <div class="slide">Feature 1</div>
    <div class="slide" style="display:none">Feature 2</div>
  </div>
  <!-- div arrows cannot receive focus -->
  <div class="arrow" onclick="prev()">‹</div>
  <div class="arrow" onclick="next()">›</div>
</div>
<script>
  // Unstoppable infinite auto-rotation
  setInterval(next, 2000);
</script>

Implementation Checklist

• A play/pause button is provided whenever auto-rotation is used
• Auto-rotation pauses while the carousel has focus or hover
• Previous, next, and play/pause controls all use native <button> elements (not div)
• Icon buttons have aria-label, and the label toggles between stop and start states
• Each slide has role="group" with a label indicating its position (e.g. "1 of 3")
• aria-live is set to off during auto-rotation and polite when stopped or manually controlled
• Non-visible slides are hidden
• aria-roledescription="carousel" is applied (optional), and focus indicators are visible

Source (English):Carousel Pattern — W3C APG(opens in a new tab)