WCAG 2.2.2: Pause, Stop, Hide

What This Rule Means

WCAG 2.2.2 (Pause, Stop, Hide) is a Level A success criterion under the Operable principle. It governs any content that moves, blinks, scrolls, or updates automatically on a page. The rule establishes two distinct requirements depending on how the content behaves:

For moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and is presented alongside other content, users must be given a mechanism to pause, stop, or hide it. This covers CSS animations, JavaScript-driven carousels, marquee text, blinking elements, scrolling tickers, and animated banners.

For auto-updating content — such as live scoreboards, stock tickers, social media feeds, or news headlines that refresh at intervals — users must be able to pause, stop, hide, or control the frequency of the updates.

A pass requires that a clearly operable control (a button, keyboard shortcut, or similar mechanism) is available before or alongside the animated content, allowing users to freeze or remove it without requiring assistance. The control itself must be accessible — keyboard-reachable, properly labeled, and usable without a mouse.

A fail occurs when any of the following exist: a <blink> element or CSS text-decoration: blink that cannot be stopped; a <marquee> element with no pause mechanism; an animated carousel that plays indefinitely with no pause button; an auto-refreshing news widget that cannot be controlled; or a looping background video with no way to stop it.

WCAG defines two explicit exceptions. First, the rule does not apply to animations that last five seconds or fewer, because brief motion that ends on its own does not create a sustained distraction. Second, it does not apply when the animation is essential to the activity — for example, a real-time stock trading interface where live prices are the entire purpose of the page, and pausing them would fundamentally change the nature of the content. These exceptions are narrow and should not be used as a blanket excuse to skip implementation.

Why It Matters

Moving and blinking content creates serious barriers for several distinct disability groups, and the consequences range from mild distraction to genuine medical harm.

People with attention deficit hyperactivity disorder (ADHD) or other cognitive disabilities often find it impossible to focus on the primary content of a page when animated elements are present in their peripheral vision. The human brain is neurologically wired to attend to motion as a survival mechanism, and people with ADHD experience this pull far more intensely than neurotypical users. A scrolling ticker at the bottom of a news page or an animated banner ad in a sidebar can make reading the main article effectively impossible.

People with vestibular disorders — including labyrinthitis, benign paroxysmal positional vertigo (BPPV), and Ménière's disease — can experience nausea, dizziness, and disorientation when exposed to certain types of motion on screen. For these users, a looping carousel or parallax scrolling effect is not merely annoying; it can cause physical illness that forces them to leave the page entirely. Vestibular disorders affect an estimated 35% of adults over the age of 40 in the United States alone.

People with photosensitive epilepsy are at risk of seizures from content that flashes or blinks at certain frequencies. While flashing content is more directly addressed by WCAG 2.3.1, blinking content covered by 2.2.2 can also be a triggering factor. The World Health Organization estimates that epilepsy affects approximately 50 million people worldwide.

For screen reader users, auto-updating content creates an equally disruptive problem. When a live region refreshes, screen readers announce the new content, which interrupts the user mid-sentence as they are listening to something else. Without the ability to pause updates, navigating a page with live content becomes extremely difficult.

Consider this real-world scenario: a user with ADHD is completing an online bank transfer on a Turkish e-commerce banking portal. A rotating promotional banner cycles through four offers every three seconds in the header. The user cannot concentrate on entering the correct account number. They make a transcription error, the transfer fails, and they must repeat the entire process. Had the banner included a pause button, the task would have been straightforward. This is not a hypothetical — it is a documented category of interaction failure that accessibility auditors encounter regularly.

Beyond disability access, eliminating uncontrollable motion improves usability for everyone, reduces cognitive load, and can improve SEO signals such as Core Web Vitals scores by reducing layout shifts and unnecessary JavaScript execution.

Related Axe-core Rules

• blink: This rule checks for the presence of the deprecated <blink> HTML element and for CSS properties that produce blinking text (historically text-decoration: blink). The <blink> element causes text to flash on and off continuously with no native mechanism for the user to stop it. Axe flags any instance of this element as a violation because it directly fails 2.2.2 — there is no conformant use case for <blink>. The rule also alerts on CSS-driven blink effects where the animation cannot be paused. Automated detection is reliable here because the element and property are syntactically identifiable in the DOM and computed styles.
• marquee: This rule checks for the presence of the <marquee> HTML element, which causes text or content to scroll horizontally or vertically across the screen in a continuous loop. The <marquee> element has no built-in, accessible pause mechanism and is deprecated in HTML5. Axe flags any instance as a violation. Like <blink>, detection is straightforward because the element is syntactically identifiable. However, automated tools cannot catch all 2.2.2 violations — CSS animations, JavaScript carousels, auto-updating AJAX widgets, and looping HTML5 videos all require manual review because the mechanism for pausing (or its absence) can only be determined by a human tester evaluating the full interactive experience.

How to Test

