The 2025 TestParty Guide to WCAG 2.2.2 – Pause, Stop, Hide (Level A)

Why did the auto-playing carousel get kicked out of the accessibility party? Because it wouldn't stop moving and let anyone else get a word in!

WCAG 2.2.2 requires that users can pause, stop, or hide any content that moves, blinks, scrolls, or auto-updates for more than five seconds. This Level A criterion ensures that distracting motion doesn't prevent people from reading or interacting with your site—and that users, not your JavaScript, control the experience.

Table of Contents

• What WCAG 2.2.2 Requires
• Why This Matters
• Quick Implementation Guide
• Common Mistakes to Avoid
• How to Test for WCAG 2.2.2
• How TestParty Helps
• FAQs

What WCAG 2.2.2 Requires

WCAG 2.2.2 applies to two categories of dynamic content that starts automatically and appears alongside other content:

Moving, blinking, or scrolling content that lasts more than five seconds must have a user-accessible mechanism to pause, stop, or hide it—unless the movement is essential to the activity.

Auto-updating content (like live news feeds, stock tickers, or chat streams) must provide controls to pause, stop, hide, or adjust the update frequency—unless the updates are essential.

Key exceptions and special cases:

• Five-second threshold: Content that stops moving or updating within five seconds doesn't require controls
• Essential movement: If the motion is fundamental to the activity (like a game or real-time visualization), controls aren't required
• Preload animations: Loading spinners and progress indicators during initialization phases are considered essential
• Not parallel content: If the moving content is the only thing on screen (like a full-screen video player), this criterion doesn't apply

What content is affected:

• Image carousels and slideshows
• Scrolling news tickers and marquees
• Animated GIFs that loop indefinitely
• Auto-refreshing content sections
• Live chat widgets and notification streams
• Stock tickers and real-time data displays
• Parallax scrolling effects that animate independently

Why This Matters

People with attention deficit disorders, reading disabilities, or cognitive differences can't focus on static content when something nearby is moving. Users with low vision who magnify content may only see part of the screen—if that part keeps changing, they can't read it.

From a legal standpoint, WCAG 2.2.2 is a Level A requirement, meaning it's mandatory for ADA Title II and Title III compliance, Section 508 conformance, EN 301 549 (the EU standard), and the European Accessibility Act. Courts have ruled against organizations whose auto-playing carousels and scrolling content prevented users from completing transactions or accessing services.

The business case is straightforward: motion that users can't control drives them away. Conversion rate studies consistently show that auto-advancing carousels perform worse than static hero images with user-controlled navigation. Giving users control improves engagement, reduces bounce rates, and builds trust.

Quick Implementation Guide

1. Add visible pause/stop controls to all auto-playing content

Place a clearly labeled button near the moving content. "Pause," "Stop," or a standard pause icon (two vertical bars) work well.

<div class="carousel" role="region" aria-label="Featured products" aria-live="polite">
  <button class="carousel-pause" aria-label="Pause carousel">
    <svg aria-hidden="true"><!-- pause icon --></svg>
    Pause
  </button>
  <div class="carousel-slides">
    <!-- slides here -->
  </div>
</div>

2. Make controls keyboard accessible

Ensure pause/stop buttons are in the tab order and operable with Enter or Space. Don't hide controls on focus or make them appear only on hover.

3. Preserve state when pausing

When users pause content, resume from the exact point where they paused—don't restart from the beginning. For auto-updating content, you don't need to buffer updates that occurred during the pause (that can be misleading), but the pause should be reliable.

4. Use short-duration animations when controls aren't needed

If your animation or transition completes in under five seconds and doesn't repeat, you don't need controls. Set animated GIFs to play once or limit loops to five seconds total.

5. Respect user preferences

Check for prefers-reduced-motion and disable auto-play for users who've indicated they want less motion:

@media (prefers-reduced-motion: reduce) {
  .carousel {
    animation: none;
  }
}

