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.