1. Automated scan with axe DevTools or Lighthouse: Open the page in Chrome or Firefox. Open DevTools (F12), navigate to the axe DevTools panel or the Lighthouse Accessibility audit, and run a full scan. Look specifically for violations tagged as blink or marquee in the results. Each violation will include the DOM node, the impact level (serious or critical), and a link to remediation guidance. Note that a clean automated scan does not mean full compliance — proceed to manual steps.
2. Manual inspection for CSS and JavaScript animation: Visually review the page for any content that moves, scrolls, blinks, or updates automatically. For each instance, check whether a pause, stop, or hide control is present and visible before or alongside the animated content. Verify the control is reachable by keyboard (Tab to it) and that pressing Enter or Space activates it. Check that activating the control actually halts the motion and does not merely reduce its speed.
3. Keyboard-only test: Disconnect your mouse. Use the Tab key to navigate the entire page. Confirm that you can reach the pause/stop control for every animated element using only the keyboard, and that the control has a visible focus indicator. If you cannot reach the control, or if reaching it requires tabbing through the animated content first (which may be disorienting), that is a failure.
4. Screen reader test with NVDA and Firefox: Launch NVDA, open the page in Firefox, and listen for any live region announcements that interrupt reading. Navigate to auto-updating content and confirm that using the pause control silences the NVDA announcements. Test with JAWS and Chrome, and VoiceOver and Safari on macOS, following the same procedure.
5. Auto-updating content check: For content that refreshes on a timer (news feeds, dashboards, scoreboards), note the refresh interval. Confirm there is a mechanism to pause the updates or control the frequency. Trigger the update manually if possible and verify that screen readers only announce it when the user chooses, not involuntarily.
6. Reduced motion preference test: In your operating system, enable the "Reduce Motion" accessibility setting. Reload the page and verify that animations respect the prefers-reduced-motion CSS media query. While this is not strictly required by WCAG 2.2.2, it is a strong complementary technique and is increasingly expected by auditors.

How to Fix

Deprecated <marquee> element — Incorrect

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Deprecated <marquee> element — Correct

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Deprecated <blink> element — Incorrect

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Deprecated <blink> element — Correct

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Auto-playing carousel with no pause control — Incorrect

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Auto-playing carousel with no pause control — Correct

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Auto-updating live data widget — Incorrect

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Auto-updating live data widget — Correct

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Common Mistakes

• Using <marquee> or <blink> elements anywhere in production HTML, even for "retro" or decorative styling — both elements are deprecated, semantically meaningless, and always fail 2.2.2 with no remediation path other than removal.
• Adding a pause button that is only visible on mouse hover, making it inaccessible to keyboard-only users who need it most and who typically navigate by Tab rather than by hovering.
• Implementing a pause button that is not reachable by Tab key before the animated content in the DOM, forcing users to navigate through the disorienting motion before they can stop it.
• Using animation-play-state: paused in CSS to stop the animation visually, but failing to also disable the JavaScript setInterval or requestAnimationFrame loop that is driving the content updates — the visual appearance stops but the DOM keeps changing, still interrupting screen readers.
• Setting aria-live='polite' on a carousel or ticker and leaving it active even when the user has pressed pause — the live region continues to announce DOM changes to screen reader users even though the visual animation is frozen.
• Relying on autoplay=false on a <video> element without verifying the behavior across browsers; some browser and plugin combinations override this attribute, causing videos to play automatically against the author's intent and the user's expectation.
• Treating the five-second exception as a general grace period, and building a carousel that shows each slide for four seconds on the assumption that each individual slide transition is under five seconds — the animation as a whole is continuous and lasts far longer than five seconds, so the exception does not apply.
• Providing a pause control that stops the animation but does not visually indicate the paused state, leaving users uncertain whether their action had any effect — the button must reflect its current state, ideally using aria-pressed and updating its label between "Pause" and "Play".
• Applying prefers-reduced-motion only to CSS transitions and ignoring JavaScript-driven animations that run independently of CSS, which means users who have enabled the system-level reduce motion setting still experience motion on the page.
• Placing the pause control outside the keyboard tab order by setting tabindex='-1' or by enclosing it in a container with display:none that is conditionally shown only with mouse interaction — the control must always be reachable via keyboard navigation.

Relation to Turkey's Accessibility Regulations

Turkey's Presidential Circular No. 2025/10, published in the Official Gazette (Resmî Gazete) numbered 32933 on 21 June 2025, establishes mandatory web and mobile accessibility requirements aligned with WCAG 2.2. WCAG 2.2.2 Pause, Stop, Hide is a Level A criterion, which means it sits at the most fundamental tier of compliance and is mandatory without exception for all entities covered by the circular.

The circular sets staggered compliance timelines: public institutions and bodies must achieve full Level A conformance within one year of the circular's publication date, and private sector entities must do so within two years. There is no voluntary opt-in — the circular imposes a legal obligation, and non-compliant digital properties are subject to administrative oversight and potential enforcement action.

The entities covered by the circular include a broad cross-section of Turkish digital services: all public institutions and government bodies; e-commerce platforms operating in Turkey; banks and financial services institutions; hospitals and private healthcare providers; telecommunications operators with 200,000 or more subscribers; travel agencies; private transport companies; and private schools holding authorization from the Ministry of National Education (Millî Eğitim Bakanlığı, MoNE).

For these entities, WCAG 2.2.2 has direct and practical implications. An e-commerce site with an auto-playing product carousel and no pause button is in violation. A bank's internet banking portal that uses a scrolling security-notice ticker without a stop control is non-compliant. A hospital's appointment booking page that uses animated alerts that cannot be halted fails the requirement. A telecommunications company's homepage with a looping background video and no visible stop control must remediate it before the deadline.

Beyond the legal obligation, Turkish accessibility law aligns with the broader European trend exemplified by the EU Web Accessibility Directive and the European Accessibility Act (EAA). As Turkish companies expand into European markets or serve European users, WCAG 2.2 Level A conformance — including criterion 2.2.2 — becomes a dual compliance requirement. Implementing Pause, Stop, Hide correctly is therefore both a domestic legal necessity and a strategic asset for Turkish organizations with international digital presence.