Key techniques: G4 (pause and restart), G186 (stop control), SCR33 (script-controlled scrolling with pause), G11 (blink for less than 5 seconds), G152 (stop animated GIFs after 5 seconds).

Common Mistakes to Avoid

Auto-advancing carousels with no pause button. This is the most common violation. If your homepage hero rotates through slides every few seconds, you must provide a pause control—preferably visible by default, not hidden until hover.

Pause buttons that only appear on hover or focus. Users who can't use a mouse precisely, or who navigate by voice, may never trigger the hover state. Make controls persistently visible or ensure they're announced to assistive technology.

Animated GIFs that loop forever. A three-second animation that loops 20 times violates this criterion. Either set the GIF to stop after one loop (total duration under 5 seconds) or replace it with a video element that has controls.

Live chat widgets and notification toasts that can't be paused. If your site has a live chat that auto-scrolls as new messages arrive, provide a way to pause the auto-scroll. Similarly, if notification banners appear and disappear automatically, ensure they don't distract from primary content or provide a "pause notifications" option.

Confusing "pause" with "hide." Pause means the content stops moving but remains visible. Hide means it disappears. Both are acceptable mechanisms, but pause is usually better for content users want to see—they just want it to hold still.

How to Test for WCAG 2.2.2

Automated testing catches some issues:

• Scanners can detect <marquee> and <blink> elements (obsolete but still found in legacy code)
• Tools can flag animated GIFs and identify carousels with auto-advance scripts
• Linters can check for missing prefers-reduced-motion media queries

Manual testing is essential:

• Identify auto-playing content: Load the page and watch for anything that moves, scrolls, blinks, or updates automatically for more than five seconds
• Look for controls: Check if there's a visible, labeled pause, stop, or hide button near the moving content
• Test keyboard access: Tab to the control and activate it with Enter or Space
• Verify it works: Confirm the content actually stops and resumes from the paused point
• Check auto-updating sections: If the page has live feeds, stock tickers, or chat widgets, verify you can pause updates or adjust frequency

What to document:

