Accessible Carousel Design

Carousels are a common homepage feature, used to highlight events, announcements, and featured content. But they concentrate several accessibility problems in one component: text embedded in images, auto-advancing motion, low-contrast overlays, and content that users may miss entirely.

Common failures in carousels

• Text embedded in slide images - screen readers cannot read it; it becomes blurry when zoomed
• Low contrast text overlaid on photos - fails WCAG contrast requirements, especially at image edges
• Auto-rotation without user controls - violates WCAG 2.2.2 and is disorienting for users with cognitive or attention differences
• Critical information only in the carousel - users who miss a slide lose access to that content entirely
• No keyboard or screen reader access to slide controls - previous/next buttons must be keyboard-operable and labeled

Design principles

Never make the carousel the only source of important information

If a carousel slide promotes an upcoming event, that event must also appear in a dedicated events listing. The carousel is a visual highlight reel - not a primary information channel.

Provide user control over motion

<button aria-label="Pause slideshow">Pause</button>
<button aria-label="Previous slide">Previous</button>
<button aria-label="Next slide">Next</button>

If the carousel auto-advances, it must be pausable. Users with vestibular disorders, ADHD, or cognitive disabilities may find auto-advancing motion distracting or disorienting.

Duplicate slide content as accessible text

<div class="slide" aria-roledescription="slide" aria-label="Slide 1 of 4">
  <img src="summer-reading.jpg" alt="">
  <div class="slide-caption">
    <h2>Summer Reading Program</h2>
    <p>June 1 - August 31. Register at the desk or
       <a href="/summer-reading">online</a>.</p>
  </div>
</div>

ARIA for carousels

<section aria-label="Featured announcements"
         aria-roledescription="carousel">
  <div role="group"
       aria-roledescription="slide"
       aria-label="1 of 3">
    <!-- slide content -->
  </div>
</section>

A simpler alternative

Before adding a carousel, consider whether a static featured banner and a clearly visible events or news section below it would serve users better. Carousels have well-documented low click-through rates on slides beyond the first. A well-designed static layout often outperforms an accessible carousel in both usability and engagement.

WCAG criteria