Comprehensive Guide

Accessible Carousels

Auto-play controls, keyboard navigation, and motion preferences

Carousel Fundamentals

Carousels (or sliders) show multiple pieces of content in a rotating sequence. The key ARIA roles are region, group for slides, and live regions for announcements.

role='region'

Wrap the carousel in a region with aria-roledescription="carousel" to identify it as a carousel widget.

Slide Groups

Each slide should be role="group" with aria-roledescription="slide" and label like "1 of 4".

Live Announcements

Use aria-live="polite" to announce slide changes: "Slide 2 of 4: Title".

Interactive Demo

Use the arrow buttons or dots to navigate. Try pressing Left/Right arrow keys when focused on the carousel.

Accessible Design

Building for everyone

Carousel Structure

<div role="region" 
     aria-roledescription="carousel" 
     aria-label="Featured content">
  
  <!-- Live region for announcements -->
  <div role="status" aria-live="polite" className="sr-only">
    Slide 2 of 4: Keyboard Navigation
  </div>
  
  <!-- Slides container -->
  <div>
    <div role="group" 
         aria-roledescription="slide" 
         aria-label="1 of 4"
         aria-hidden="false">
      <!-- Visible slide content -->
    </div>
    <div role="group" 
         aria-roledescription="slide" 
         aria-label="2 of 4"
         aria-hidden="true">
      <!-- Hidden slide content -->
    </div>
  </div>
</div>

Hide Non-Visible Slides

Use aria-hidden="true" on slides that are not currently visible. This prevents screen readers from reading all slides at once.

Understanding the Carousel Pattern

A carousel, also sold as a slider or slideshow, shows a series of panels in the same space, one or a few at a time, with controls to move between them and often a timer that advances them on its own. Its accessibility problems come from three places: motion the user did not ask for, controls that are not real controls, and content that is hidden from sight but still exposed to assistive technology, or the reverse.

The demo above shows the shape of a working solution. The whole widget is a landmark region with aria-roledescription="carousel" and a name. Each slide is a group with aria-roledescription="slide"and a "2 of 4" label, and slides that are off screen carry aria-hidden="true". Previous, Next, and Play/Pause are buttons with names that change with their state, the indicator dots are a tablist whose selected tab is the current slide, a polite live region announces "Slide 2 of 4" with the slide title, and any manual navigation pauses auto-play.

WCAG 2.2 Success Criteria Involved

Success criterion	Level	What it requires here
2.2.2 Pause, Stop, Hide	A	Anything that auto-advances for more than five seconds needs a way to pause, stop, or hide it. A visible Pause button that keeps its state is the standard answer.
2.1.1 Keyboard	A	Every slide must be reachable with the keyboard through the buttons; arrow keys are a convenience, not a substitute.
4.1.2 Name, Role, Value	A	Previous, Next, Play/Pause, and each indicator expose a name, a role, and, for the indicators, the selected state.
1.3.1 Info and Relationships	A	The slides are identified as a set and the position is available as text, not only as a row of dots.
1.1.1 Non-text Content	A	Image slides need alternative text that carries the slide's message; purely decorative backgrounds get an empty alt.
2.4.3 Focus Order	A	Changing slide must not move or drop focus; the control the user pressed keeps it.
2.4.7 Focus Visible	AA	Controls that sit over photographs need a focus indicator that stays visible on every slide's background.
2.5.8 Target Size (Minimum)	AA	Indicator dots and arrow buttons need a 24 by 24 CSS pixel target, or enough spacing that 24 pixel circles centred on them do not overlap. Tiny dots are a routine failure.
4.1.3 Status Messages	AA	A slide change that does not move focus must be announced through a live region so it is not a silent update.
2.3.3 Animation from Interactions	AAA	Level AAA, so not required for AA conformance, but respecting prefers-reduced-motion by removing the slide transition and disabling auto-play is the expected behaviour.

Expected Keyboard Interaction

Keyboard interaction for the carousel demo
Key	Expected result
Tab	Moves through the controls in order: Previous, Play/Pause, Next, then each indicator dot. Focus is never trapped inside the carousel.
Enter or Space	Activates the focused control: changes slide, toggles auto-play, or jumps to the chosen slide.
Left arrow	While any control inside the carousel has focus: shows the previous slide and pauses auto-play.
Right arrow	While any control inside the carousel has focus: shows the next slide and pauses auto-play.

The Failures We See Most Often

Auto-play with no way to stop it. The rotation runs for the life of the page, or the pause control appears only on hover, which keyboard and touch users never trigger. Screen reader users have the content change under them mid-sentence.
Hidden slides are still in the accessibility tree. All five slides are read out in sequence, and Tab lands on links inside slides that are scrolled out of view, so focus vanishes. The opposite mistake, hiding the visible slide, is just as common in libraries that animate with clones.
Controls that are not controls. Arrows drawn with CSS on a div, dots with no names, a Play/Pause icon whose accessible name never changes, or a whole slide made clickable without being a link.

Before You Build One

Ask whether the carousel is carrying information anyone needs to see. Content after the first slide is rarely reached, and every slide beyond the first is content you have chosen to hide by default. A stacked layout, a short list of cards, or a set of tabs usually communicates the same material with none of the timing, focus, and announcement problems above. If a carousel is required, default it to paused, keep the Pause button visible, and honour the reduced-motion preference.

To test yours: unplug the mouse and reach every slide; confirm a screen reader hears one slide at a time and hears the change; check the pause control with a keyboard; measure the dots; and enable reduced motion in the operating system to confirm the transition and the timer switch off. There is no separate in-depth guide for carousels yet, so the criterion pages linked in the table are the reference, along with the W3C ARIA Authoring Practices carousel pattern. The 2.2.2 Pause, Stop, Hide page covers the timing rules in detail.