• Location of each auto-playing element
• Whether controls are present, visible, and functional
• Whether controls are keyboard accessible
• Duration of animations (if under 5 seconds, note that controls aren't required)

How TestParty Helps

TestParty's AI-powered scanning detects WCAG 2.2.2 violations across your site and integrates remediation directly into your development workflow.

What TestParty detects:

TestParty's DOM and source code analysis identifies moving, blinking, and auto-updating content that lacks user controls:

• Carousels and slideshows with auto-advance timers but no pause mechanism
• Animated GIFs that loop indefinitely (TestParty analyzes GIF metadata to determine loop count and total duration)
• Scrolling marquees and tickers implemented with CSS animations or JavaScript
• Auto-refreshing sections using setInterval, setTimeout, or meta refresh tags
• Live regions (aria-live) that update automatically without user-controllable pause options
• CSS animations and transitions that exceed five seconds and lack prefers-reduced-motion fallbacks

TestParty flags each instance with the specific WCAG 2.2.2 requirement it violates, the location in your codebase, and the severity (Level A violations are marked critical).

How TestParty suggests fixes:

For each detected issue, TestParty generates context-aware remediation guidance and, where possible, code-level fixes:

• Auto-generated pause button markup: TestParty suggests accessible button HTML with proper ARIA labels and keyboard support, positioned near the moving content
• JavaScript snippets: For carousels and auto-updating sections, TestParty provides sample event handlers to pause/resume animations and respect user preferences
• CSS patches: For CSS-based animations, TestParty generates prefers-reduced-motion media queries and suggests animation-duration adjustments
• GIF replacement recommendations: When animated GIFs violate the criterion, TestParty flags them and suggests converting to video elements with controls or limiting loop counts

All suggested fixes are reviewed by your development team or TestParty accessibility specialists before merging. TestParty doesn't auto-deploy changes—it surfaces issues and proposes solutions that you approve.

Developer workflow integration:

TestParty integrates into your CI/CD pipeline and code review process to catch 2.2.2 violations before they reach production:

• Pre-commit and PR checks: TestParty scans branches for new or modified carousels, animations, and auto-updating components, flagging missing controls at the pull request level with line-by-line annotations
• CI/CD gates: Configure TestParty to block merges if critical Level A violations (like auto-playing carousels without pause buttons) are introduced
• IDE integration: Developers see real-time feedback as they write code—if they add a setInterval for content rotation, TestParty prompts them to include a pause control
• Template and theme-level fixes: For ecommerce platforms like Shopify and WordPress, TestParty works at the theme level, so fixing a carousel component once cascades across thousands of product and landing pages

This shift-left approach prevents regressions. Once you've remediated a carousel, TestParty monitors it in every build to ensure the pause button doesn't get accidentally removed.

Ongoing monitoring:

TestParty continuously tracks WCAG 2.2.2 compliance across your site:

• Dashboards show the count of auto-playing elements with and without controls, trending over time
• Regression alerts notify you if a previously compliant carousel or animation loses its pause button in a new deployment
• Audit-ready reports document all moving content, the controls provided, and test results—useful for legal reviews, procurement requirements, and accessibility statements

TestParty's monitoring ensures that as your site evolves—new marketing campaigns, seasonal content, third-party widgets—you maintain compliance with 2.2.2 without manual re-testing.

FAQs About WCAG 2.2.2

What is WCAG 2.2.2 in plain language?

WCAG 2.2.2 requires that if your website has content that moves, blinks, scrolls, or auto-updates for more than five seconds, users must be able to pause, stop, or hide it. This gives people control over distractions so they can focus on the content they came to read or interact with.

Is WCAG 2.2.2 required for ADA compliance?

Yes. WCAG 2.2.2 is a Level A success criterion, which means it's part of the baseline for ADA Title II and Title III compliance, Section 508 conformance, and international standards like EN 301 549 and the European Accessibility Act. Courts have found violations of 2.2.2 to be barriers to access in ADA lawsuits.

Do I need a pause button if my carousel auto-advances every 3 seconds?

Yes. Even though each individual slide might show for only three seconds, if the carousel keeps cycling for more than five seconds total, you need a pause control. The five-second threshold applies to the overall duration of the movement, not each individual transition.

What about loading spinners and progress bars?

Loading spinners and progress indicators during a preload phase are considered essential and don't require pause controls—users can't interact with the page yet anyway, and the animation communicates that the system is working. Once the page is interactive, any ongoing animations need controls.

Can I just make my animated GIF stop after 5 seconds instead of adding a button?

Yes. If you set your animated GIF to play once (or loop a few times) and stop within five seconds total, you don't need a pause button. This is often the simplest solution for decorative animations. Use tools like Ezgif or Photoshop to edit GIF loop counts.

Does this apply to background videos?

If a background video auto-plays and lasts more than five seconds, and there's other content on the page users need to read, then yes—you need to provide pause or stop controls. Full-screen videos (where the video is the only content) are exempt, but most background hero videos appear alongside navigation, headings, and calls to action, so they're covered by 2.2.2.

What's the difference between "pause," "stop," and "hide"?

• Pause means the content stops moving but remains visible, and users can resume it from where it paused.
• Stop means the content stops moving and won't resume (or restarts from the beginning if resumed).
• Hide means the content disappears entirely.

All three are acceptable mechanisms. Pause is usually the best user experience for content people want to see—they just want it to hold still.

Some TestParty features described in this article are currently under development. Visit TestParty.ai to learn more about our current capabilities and roadmap, or book a demo at TestParty.ai/book-a-demo to see TestParty in action.

Disclaimer: Some of this article was generated with Large Language Models (LLMs) and Artificial Intelligence (AI). There may be some errors and we advise you to consult with human professionals for detailed questions.