Allow Users to Pause, Stop, or Hide Moving, Blinking, or Scrolling Content

Disabilities Affected: Cognitive, Visual

Success Criterion: 2.2.2

Level: A

For any moving, blinking, or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there must be a mechanism for the user to pause, stop, or hide it. The same applies to any auto-updating information (like a news ticker).

Why It Matters

Moving, blinking, or scrolling content can be highly distracting, making it difficult for users with attention deficits or cognitive impairments to concentrate on other parts of the page. For screen reader users, auto-updating content can constantly interrupt the reading flow. Fast blinking can trigger seizures in users with photosensitive epilepsy (see WCAG 2.3.1). Users need control over such dynamic content.

Fixing the Issue

Avoid auto-playing animations, carousels, sliders, marquees, or blinking text if possible. If such content is necessary and meets the criteria above, provide clear and easily accessible controls (like pause/play buttons) for the user to stop or pause the movement/updating. Ensure these controls themselves are keyboard accessible. For carousels, provide pause buttons and ensure users can manually advance slides.

Good Code Example

A simple JavaScript-controlled blinking element with a stop button:

Markup
Preview

<div id="blinking-notice" style="background-color: yellow; padding: 5px;">
  Special Offer! Limited Time Only!
</div>
<button id="stop-blinking-btn">Stop Blinking</button>

<script>
  const notice = document.getElementById('blinking-notice');
  const stopBtn = document.getElementById('stop-blinking-btn');
  let isBlinking = true;
  let blinkInterval;

  function blink() {
    notice.style.visibility = (notice.style.visibility === 'hidden' ? 'visible' : 'hidden');
  }

  function startBlinking() {
     blinkInterval = setInterval(blink, 500); // Blink every 500ms
  }

  function stopBlinking() {
    clearInterval(blinkInterval);
    notice.style.visibility = 'visible'; // Ensure it's visible when stopped
    isBlinking = false;
    stopBtn.textContent = "Start Blinking"; // Optional: change button text
  }

  stopBtn.addEventListener('click', () => {
    if (isBlinking) {
      stopBlinking();
    } else {
      // Optional: Allow restarting
      // startBlinking();
      // isBlinking = true;
      // stopBtn.textContent = "Stop Blinking";
    }
  });

  // Start blinking automatically
  startBlinking();

  // Automatically stop after 5 seconds if user hasn't interacted (optional good practice)
  // setTimeout(stopBlinking, 5000);
</script>

Special Offer! Limited Time Only!

Bad Code Example

Using the deprecated <marquee> tag or CSS animation without controls:

Markup
Preview

<marquee>This text scrolls automatically and cannot be easily stopped by the user.</marquee>

<style>
  @keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  .scrolling-text {
    white-space: nowrap;
    overflow: hidden;
    animation: scroll-left 10s linear infinite;
  }
</style>
<div class="scrolling-text">Auto-scrolling news update without user controls...</div>

This text scrolls automatically and cannot be easily stopped by the user.
Auto-scrolling news update without user controls…

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult