Pause, Stop, Hide for Auto-Moving Content
Give users control over carousels and video.
Pause, Stop, Hide for Auto-Moving Content is a free Web Accessibility Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Give Users Control
If content moves on its own, the user needs a way out. WCAG calls this pause, stop, or hide for auto-moving content. ⏸️
What Counts as Auto-Moving
Think carousels, auto-advancing slideshows, scrolling tickers, and looping background video. Anything that animates without a user action qualifies.
The Five-Second Rule
The criterion targets motion that lasts more than five seconds and runs alongside other content. A brief intro animation is exempt.
Why It Matters
Moving content steals attention and can be impossible to read for users with cognitive or motion sensitivities. Control gives the page back.
Offer a Pause Control
The simplest fix is a real pause button. Let users freeze a carousel so they can finish reading a slide in peace.
<button aria-label="Pause slideshow">Pause</button>Stop Is Stronger Than Pause
Pause can resume; stop ends the motion for good. Either satisfies the rule, as long as the user is truly in charge.
Hide Is an Option Too
Sometimes letting users hide the moving element entirely is best. A dismiss control on a ticker removes the distraction outright.
Pause on Hover and Focus
A carousel should also pause when the user hovers or tabs into it, so reading or interacting never fights the auto-advance.
Make the Control Reachable
The pause button itself must be keyboard accessible with a clear label. A control nobody can find does not count.
Pair It With Reduced Motion
Best of all, do not auto-play for users who reduce motion. Combine the preference check with a visible pause control.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Skip the Auto-Advance
Honestly, many carousels work better with no auto-advance at all. Let users click through at their own pace and the problem disappears.
Quick Check
What does the pause, stop, or hide rule require?
Recap
Auto-moving content needs a user-controlled pause, stop, or hide. Make it keyboard reachable and skip auto-play when motion is reduced. ✅
Frequently asked questions
Is the “Pause, Stop, Hide for Auto-Moving Content” lesson free?
Yes — the full text of “Pause, Stop, Hide for Auto-Moving Content” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Pause, Stop, Hide for Auto-Moving Content”?
Give users control over carousels and video. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Pause, Stop, Hide for Auto-Moving Content” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- prefers-reduced-motion in CSS and JS
- Vestibular Disorders and Parallax Risks
- The Three-Flash Threshold for Seizures
- Pause, Stop, Hide for Auto-Moving Content