Accessible Carousels & Sliders: The Definitive WCAG 2.2 Level AA Guide

Content sliders and hero carousels are widely used to showcase rotating promotions, testimonials, and features. Yet, unconstrained autoplaying carousels create severe cognitive, motor, and visual barriers. Implementing an accessible carousel requires strict adherence to WCAG 2.2.2 (Pause, Stop, Hide) and precise ARIA state announcements.

WCAG Success Criteria Governing Carousels

Mandatory Autoplay Pause/Stop Mechanisms

If a carousel advances automatically for more than 5 seconds, it must provide a persistent pause button. Additionally, the rotation must automatically pause whenever keyboard focus enters the carousel container or when the user hovers over the slider with a mouse.

<section 
  class="carousel-wrapper" 
  role="region" 
  aria-roledescription="carousel" 
  aria-label="Featured Case Studies">
  
  <div class="carousel-controls">
    <button type="button" id="pause-btn" aria-label="Pause automatic slide rotation">
      Pause
    </button>
    <button type="button" id="prev-btn" aria-label="Previous Slide">‹</button>
    <button type="button" id="next-btn" aria-label="Next Slide">›</button>
  </div>

  <div class="carousel-track" aria-live="polite">
    <div 
      class="carousel-slide" 
      role="group" 
      aria-roledescription="slide" 
      aria-label="1 of 3: Enterprise ADA Remediation">
      <h3>Enterprise ADA Remediation</h3>
      <p>How Rogabot eliminated 100% of accessibility litigation risk.</p>
    </div>
  </div>
</section>

Semantic HTML & ARIA Live Regions for Slide Traversal

When a user manually clicks 'Next Slide', assistive technology should announce the new slide content. Use `aria-live="polite"` so the announcement does not interrupt current screen reader speech. When autoplay is active, suppress live announcements to prevent constant auditory overload.

Keyboard and Touch Gesture Interaction Requirements

Support Left/Right arrow keys when focus is placed on slide indicator dots, and ensure swipe gestures do not prevent vertical page scrolling on mobile devices.

When to Replace Carousels with Static Card Grids

User research consistently proves that click-through rates on slides after Slide 1 drop below 2%. Replacing carousels with responsive CSS grid cards improves user engagement, SEO crawlability, and completely eliminates carousel accessibility overhead.