Motion & animation audit · Playbook
Motion & animation remediation — high-level pointers (local fallback)
oricorio tells you what motion is unsafe or expensive on a page. The detailed, current
motion & reduced-motion standards — house duration budgets, which properties are compositor-safe,
how to structure a prefers-reduced-motion block — live in the team wiki (set OUTLINE +
OUTLINE_API_URL and the report links them directly). This file is the minimal high-level
fallback for when the wiki isn’t configured: direction only, deliberately not step-by-step, so
there’s no detailed content to drift out of sync with the wiki.
- No reduced-motion path — wrap an
@media (prefers-reduced-motion: reduce)block that keeps opacity/colour transitions and drops transform-based movement. Reduced means fewer and gentler, not zero. - Infinite animation with no pause — give the user a control to stop it, or suppress it entirely
under
prefers-reduced-motion. - Layout-triggering properties — re-express motion as
transform(translate/scale) andopacity; watch fortransition: all, which sweeps up layout properties by accident. - Long one-shot transitions — bring UI motion under roughly 300ms; looping motion (spinners, progress indicators) is exempt and not a target for shortening.
- An unreadable stylesheet is a coverage gap, not a clean page — a cross-origin sheet that throws
on
.cssRulesmeans part of the site’s motion was never checked; note it rather than assuming PASS. - JS-driven motion is out of scope — Web Animations API calls and inline styles set at runtime don’t show up in the CSSOM this audit reads; a manual check is still needed for those.
- Prioritize serious over advisory — a missing reduced-motion path or an unpausable infinite animation is a real accessibility failure; a slightly long transition is a polish item.
Full playbook → the team wiki’s motion & reduced-motion standards.