A carousel is a set of panels shown one at a time in the same space, with previous and next controls and, more often than not, a timer. The timer is the problem. Rule 2.2.2 covers content that starts moving by itself, runs past five seconds and sits alongside other content, and it asks at Level A for a mechanism to pause, stop or hide it, unless the movement is essential to the activity. Very few marketing carousels are. Plenty of plugins ship with autoplay on and a pause control that is missing, unlabelled or unreachable, so check yours rather than assuming the plugin handled it. This is also one of the four rules that apply to everything on a page whether you rely on it or not. A third-party carousel cannot be scoped out of a conformance claim. The five seconds is a weaker shield than it looks, too. The same rule has a second half for content that updates itself, and that half carries no five-second allowance at all. It does hand you one extra way out, since letting somebody control how often the content updates counts there alongside pausing, stopping and hiding it. The essential exception covers both halves.
In practice
The pause control has a position as well as a job. W3C's own pattern puts it first in the tab sequence inside the carousel, and calls it essential that it comes before the rotating content so it can be found. A pause button sitting after five slides is reachable and useless. The same pattern asks for two behaviours the rule never mentions. Rotation stops when keyboard focus enters the carousel and does not start again unless the person asks it to, and it stops while the mouse is hovering.
The screen reader failure is not the missing button. It is content changing underneath somebody mid-read. A reader on the first slide asks for the next element and hears an element from the second slide, with nothing telling them the context just moved. W3C's pattern treats a live region around the slides as optional, and is specific about what to do if you use one. Switch it off while the carousel is rotating by itself, and set it to polite only once the person has taken control. Announcing every slide change politely on an autoplaying carousel is the wrong fix applied loudly.
The second structural problem is off-screen slides left in the accessibility tree. Hidden with the wrong technique, the slides nobody can see are still there to be read and still able to take focus. So a keyboard user tabs into content that is not on the screen. Starting automatically also covers more than autoplay on load, because W3C reads it to include motion that begins on hover or when the carousel scrolls into view.
Why it matters
The group this rule protects first is not the one people assume. W3C names anybody who has trouble reading stationary text quickly, anybody who has trouble tracking a moving object, and people with attention deficit disorders. The content somebody needs is sliding away while they read it. Turning autoplay off answers all of that and takes the pause-button problem with it, which makes it the cheapest thing on the list. Be clear about what it does not touch. The controls still need names, the slides still need keyboard operation, and the ones off screen still need to be out of the accessibility tree.
Read the first slide at your own pace
Open your own carousel and read the first slide the way you would read a paragraph you cared about. If it moved before you finished, it moved before everybody else finished too. W3C picked five seconds as long enough to get somebody's attention and short enough to wait out, which is not the same as long enough to read.
Where this shows up on the site
Related terms
- TimeoutA timeout is a time limit the content sets, such as a session that expires, a booking held for ten minutes, or a form that clears itself after a while.
- prefers-reduced-motionprefers-reduced-motion is a preference people set in their operating system or their browser, and it reaches your CSS as a media query and your JavaScript as a check you can read.
- Keyboard accessibilityKeyboard accessibility means every piece of functionality on the page can be operated through a keyboard interface.
- Live regionA live region is a part of the page marked so that assistive technology announces changes to it without the user having to go and look.
- Pointer gestureA pointer gesture is a touch or mouse action where the path your finger takes matters, or where more than one finger is on the screen at once.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.