Motion Accessibility Report

Executive summary

11 distinct motion-a11y root cause(s), 11 occurrence(s), in the static scan (1 loading indicator(s) for manual review, no score impact).

How this page compares with the study population

Top candidates

The highest-priority candidates are the infinite animations without a pause path — WCAG 2.2.2 (Pause, Stop, Hide) is a Level-A criterion, the strictest conformance tier, and continuous movement is a real barrier for people with attention and vestibular conditions. The unguarded-motion candidates are animation that, as scanned, still runs when a visitor’s OS-level “reduce motion” setting is on; a single prefers-reduced-motion media query per animation layer usually clears this class in one change. The matching criterion, WCAG 2.3.3, is Level AAA — so this is a robustness gap, not a Level-A conformance failure. The suggested fixes in this report are CSS-only and incremental — none require redesigning the page. After deploying, re-run the free checker to see the new scan result.

Candidates in detail

Candidates are grouped by root cause: one CSS root cause (a @keyframes animation or a transition layer) applied to N selectors is one candidate with N occurrences — not N candidates. Groups are ordered by their score impact. Candidates describe the page as scanned: they are engineering observations to check, not confirmed defects and not a judgement of the team that built it.

Make it pausable: html[data-ms-paused] .bgfx { animation-play-state: paused !important; } + pause button.

Make it pausable: html[data-ms-paused] .cta { animation-play-state: paused !important; } + pause button.

Make it pausable: html[data-ms-paused] .track { animation-play-state: paused !important; } + pause button.

Make it pausable: html[data-ms-paused] .cue span { animation-play-state: paused !important; } + pause button.

Make it pausable: html[data-ms-paused] .wavemark { animation-play-state: paused !important; } + pause button.

@media (prefers-reduced-motion: reduce) { .slider::before { transition: none; } }

@media (prefers-reduced-motion: reduce) { .bgfx { animation: none; } }

@media (prefers-reduced-motion: reduce) { .cta { animation: none; } }

@media (prefers-reduced-motion: reduce) { .track { animation: none; } }

@media (prefers-reduced-motion: reduce) { .cue span { animation: none; } }

No change needed while it only shows during loading/busy states (WCAG 2.2.2 preload exception). If it stays visible as decoration: html[data-ms-paused] .spinner { animation-play-state: paused !important; } + a pause control; and slow it for reduced-motion users: @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.5s; } }

Scan coverage & disclosures

Methodology

What we test

• Static scan of the page HTML, inline style blocks and up to 12 linked stylesheets (8 s fetch timeout per resource, 2 MB cap per resource), as served at scan time.
• Infinite/long animation without a pause path — CSS animations with infinite iteration (or >5 s autoplay) and deprecated <marquee>, with no detectable pause/stop mechanism. Mapped to WCAG 2.2.2 Pause, Stop, Hide (Level A).
• Motion without a prefers-reduced-motion guard — animations/transitions that run even when the visitor's OS asks for reduced motion. Mapped to WCAG 2.3.3 Animation from Interactions (Level AAA) and reduced-motion best practice; this is a robustness gap, not a Level-A failure.
• Risky animated properties — animating properties other than transform/opacity (layout/paint work; vestibular and performance risk). Best-practice candidate.

Scoring (v2)

scoring v2 (rules rev. 2026-09-11): 100 minus, per root-cause group (same kind + same keyframes/transition-props/selector-family), severity-weight x finding-weight x min(3, 1 + 0.4*log2(occurrences)); per-category caps (infinite/marquee 40, autoplay 25, unguarded 30, risky-props 15) so one issue class cannot zero the score alone; floor 0. Cascade-aware prefers-reduced-motion guards; colour/opacity transitions are not motion; loading indicators are review-only (0); no CSS motion -> not measurable (score null).

What we do not test

• Runtime JavaScript motion (WAAPI, GSAP, JS-driven scroll effects). Where the scan detects runtime-motion libraries it discloses them above as not audited — the score is a lower bound on motion risk, not proof of absence.
• Video, GIF and canvas/WebGL content; flashing-content analysis (WCAG 2.3.1) beyond CSS motion.
• Post-interaction states behind logins, cookie walls or client-side routing.
• Everything outside motion: this is not a general accessibility audit and not an EN 301 549 assessment.

Reference population

Comparison figures come from the MotionSpec State of Motion in AI-Generated UIs study (Motion Accessibility Index #1): 196 publicly accessible production pages generated by five AI app-builder platforms (anonymized cohorts A–E), collected in July 2026 and re-measured on 11 September 2026 with this same engine and scoring (rules rev. 2026-09-11). Of the 196 pages, 192 were still online and 186 were measurable; 6 had no CSS motion at all and are reported as not measurable, not as clean. The comparison rows above use the 186 measurable pages. Dataset: CC BY 4.0, motionspec.dev/blog/state-of-motion-ai-generated-uis.

Scope, terms & imprint

Refunds

If this report is not useful to you, email hello@motionspec.dev within 14 days, quoting the report number above, and we refund the purchase in full — no questions asked.

Re-checks

The scan reflects the page as served on 28 September 2026. After you ship fixes, you can re-check the page free of charge at any time: motionspec.dev/motion-check.

Questions

Write to hello@motionspec.dev and quote the report number above.

Imprint / Impressum: Froeba Sales Solutions UG (haftungsbeschränkt) — MotionSpec, hello@motionspec.dev.
Report example-2026-09-28, generated 28 September 2026 from a static scan of https://motionspec.dev/before-after. MotionSpec is an EU trademark application of Froeba Sales Solutions UG.
WCAG is a trademark of the W3C. This document cites WCAG success criteria for engineering orientation only.