Moving and auto-updating content and the ADA

Content that will not hold still

A rotating banner on a city homepage, a transit board that refreshes every few seconds, or a looping weather animation can make a page unreadable for people who read slowly, have attention difficulties or use a screen magnifier. Moving text is hard to follow, and constant change pulls attention away from the task.

Success Criterion 2.2.2 has two parts.

• Moving, blinking or scrolling content: if it starts automatically, lasts more than five seconds and is shown alongside other content, there must be a mechanism to pause, stop or hide it.
• Auto-updating content: if it updates automatically and is shown alongside other content, the user must be able to pause, stop or hide it, or control how often it updates. There is no five-second threshold here.

Both parts have an exception when the movement or update is essential to the activity. Content started by a deliberate user action, such as pressing a Play button, does not count as starting automatically. Flashing is a separate matter and falls under 2.3.1.

Where agencies hit this

• Homepage hero sliders with service announcements.
• Transit arrival boards and service alert tickers that refresh by script.
• Weather radar loops and animated GIFs on emergency pages.
• "Latest news" scrollers and live meeting counts.

Alerts matter most here. A rotating banner that carries a road closure notice will often move on before a slow reader has finished it, so the notice also belongs somewhere static.

Live arrival boards: control the refresh

A board that re-renders every ten seconds is auto-updating content. Give users a pause control, and a manual refresh for when they want the latest times.

setInterval(loadArrivals, 10000);

let timer = setInterval(loadArrivals, 10000);
pauseBtn.addEventListener("click", () => {
  const paused = pauseBtn.getAttribute("aria-pressed") === "true";
  pauseBtn.setAttribute("aria-pressed", String(!paused));
  if (paused) timer = setInterval(loadArrivals, 10000);
  else clearInterval(timer);
});
refreshBtn.addEventListener("click", loadArrivals);

The pause button must itself be reachable by keyboard and must not move or change while the board updates.

Sliders that respect the user

A slider that advances on a timer needs a pause control. It is also good practice to start paused when the visitor has asked for reduced motion, but that preference does not replace the control.

setInterval(nextSlide, 4000);

const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
let playing = !reduce;
setInterval(() => { if (playing) nextSlide(); }, 4000);

playBtn.addEventListener("click", () => {
  playing = !playing;
  playBtn.textContent = playing ? "Pause slides" : "Play slides";
});
playBtn.textContent = playing ? "Pause slides" : "Play slides";

Animation the user starts

Moving content started by a deliberate action is outside the criterion. A radar loop can be shown as a still image with a button.

<img src="radar-loop.gif" alt="Radar loop, last two hours">

<figure>
  <img id="radar" src="radar-latest.jpg" alt="Radar, latest image">
  <button type="button" onclick="playRadarLoop()">
    Play two-hour loop
  </button>
</figure>

Auto-advancing screens in apps

Onboarding carousels and rotating promotions in mobile apps count too. SwiftUI:

TabView(selection: $page) { /* promo cards */ }
    .onReceive(timer) { _ in page = (page + 1) % cards.count }

@Environment(\.accessibilityReduceMotion) var reduceMotion
@State private var autoPlay = true

TabView(selection: $page) { /* promo cards */ }
    .onReceive(timer) { _ in
        if autoPlay && !reduceMotion { page = (page + 1) % cards.count }
    }
Button(autoPlay ? "Pause" : "Play") { autoPlay.toggle() }

Jetpack Compose:

LaunchedEffect(Unit) {
    while (true) { delay(4000); pager.animateScrollToPage(next()) }
}

var autoPlay by remember { mutableStateOf(true) }
LaunchedEffect(autoPlay) {
    while (autoPlay) { delay(4000); pager.animateScrollToPage(next()) }
}
TextButton(onClick = { autoPlay = !autoPlay }) {
    Text(if (autoPlay) "Pause" else "Play")
}

Testing it

1. Load the page and wait ten seconds without touching it. List everything that moves, scrolls, blinks or refreshes.
2. For each item, find the pause, stop or hide control. Reach it with the keyboard and operate it.
3. Check that the control stays put, has a text name, and that pausing does not trap or hide other content.
4. Check that stopping the motion only while an element has focus is not the only option, because that does not count as a mechanism.

Automated tools rarely spot carousels, so a person has to look.

Mistakes and a ship-it list

• A pause control that appears only on hover.
• One control per slide instead of one control for the whole region.
• Relying on prefers-reduced-motion alone, with no visible control.
• Putting the only copy of an urgent notice inside a rotating banner.

Ship it when everything that starts by itself and keeps running past five seconds, or updates by itself, has a keyboard-operable pause, stop or hide control, or the update frequency is adjustable.

DOJ guidance on web accessibility is covered under common barriers.

Sources

• Understanding SC 2.2.2: Pause, Stop, Hide (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.