Accessible carousel (slider)

The hero slider on the home page and product image carousels are among the most criticised patterns in accessibility — partly because they are often built badly, partly because people rarely look past the first slide. If you use one, make it controllable. This page is part of the accessible UI patterns series.

When to use a carousel

The APG describes a carousel as presenting "a set of items, referred to as slides, by sequentially displaying a subset of one or more slides". Use it for product images on a product page or a short set of related items. For promotions that each matter, consider showing them as separate blocks: nothing is hidden and nothing moves.

The APG points out two specific problems: hidden slides must not stay available to screen readers (for example by just moving them off-screen), and unannounced rotation confuses screen reader users who suddenly land in content from another slide.

Relevant WCAG criteria

• 2.2.2 Pause, Stop, Hide (A): moving content that "(1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content" needs "a mechanism for the user to pause, stop, or hide it". W3C lists auto-advancing presentations among the examples.
• 2.1.1 Keyboard (A): all controls work with the keyboard; swipe is not the only way.
• 2.5.1 Pointer Gestures (A): swiping needs a single-pointer alternative such as next and previous buttons.
• 1.1.1 Non-text Content (A): slide images have text alternatives; text inside banner images also needs to be in the alternative.
• 1.4.5 Images of Text (AA): promotional text should be real text, not baked into the image.
• 4.1.2 Name, Role, Value (A): buttons have names; the picker shows the current slide.
• 2.5.8 Target Size (Minimum) (AA): dot indicators are often far below 24 by 24 CSS pixels.
• 2.4.3 Focus Order (A): hidden slides do not receive focus.

Code example

<section class="carousel" aria-roledescription="carousel" aria-label="Autumn offers">
  <button type="button" class="rotation" aria-label="Stop slide rotation">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Previous slide">‹</button>
  <button type="button" aria-controls="slides" aria-label="Next slide">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 of 3">
      <a href="/en/autumn-jackets">
        <img src="jackets.jpg" alt="Autumn jackets, 20% off until Sunday">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 of 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 of 3" hidden>…</div>
  </div>
</section>

What the APG specifies:

• The container is a region (a section with a name) or group with aria-roledescription="carousel" and a label that does not contain the word "carousel".
• Each slide is a group with aria-roledescription="slide" and a name; if slides have no unique names, a position such as "3 of 10" works.
• The slide wrapper has aria-atomic="false"; aria-live is off while the carousel rotates automatically and polite when it does not, so that manual changes are announced.
• The rotation button's label describes the action — "Stop slide rotation" or "Start slide rotation" — so it needs no aria-pressed.
• Rotation stops when keyboard focus enters the carousel and resumes only if the user asks; it also pauses while the mouse hovers over the carousel.
• A slide picker can be built as tabs (slides become tabpanel) or as a labelled group of buttons, where the current slide's button has aria-disabled="true" rather than disabled, so it stays in the tab sequence.

Keyboard interaction

The APG puts the rotation control first in the tab sequence, before the rotating content.

Common mistakes on online shops

• Hero sliders that rotate every three seconds with no pause button.
• Hidden slides moved off-screen with links that still receive focus, so Tab jumps into invisible content.
• Dots as the only navigation, tiny and without names ("button", "button", "button").
• Promotional text only inside the image, with alt="banner".
• Product image carousels that work only with swipe on mobile, and only with thumbnails that are div elements on desktop.
• Rotation continues while the user reads or tabs into the slide.
• Cloned slides for infinite looping that duplicate links and IDs.

What automated checks catch vs manual testing

All are cards in our rule library. 2.2.2 cannot be tested automatically: whether the slider moves, for how long and whether it can be paused needs a person. Also test with the keyboard that rotation stops on focus, that hidden slides cannot be reached and that a screen reader announces manual slide changes.

Run the free one-page check on your home page. It is an automated check, not a full audit.

Frequently asked questions

Does WCAG allow auto-rotating carousels?

Yes, with a way to stop them. 2.2.2 Pause, Stop, Hide requires a mechanism to pause, stop or hide moving content that starts automatically, lasts more than five seconds and is shown in parallel with other content.

What controls does an accessible carousel need?

According to the APG: previous and next slide buttons, optionally slide picker buttons or tabs, and for auto-rotating carousels a button to stop and start rotation that comes first in the tab order.

Should rotation stop when the user focuses the carousel?

Yes. The APG says rotation stops when keyboard focus enters the carousel and does not resume unless the user asks for it, and pauses while the mouse hovers over it.

How do screen readers know which slide is shown?

Each slide is a group with aria-roledescription="slide" and a name such as "3 of 5", and the slide container has aria-live="polite" when the carousel is not rotating automatically, so manual slide changes are announced.

Can an automated check test a carousel?

It finds slide images without alternative text, buttons without names, focusable links in hidden slides and small targets. It cannot test whether rotation can be paused or stops on focus.

Sources

• W3C WAI, APG Carousel pattern: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
• W3C, Understanding 2.2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html