Operable · 2.2 Enough Time
Anything that starts automatically and runs alongside other content must offer a way to pause, stop or hide it if it moves, blinks or scrolls for more than five seconds, or if it auto-updates (where controlling the update frequency also counts), unless the motion or updating is essential.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Try to read all three offers. In Passes, press Pause to stop them moving; in Fails nothing stops them.
The tools follow the version you last used.
What happened
Why it passes
The offers still rotate, but the Pause button, placed before them, stops the movement so you can read at your own speed and start it again later.
Why it fails
The offers change every four seconds with no way to stop them, so slow readers lose the text halfway through and the movement keeps pulling attention away.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
.ticker-text { display: inline-block; white-space: nowrap; animation: ticker-scroll 20s linear infinite;}@keyframes ticker-scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); }}The headlines scroll for as long as the page is open, and nothing lets the reader pause, stop or hide them.
Passes
Live preview
const ticker = document.querySelector(".ticker-text");const pauseButton = document.querySelector("#ticker-pause");pauseButton.addEventListener("click", () => { const paused = ticker.style.animationPlayState === "paused"; ticker.style.animationPlayState = paused ? "running" : "paused"; pauseButton.textContent = paused ? "Pause headlines" : "Play headlines";});A real button stops the scrolling and starts it again from where it stopped (technique G4). Put the button before the ticker so keyboard users reach it first.
Fails
Live preview
let current = 0;setInterval(() => { slides[current].hidden = true; current = (current + 1) % slides.length; slides[current].hidden = false;}, 4000);The slides change every four seconds for as long as the page is open, and there is no control to pause or stop them.
Passes
Live preview
let current = 0;let timer = null;function showNext() { slides[current].hidden = true; current = (current + 1) % slides.length; slides[current].hidden = false;}function play() { timer = setInterval(showNext, 4000); pauseButton.textContent = "Pause offers"; }function pause() { clearInterval(timer); timer = null; pauseButton.textContent = "Play offers"; }pauseButton.addEventListener("click", () => (timer ? pause() : play()));if (matchMedia("(prefers-reduced-motion: reduce)").matches) pause(); else play();The Pause offers button stops the rotation and Play offers starts it again. The carousel also starts paused when the system asks for reduced motion.
Why it matters
Moving and updating content distracts people with attention deficits or cognitive disabilities and makes text hard to follow for people with low vision or who read slowly. Constant updates can also interrupt screen reader users.
W3C: Understanding 2.2.2Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures