Reduced Motion Required
Every CSS animation, CSS transition, and JS-driven motion MUST respect the user's `prefers-reduced-motion: reduce` setting.…
$ aoe install @community/rule-reduced-motion-requiredProjection
Always in _index.xml · the agent never has to ask for this.
ReducedMotionRequired [rule] v1.0.0
Every CSS animation, CSS transition, and JS-driven motion MUST respect the user's prefers-reduced-motion: reduce setting. Vestibular disorders, migraine triggers, and motion sensitivity make animation actively harmful for some users — opt-out is mandatory, not optional.
Loaded when retrieval picks the atom as adjacent / supporting.
ReducedMotionRequired [rule] v1.0.0
Every CSS animation, CSS transition, and JS-driven motion MUST respect the user's prefers-reduced-motion: reduce setting. Vestibular disorders, migraine triggers, and motion sensitivity make animation actively harmful for some users — opt-out is mandatory, not optional.
Checks
- @community/check-reduced-motion-required
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
critical
Severity Combination
animation runs at full duration under reduce → BLOCK (SC 2.3.3)
parallax / large-motion runs under reduce → BLOCK
animation duration shortened (≤ 0.01s) → PASS
animation removed entirely under reduce → PASS
Failure Mode
Users with vestibular disorders experience nausea / disorientation; migraine sufferers can lose hours; users abandon. WCAG SC 2.3.3 (Animation from Interactions) fails.
Remediation
- Add a global guard:
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }. - For JS animations (Framer Motion, GSAP), check
window.matchMedia('(prefers-reduced-motion: reduce)').matchesand skip / shorten. - For purposeful motion (carousel auto-advance, marquee), pause entirely when reduce is set.
- Replace large-distance motion with a fade — fades are generally safe under reduce.
Exceptions
- Case: Loading / progress indicators
- Allowed When: A spinner is functional feedback; reduce should slow / convert to a static label, not remove entirely.
- Case: Essential motion
- Allowed When: WCAG 2.3.3 exempts motion essential to functionality (e.g. an interactive game).
Loaded when retrieval picks the atom as a focal / direct hit.
ReducedMotionRequired [rule] v1.0.0
Every CSS animation, CSS transition, and JS-driven motion MUST respect the user's prefers-reduced-motion: reduce setting. Vestibular disorders, migraine triggers, and motion sensitivity make animation actively harmful for some users — opt-out is mandatory, not optional.
Checks
- @community/check-reduced-motion-required
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
critical
Severity Combination
animation runs at full duration under reduce → BLOCK (SC 2.3.3)
parallax / large-motion runs under reduce → BLOCK
animation duration shortened (≤ 0.01s) → PASS
animation removed entirely under reduce → PASS
Failure Mode
Users with vestibular disorders experience nausea / disorientation; migraine sufferers can lose hours; users abandon. WCAG SC 2.3.3 (Animation from Interactions) fails.
Remediation
- Add a global guard:
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }. - For JS animations (Framer Motion, GSAP), check
window.matchMedia('(prefers-reduced-motion: reduce)').matchesand skip / shorten. - For purposeful motion (carousel auto-advance, marquee), pause entirely when reduce is set.
- Replace large-distance motion with a fade — fades are generally safe under reduce.
Exceptions
- Case: Loading / progress indicators
- Allowed When: A spinner is functional feedback; reduce should slow / convert to a static label, not remove entirely.
- Case: Essential motion
- Allowed When: WCAG 2.3.3 exempts motion essential to functionality (e.g. an interactive game).
Relations
related: [@community/rule-animation-duration, @w3c/source-wcag-22, @community/anti-pattern-infinite-marquee-no-pause, @community/anti-pattern-decorative-spinning, @community/example-framer-page-transition, @community/example-vercel-hero-gradient, @community/rule-hover-focus-animation-parity] see-also: [@community/check-reduced-motion-required] validates-with: [@w3c/source-wcag-22]
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
critical
Validates With
- @w3c/source-wcag-22
Severity Combination
animation runs at full duration under reduce → BLOCK (SC 2.3.3)
parallax / large-motion runs under reduce → BLOCK
animation duration shortened (≤ 0.01s) → PASS
animation removed entirely under reduce → PASS
Failure Mode
Users with vestibular disorders experience nausea / disorientation; migraine sufferers can lose hours; users abandon. WCAG SC 2.3.3 (Animation from Interactions) fails.
Remediation
- Add a global guard:
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }. - For JS animations (Framer Motion, GSAP), check
window.matchMedia('(prefers-reduced-motion: reduce)').matchesand skip / shorten. - For purposeful motion (carousel auto-advance, marquee), pause entirely when reduce is set.
- Replace large-distance motion with a fade — fades are generally safe under reduce.
Exceptions
- Case: Loading / progress indicators
- Allowed When: A spinner is functional feedback; reduce should slow / convert to a static label, not remove entirely.
- Case: Essential motion
- Allowed When: WCAG 2.3.3 exempts motion essential to functionality (e.g. an interactive game).
See Also
- @community/check-reduced-motion-required
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-reduced-motion-required/atom.yaml