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.
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 53.9–77.2% of 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. 53.9–77.2% run loops you can't pause — a WCAG 2.2.2 Level A failure — and 90.1–100% ship motion with no reduced-motion guard. Six 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.
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.