Web motion accessibility, explained.
Practical, tool-independent writing on the animation layer of the web: what breaks, why generated motion breaks it faster, and how to verify it against WCAG — with code that passes. New guides land here.
Tailwind animations and WCAG 2.2.2: the motion-safe: trap
motion-safe: adds a prefers-reduced-motion guard, which is the WCAG 2.3.3 lane. All four built-in Tailwind animation utilities loop infinitely — that is the 2.2.2 lane, and motion-safe: does not close it.
framer-motion and prefers-reduced-motion: what useReducedMotion does not cover
useReducedMotion returns a boolean and changes nothing by itself. MotionConfig reducedMotion="user" covers motion components only, and preserves opacity and backgroundColor. Four gaps, with the patterns that close them.
Next.js View Transitions and reduced motion: what the documented snippet covers
The reduced-motion block in the Next.js View Transitions guide governs the ::view-transition pseudo-elements only. The ordinary CSS animation in the same app sits outside it — measured on the official demo.
The agency motion handoff: 10 checks before a client site ships
We scanned 22 web-design agency home pages for motion accessibility on 2026-08-29. None came back clean; 18 ran an infinite loop with no pause path. Ten checks that catch it before handoff.
Your Lighthouse 100 says nothing about motion
Lighthouse's accessibility category scores 55 automated audits. Not one of them evaluates animation, prefers-reduced-motion, autoplay or an unpausable loop. What the score does and does not tell you.
The infinite logo marquee that passes WCAG 2.2.2
Every CSS logo-scroller tutorial ships an infinite animation. That is the WCAG 2.2.2 Level A pattern. The full recipe: seamless loop, real pause control, a reduced-motion variant that doesn't freeze mid-scroll.
State of Motion Accessibility on WordPress: 50 sites tested (2026)
We scanned 50 real WordPress sites for motion accessibility. 92% ship motion with no reduced-motion guard and 64% run loops you can't pause — a WCAG 2.2.2 Level A failure. Median score 15/100. Method, open dataset, and a free plugin fix.
WCAG 2.2.2 Pause, Stop, Hide — explained, with fixes
What the Level A criterion actually requires, which patterns fall under it (auto-carousels, infinite loops, background video) and which don't, how to pass it — and why 65.1% of the 186 measurable apps among 196 AI-generated apps didn't.
WCAG 2.3.3: a best practice, not a Level-A failure
Animation from Interactions is Level AAA — so a missing prefers-reduced-motion guard is a best-practice gap, not an A/AA failure. What it asks for, how it differs from 2.2.2, and how to close the gap.
Motion slop examples: 7 patterns from 196 AI sites
Seven recurring patterns from the study, each with how to spot it in CSS, why it hurts users, the fix, and its WCAG lane. A failure catalogue with fixes — not an inspiration gallery.
GSAP and prefers-reduced-motion: patterns that pass
gsap.matchMedia() is the canonical route: tween and ScrollTrigger patterns with cleanup semantics, plus the CSS fallback rule. Honest scope — our static check doesn't read GSAP, so this guide does the work.
The EAA and UI motion: what actually applies
Which WCAG criterion is the machine-checkable one for motion, what counts as evidence rather than a compliance verdict, and the measured base rate across 196 AI-built apps.
State of Motion in AI-Generated UIs: 196 sites tested (2026)
We scanned 196 AI-generated production apps for motion accessibility in July 2026 and re-measured them with the September 2026 method (192 online, 186 measurable). 65.1% of 186 measurable apps run loops you can't pause — a WCAG 2.2.2 Level A failure — and 96.8% ship motion with no reduced-motion guard (WCAG 2.3.3 — a best-practice gap, not an A/AA failure). Two of 186 measurable apps were clean. Method + open dataset.
Top WAVE alternatives for UI motion testing (2026)
A transparent, nofollow comparison of tools teams weigh alongside WAVE — MotionSpec, Tabnav, Pluro and AAArdvark — by approach, best fit and pricing. Where we fit and where we don't.
prefers-reduced-motion, explained (and how to test it)
What the media query is, the CSS and JavaScript patterns that actually pass, the four ways to test it on a real page, and how it maps to WCAG 2.2.2 and 2.3.3 — with copy-paste code.
What is motion slop?
Generated animation that ships broken by default: no reduced-motion guard, infinite attention loops, off-budget effects, hallucinated APIs. Definition, causes, examples, detection, fixes.
How to detect and fix motion slop
A tool-independent triage you can run in minutes: the OS reduced-motion toggle plus a handful of grep commands to find unguarded, infinite, and off-budget motion — then the fix for each class, with code that passes.
How to verify web motion accessibility
A step-by-step process anyone can follow: inventory motion sources, test prefers-reduced-motion for real, check WCAG 2.2.2, 2.3.1 and 2.3.3 with correct levels, and apply code patterns that pass.
What is a11y? Accessibility explained — and the motion gap
A11y is the numeronym for accessibility. What it means, who it serves, the concrete advantages — and the motion layer most a11y advice never covers.
x402 explained: how AI agents pay per API call
x402 is an open payment standard on HTTP 402: wallet-signed, per-call stablecoin payments for agents — no accounts, no API keys. The flow, Cloudflare's role, and where MotionSpec stands.
How to add the MotionSpec MCP to Claude
One URL, no API key: setup in Claude Code, Claude Desktop or Cursor in two minutes — and how motion_catalog and motion_validate stop hallucinated animation before it ships.
Why a motion spec cuts token costs and hallucinations
Three mechanisms, no magic: a small spec instead of generated animation code, fail-closed validation against a 40-primitive allow-list, deterministic and cacheable compilation.
Want the CSS part automated? The free motion check scans any URL against WCAG 2.2.2 and 2.3.3 — no signup, nothing stored. Need it dated and citable, the way an audit file wants it? That is the $29 Motion Report — read a real one first. Fourteen‑day refund, no questions asked.
Want to see it in motion? Compare it in the before / after demo.
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.