Pause, Stop, Hide

In brief

Carousels that rotate by themselves, tickers, animated banners and auto-updating feeds are hard to use. People with attention or reading difficulties cannot concentrate, people with low vision lose their place, and screen reader users hear the content change under them.

This criterion requires that for any moving, blinking or scrolling information that starts automatically, lasts more than five seconds and is shown alongside other content, there is a way to pause, stop or hide it. For information that updates automatically, the same applies, unless it is essential.

What does it cover?

• Moving, blinking, scrolling: Carousels, marquees, animated banners, background videos, animated GIFs and auto-scrolling text that last more than five seconds.
• Auto-updating: Live scores, tickers, stock quotes and feeds that refresh by themselves. Users must be able to pause, stop or hide them, or control the frequency.
• Alongside other content: The criterion applies when the content is presented in parallel with other content. A full-screen animation that is the only thing on screen is not covered.
• Mechanism: A visible control, available at the start of the content or reachable by keyboard, such as a pause button.
• Exceptions: Motion that is essential to the activity, for example a game or an animation that is the content itself, a loading indicator, and content that starts only after user action.
• Out of scope: Flashing more than three times per second is 2.3.1. Motion that responds to interaction is 2.3.3 (Level AAA). Auto-playing audio is 1.4.2.

Who does it affect?

People with attention, cognitive or reading difficulties, who cannot focus on content next to moving content. People with low vision who may lose their place. People with vestibular disorders who feel unwell with movement. Screen reader users, whose reading is interrupted when content changes.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Control over moving content is part of "operable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 2.2.2 by reference and turns it into separate clauses for each kind of ICT.

Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 2.2.2 is the same in WCAG 2.1 and 2.2.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. A carousel with a pause control

A carousel that rotates automatically needs a visible, keyboard-accessible pause button.

<div class="carousel" data-autoplay="3000">…</div>

<div class="carousel" aria-roledescription="carousel" aria-label="Featured">
  <button type="button" id="toggle" aria-pressed="false">Pause slides</button>
  <div class="slides" aria-live="off">…</div>
</div>
<script>
toggle.addEventListener("click", () => {
  const paused = toggle.getAttribute("aria-pressed") === "true";
  toggle.setAttribute("aria-pressed", String(!paused));
  toggle.textContent = paused ? "Pause slides" : "Play slides";
  paused ? startRotation() : stopRotation();
});
</script>

2. Marquee and scrolling text

Avoid auto-scrolling text. If it is needed, provide a way to stop it.

<marquee>Sale ends today!</marquee>

<p>Sale ends today!</p>

3. Respect reduced motion

Turn animations off for users who ask the system to reduce motion.

.hero { animation: float 6s infinite; }

.hero { animation: float 6s infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

4. Background video

Give users a visible control to pause it, or do not loop it.

<video autoplay muted loop src="bg.mp4"></video>

<video id="bg" autoplay muted loop src="bg.mp4"></video>
<button type="button" onclick="bg.paused ? bg.play() : bg.pause()">
  Pause background video
</button>

5. Auto-updating information

Let users pause live updates or control how often they refresh.

setInterval(refreshScores, 5000);

let timer = setInterval(refreshScores, 5000);
pauseBtn.addEventListener("click", () => {
  clearInterval(timer);
  timer = null;
});

6. Animated GIFs

A GIF that loops for more than five seconds needs a pause. Use a video with controls instead.

<img src="promo.gif" alt="Promotion">

<video src="promo.mp4" autoplay muted loop playsinline controls
       aria-label="Promotion"></video>

Code examples for mobile

Native apps have moving content too: banners, carousels and animations. Respect the system Reduce Motion setting, and give a pause control for anything that moves on its own for more than five seconds.

iOS (SwiftUI)

import SwiftUI

struct HeroBanner: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @State private var paused = false

    var body: some View {
        VStack {
            BannerCarousel(autoAdvance: !reduceMotion && !paused)

            // A visible control to pause the movement
            Button(paused ? "Play banner" : "Pause banner") {
                paused.toggle()
            }
        }
    }
}

Android (Jetpack Compose)

import android.provider.Settings
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.*
import androidx.compose.ui.platform.LocalContext

@Composable
fun HeroBanner() {
    val context = LocalContext.current
    // 0f means animations are turned off in the system settings
    val animationsOn = Settings.Global.getFloat(
        context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f
    ) != 0f
    var paused by remember { mutableStateOf(false) }

    Column {
        BannerCarousel(autoAdvance = animationsOn && !paused)
        TextButton(onClick = { paused = !paused }) {
            Text(if (paused) "Play banner" else "Pause banner")
        }
    }
}

How to test

• Look for movement: Load each page and watch. Does anything move, blink, scroll or update by itself for more than five seconds?
• Look for a control: Is there a visible pause, stop or hide control? Is it reachable by keyboard and announced by a screen reader?
• Check updates: Do live feeds, tickers and counters refresh by themselves? Can users pause them or control the rate?
• Check the exceptions: Is the motion really essential, or only a loading indicator? Does it start only after a user action?
• Test reduced motion: Turn on the system "reduce motion" setting. Does the page stop non-essential movement?
• Check the code: Search for autoplay, marquee, setInterval, animated GIFs and CSS animation with infinite.
• Check mobile: Do banners, carousels and animations respect Reduce Motion and offer a pause control?
• Use a checker as a starting point: Automated tools find only some markup. A person must watch the page.

Common mistakes

• Auto-rotating carousels with no pause button: The most common failure of this criterion.
• Pause controls that are hover-only or hidden: They must be visible and keyboard accessible.
• Looping background video with no control: It moves for ever beside the content.
• Live feeds that refresh with no way to stop them: Users lose their place.
• Ignoring prefers-reduced-motion: The system setting exists for this reason.
• Animated GIFs: They have no controls.
• Calling all movement "essential": Decorative animation is not essential.
• A pause control that is not announced: Give it a name and state, for example aria-pressed.

Sources

• Understanding SC 2.2.2: Pause, Stop, Hide (W3C), opens in a new tab
• Carousels Tutorial (W3C WAI), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.