WCAG 2.2.2: How to Fix Moving, Blinking, and Auto-updating Content

What This Criterion Requires

WCAG 2.2.2 requires that for any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there is a mechanism to pause, stop, or hide it. Similarly, for auto-updating information that starts automatically and is presented alongside other content, a mechanism must be available to pause, stop, hide, or control the frequency of updates. This criterion addresses two distinct situations: content that moves or blinks (such as animations, auto-scrolling text, carousels, and animated backgrounds) and content that auto-updates (such as live feeds, stock tickers, chat windows, and automatically refreshing dashboards). The distinction between moving content and auto-updating content matters because moving content needs pause/stop/hide controls, while auto-updating content additionally allows controlling the update frequency. Content that blinks for less than five seconds is exempt, as is content where the movement or update is essential to the activity being performed.

Why It Matters

Moving and blinking content can be highly distracting for users with attention deficit disorders, cognitive disabilities, and learning disabilities. These users may find it impossible to focus on reading static content when an animated element is competing for their attention elsewhere on the page. Users with vestibular disorders may experience dizziness, nausea, or disorientation from moving content, particularly parallax effects and large animations. For screen reader users, auto-updating content can disrupt their reading flow by injecting new content or causing the page to reflow while they are navigating. Users with low vision who use screen magnification may not be able to track moving text or content that scrolls automatically. Even users without disabilities find auto-playing animations and auto-scrolling content distracting and frustrating. Providing controls to pause, stop, or hide moving content ensures all users can consume page content at their own pace without unwanted distractions.

Common Failures and How to Fix Them

<style>
  .ticker {
    overflow: hidden;
    white-space: nowrap;
  }
  .ticker-content {
    animation: scroll 20s linear infinite;
  }
  @keyframes scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>
<div class="ticker">
  <div class="ticker-content">Breaking: Important news headline scrolling continuously...</div>
</div>

<style>
  .ticker {
    overflow: hidden;
    white-space: nowrap;
  }
  .ticker-content {
    animation: scroll 20s linear infinite;
  }
  .ticker-content.paused {
    animation-play-state: paused;
  }
  @keyframes scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>
<div class="ticker">
  <button onclick="document.querySelector('.ticker-content').classList.toggle('paused')">
    Pause/Resume ticker
  </button>
  <div class="ticker-content">Breaking: Important news headline scrolling continuously...</div>
</div>

<section class="hero" style="position: relative;">
  <video autoplay loop muted class="bg-video">
    <source src="/videos/animated-bg.mp4" type="video/mp4">
  </video>
  <div class="hero-content">
    <h1>Welcome to our site</h1>
  </div>
</section>

<section class="hero" style="position: relative;">
  <video autoplay loop muted class="bg-video" id="bg-video">
    <source src="/videos/animated-bg.mp4" type="video/mp4">
  </video>
  <div class="hero-content">
    <h1>Welcome to our site</h1>
    <button onclick="toggleBgVideo()" aria-label="Pause background animation">Pause animation</button>
  </div>
</section>
<script>
  function toggleBgVideo() {
    const video = document.getElementById('bg-video');
    const btn = event.target;
    if (video.paused) {
      video.play();
      btn.textContent = 'Pause animation';
      btn.setAttribute('aria-label', 'Pause background animation');
    } else {
      video.pause();
      btn.textContent = 'Play animation';
      btn.setAttribute('aria-label', 'Play background animation');
    }
  }
  // Respect prefers-reduced-motion
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    document.getElementById('bg-video').pause();
  }
</script>

How to Test

1. Identify all moving, blinking, or scrolling content on the page that starts automatically, including animations, carousels, scrolling tickers, and animated backgrounds.
2. Verify that each moving element that lasts more than 5 seconds has a visible and keyboard-accessible mechanism to pause, stop, or hide it.
3. Check for auto-updating content (live feeds, stock tickers, chat windows) and verify that controls exist to pause updates or control update frequency.
4. Test that the page respects the prefers-reduced-motion media query to automatically reduce or disable animations for users who have set this preference in their operating system.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Framer Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Five Minute Accessibility Audit
• Keyboard Navigation Testing

Related WCAG Criteria

• WCAG 2.2.1
• WCAG 1.4.2
• WCAG 2.3.1