Animation, motion and prefers-reduced-motion (WCAG 2.2.2 and 2.3.3)

Motion causes three different problems, and WCAG has a criterion for each. According to W3C's explanations, moving and auto-updating content is a barrier for anyone who has trouble reading stationary text quickly or tracking moving objects, and blinking distracts people with attention deficit disorders (W3C on 2.2.2). Flashing can trigger seizures in people with photosensitive seizure disorders (W3C on 2.3.1). Non-essential movement can cause dizziness and nausea in people with vestibular (inner ear) disorders (W3C on 2.3.3).

The three criteria at a glance

Level AA includes every Level A criterion (see conformance levels), so 2.2.2 and 2.3.1 are part of any requirement that names A or AA. 2.3.3 was added in WCAG 2.1 (W3C's list of what is new in 2.1) at Level AAA.

Content that moves, blinks, scrolls or updates on its own (2.2.2)

Criterion 2.2.2 has two parts. Moving, blinking or scrolling content needs a way to pause, stop or hide it when it starts automatically, lasts more than five seconds and is presented in parallel with other content (in W3C's examples, an animation that is the only content on the page is not), unless the movement is essential, meaning removing it would fundamentally change the information or functionality. Auto-updating content, which changes or disappears on a preset interval, gets the same rule with two differences: no five-second exception, and the author may offer control over the update frequency instead.

Starting automatically broadly means not being the direct result of a user's intentional activation. W3C counts starts triggered indirectly, such as by hovering, focusing or scrolling into view, and says they can also fail 2.3.3.

What counts as a mechanism

• A pause or stop button. W3C's technique G186 is a control in the page, at the top or next to the moving content, and it must itself have a name, enough contrast and keyboard access. W3C's explanation recommends one control for everything that moves.
• A pause that does not trap the user. It must not tie up the user or the keyboard focus. An animation that stops only while focused and restarts when focus leaves does not count.
• Stopping on its own. Blinking that stops within five seconds needs no control. For a GIF, technique G152 sets the repetitions so the animation ends within five seconds.

Where it applies on a real page

Where a row goes beyond what W3C's pages say, it is GotAlt's reading.

A video you keep has other duties: see video captions and transcripts and audio description.

Flashing: the seizure limit (2.3.1)

A flash is a pair of opposing changes in relative luminance (brightness) that can cause seizures in some people if it is large enough and in the right frequency range. Criterion 2.3.1 asks that nothing flash more than three times in any one second, or that flashes stay below the general flash and red flash thresholds. It applies to all content on the page.

W3C defines the thresholds in its explanation of 2.3.1. A general flash is a pair of opposing changes of 10% or more of maximum relative luminance where the darker state is below 0.80. A red flash is any pair of opposing transitions involving a saturated red. Content also passes if flashes occurring together cover no more than .006 steradians within any 10 degree visual field (for web content, W3C says a 341 by 256 pixel rectangle on a 1024 by 768 screen estimates that field).

The simpler route is three or fewer flashes in any one second: W3C says no tool is needed to evaluate that, and technique G19 describes the limit as stricter than the criterion but easier to test. Check video clips, animated images and strobing effects, analyzing a looping clip while it loops. W3C points to analysis tools such as the Trace Center's Photosensitive Epilepsy Analysis Tool, with no endorsement implied.

Blinking and flashing differ. W3C says blinking, a distraction, can be allowed briefly if it stops or can be stopped. Flashing cannot be allowed even for a second, and a stop button is no answer because a seizure could occur faster than most people could use it. Blinking faster than three times a second counts as flashing.

Animation triggered by interaction (2.3.3)

Criterion 2.3.3 asks that motion animation set off by an interaction can be disabled, unless it is essential. W3C defines motion animation as steps added between states to create the illusion of movement: an element that slides into place or changes size as it appears is animated, and one that appears instantly is not. Plain color or opacity changes do not count unless they change the perceived size, shape or position, so in GotAlt's reading a fade can stand in for a slide.

W3C's examples are scroll effects: elements that move beyond the scroll itself can trigger vestibular reactions, and parallax scrolling, where backgrounds move at a different rate to foregrounds, is often non-essential. The scroll is fine, since the user controls it; the extras must be switchable off. W3C says reactions can be severe, possibly needing bed rest.

W3C says to choose any one of three routes: avoid unnecessary animation, provide a control that turns it off, or use the reduce motion feature of the user agent or operating system. Its sufficient techniques are C39, the CSS prefers-reduced-motion query, and SCR40, the same query in JavaScript. 2.3.3 covers animation an interaction starts and 2.2.2 covers animation the page starts by itself, so one animation can fail both.

Level AAA and the law. This page is general information, not legal advice. None of the laws in our table of laws and WCAG versions names AAA (see conformance levels). W3C does not recommend AAA as a blanket policy for entire sites, which is a reason to pick the AAA criteria that suit your content, not to skip them. GotAlt recommends honoring reduced motion on any site with scroll or hover effects.

prefers-reduced-motion: what the setting means

prefers-reduced-motion is a CSS media feature, a condition a style rule can test. MDN says it detects whether the user has turned on a device setting to minimize non-essential motion, telling the browser they prefer an interface that removes, reduces or replaces motion-based animations. Its values are no-preference and reduce, and MDN labels it Baseline widely available since January 2020.

The Media Queries Level 5 working draft (19 February 2026) says reduce means removing or replacing motion that triggers discomfort in people with vestibular motion sensitivity, or distraction in people with attention deficits. That is a preference, not a pause control. MDN lists where visitors switch it on; the main places are below.

How to honor it

In CSS

W3C's technique C39 shows two patterns: write the animation and override it inside @media (prefers-reduced-motion: reduce), as MDN's example does, or write static styles and add motion only inside @media (prefers-reduced-motion: no-preference). In our reading the second is safer, since nothing moves until the query allows it. This invented example fades a panel in for everyone and slides it only for visitors who have not asked for less motion.

.panel { opacity: 0; transition: opacity 0.2s; }
.panel.is-open { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .panel { transform: translateY(1.5rem); transition: opacity 0.2s, transform 0.4s; }
  .panel.is-open { transform: none; }
}

In JavaScript

Script-driven animation needs the same check. W3C's technique SCR40 uses window.matchMedia, which per MDN returns an object you can read for the current result and watch for changes. WebKit advises listening for changes too.

const motionOk = window.matchMedia("(prefers-reduced-motion: no-preference)");

function setUpMotion() {
  if (motionOk.matches) { /* scripted animation, parallax, autoplay */ }
  else { /* static version, video paused */ }
}

motionOk.addEventListener("change", setUpMotion);
setUpMotion();

Reduce, do not simply remove

WebKit's 2017 post by James Craig lists motion that commonly triggers vestibular reactions: scaling and zooming, spinning, multi-speed or multi-directional movement such as parallax, plane shifting, and horizontal movement in the peripheral field of vision. It also warns against reducing too much. Change the animations you know to be triggers, and where motion carries meaning, substitute a simpler animation or another visual cue. One of its takeaways is a good rule: "the Web belongs to the user, not the author."

What the setting does not do

• It does nothing by itself. A looping video keeps playing until your CSS or script acts on the preference.
• In GotAlt's reading, it is not a 2.2.2 mechanism on its own. W3C lists C39 for 2.3.3. The sufficient techniques it lists for 2.2.2 are controls the page provides and content that stops within five seconds. W3C's definition of a mechanism does allow one the platform provides, but a visitor who has not set the preference has no way to stop an autoplaying carousel, so use the setting as a second layer, for example to start a carousel stopped, and keep the visible button.
• It does not fix flashing. W3C says a stop control is no answer to flashing, and in our reading a setting is no better. Fix flashing in the content.

Check it yourself

Motion exists only once a browser runs the page, so most of this is tested by eye. Run it on each template and on any page with video or scroll effects.

1. Watch for ten seconds. Note and time anything that moves, blinks, scrolls or updates on its own. After five seconds, beside other content, it needs a control. Auto-updating content needs one at any length.
2. Use the control. Reach it by keyboard (our keyboard accessibility test covers the method), check that it has a name, and check that pressing it stops the movement and keeps it stopped.
3. Look for flashing in clips, animated images and effects. Three or fewer flashes a second needs nothing more. Faster has to be measured against the thresholds or removed.
4. Switch on reduced motion, using the settings table above, then reload, scroll, hover, open menus and move between pages. Parallax, zooms and slide-ins should be gone or gentler, and meaningful changes still visible.
5. Record the result in the WCAG checklist, which tracks the 55 Level A and AA criteria with notes and a CSV export. Set the target to Level AAA to include 2.3.3 along with the other AAA criteria.

Scan my site for free flags audio and video set to autoplay without the muted attribute (1.4.2) and a timed meta refresh (2.2.1) in the HTML your server sends. It never watches a page move, so a clean scan says nothing about 2.2.2, 2.3.1 or 2.3.3, and the accessibility bookmarklet does not test motion either. What we check sets out the limits, and how to test website accessibility covers the wider routine.