# Guide: wcag-2-3-3-animation-from-interactions Canonical: https://motionspec.dev/blog/wcag-2-3-3-animation-from-interactions WCAG 2.3.3: a best practice, not a Level-A failure MotionSpec ← All guides Explainer ## WCAG 2.3.3: a best practice, not a Level-A failure Kevin Fröba · 2026-07-19 · MotionSpec WCAG 2.3.3 (Animation from Interactions) is a Level AAA success criterion: motion animation triggered by interaction must be able to be disabled, unless the animation is essential to the functionality or to the information being conveyed. Because it sits at Level AAA — the highest, optional tier — a missing prefers-reduced-motion guard is not a Level A or AA conformance failure. Plenty of writing about motion accessibility gets this classification wrong in both directions: some pages call the gap a "WCAG failure", which overstates it, and many never mention the Level A criterion next door, which understates the real conformance item. This post sorts the two out. ## What does WCAG 2.3.3 require? WCAG 2.3.3 requires that motion animation triggered by interaction can be disabled, unless the animation is essential. "Triggered by interaction" covers effects such as parallax that follows scrolling, zooms that follow hovers or clicks, and animated transitions between views — motion the person set off but did not ask for. The criterion exists because this kind of movement can make people with vestibular disorders dizzy or nauseous, and because a motion-free path rarely costs the design anything. On the web, the standard way to satisfy it is honoring the prefers-reduced-motion media query — the reduce-motion signal every major operating system exposes. The formal definition is in the W3C's Understanding document for 2.3.3. ## Is missing prefers-reduced-motion a WCAG failure? No — a missing reduced-motion guard maps to WCAG 2.3.3, and 2.3.3 is Level AAA, so the gap is not a Level A or AA conformance failure. WCAG defines three conformance levels. A and AA are what audits, procurement checklists and most accessibility regulations reference; AAA is the aspirational tier — the W3C itself advises against requiring full AAA conformance for entire sites, because some content cannot satisfy every AAA criterion. The precise statement is therefore: a page can conform to WCAG at Level AA while ignoring reduced motion entirely. That precision is worth keeping, in both directions — calling the gap a "failure" overstates the standard, and dismissing it because it is "only AAA" ignores the people the criterion protects. On this site we hold one line: a 2.3.3 gap is a best-practice gap, never a failure. ## Why does the gap still matter? In our study of 196 AI-generated web apps, 90.1–100% shipped motion with no reduced-motion guard — only 0–9.9% (6 of 196) honored the preference. Framed correctly, that is a best-practice gap at scale, not a pile of conformance failures. It still matters, for a plain reason: the classification changes what an auditor writes down, not what a visitor feels. For people with vestibular disorders, unguarded large motion — parallax, zooming transitions, sustained movement — can trigger dizziness, nausea and migraines regardless of the level the criterion sits at. And the gap compounds: the median app in that corpus carried 17 distinct motion root causes, so when the guard is missing, it is missing for a lot of motion at once. Method and full numbers are in The state of motion in AI-generated UIs (https://motionspec.dev/blog/state-of-motion-ai-generated-uis). ## How is WCAG 2.3.3 different from WCAG 2.2.2? WCAG 2.2.2 (Pause, Stop, Hide) is Level A: moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is presented alongside other content must have a mechanism to pause, stop or hide it. Level A is the conformance floor, so 2.2.2 is the criterion that can make a page genuinely non-conformant — the item to check first. The division of labor is clean: 2.3.3 is about interaction-triggered animation and asks that it can be disabled; 2.2.2 is about autoplaying motion and demands a pause path. In the same 196-app study, 53.9–77.2% shipped an automatically starting loop with no way to pause it — the 2.2.2 pattern, at Level A. We cover that criterion, with the code patterns that pass it, in WCAG 2.2.2: Pause, Stop, Hide (https://motionspec.dev/blog/wcag-2-2-2-pause-stop-hide). ## How do you close the 2.3.3 gap? The gap closes with a prefers-reduced-motion media query in CSS, a window.matchMedia check in JavaScript-driven motion, and a reduced variant for every non-essential animation. "Reduced" does not mean a frozen page: swap large movement for a gentle opacity fade, and let genuinely essential motion — a real progress indicator — keep running. The opt-in pattern, where motion only runs inside @media (prefers-reduced-motion: no-preference), makes the calm version the default state. All of the patterns, with copy-paste code and four ways to test them, are in our prefers-reduced-motion guide (https://motionspec.dev/blog/prefers-reduced-motion). Two MotionSpec notes, scoped honestly. The free motion check (https://motionspec.dev/motion-check) statically scans any URL's CSS against WCAG 2.2.2 and 2.3.3 and shows each finding with a fix — it is detection, not a conformance verdict. And the MotionSpec compiler emits the guard by default: every non-essential primitive it compiles ships a reduced-motion fallback by construction. What that enforcement does and does not cover is spelled out on the guarantee page (https://motionspec.dev/guarantee). ## FAQ ## Is missing prefers-reduced-motion a WCAG failure? No. A missing prefers-reduced-motion guard maps to WCAG 2.3.3 Animation from Interactions, a best-practice (AAA-scoped) criterion — not an A or AA failure. The Level A failure to watch is WCAG 2.2.2 Pause, Stop, Hide: motion that starts automatically, runs more than five seconds and loops, with no way to pause, stop or hide it. In our 196-app study 90.1–100% lacked a reduced-motion guard (2.3.3), but 53.9–77.2% shipped that unpausable loop (2.2.2, Level A). ## What level is WCAG 2.3.3? WCAG 2.3.3 Animation from Interactions is Level AAA, the highest and optional conformance tier. Level AAA criteria are not required for the Level A or AA conformance that most audits and legal frameworks reference — which is why we describe a missing reduced-motion guard as a best-practice gap rather than a failure. ## Does WCAG 2.3.3 cover autoplaying animation? No. WCAG 2.3.3 covers motion animation triggered by interaction — scrolling, hovering, clicking. Motion that starts by itself, runs longer than five seconds and offers no way to pause falls under WCAG 2.2.2 Pause, Stop, Hide, which is Level A and therefore a genuine conformance requirement. ## How do you meet WCAG 2.3.3? Give people a way to turn off non-essential interaction-triggered motion. On the web the standard mechanism is the prefers-reduced-motion media query in CSS plus a window.matchMedia check in JavaScript-driven animation, each serving a reduced variant instead of the full effect. See where a page stands on 2.2.2 and 2.3.3. Paste any URL into the free motion check — a static CSS scan, every finding with its fix, labeled by criterion. Detection, not a conformance verdict. No signup, nothing stored. Run the free motion check Generating web UI at scale? See the Design Partner Program. MotionSpec checks and compiles UI animation for AI-generated web apps — it does not generate AI video. MotionSpec All guides Free motion check MCP docs Pricing Impressum Datenschutz MotionSpec enforces reduced-motion safety and a performance budget for the motion it compiles; it is not a general accessibility guarantee and does not claim conformance with any specific accessibility law. © 2026 Fröba Sales Solutions UG (haftungsbeschränkt).