Design Principle
Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.
Principle
Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.
Design action
Respect prefers-reduced-motion; reduce automatic, looping, and large movement, and supplement with text, state, or progress bars.
Examples
Positive example: Parallax, auto carousels, generation animation, page transitions, and chart motion include continuous or large motion. Counterexample: Large scaling and movement remain under reduced motion.
Apply when
Parallax, auto carousels, generation animation, page transitions, and chart motion include continuous or large motion. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.
Agent Directive
Respect prefers-reduced-motion; reduce automatic, looping, and large movement, and supplement with text, state, or progress bars.