Axiom

Motion & interaction

Reduced motion still has intent

Reduced motion should remove movement while preserving helpful feedback through opacity, color, or immediate state changes.

TagsAccessibilityIntent
Do

fade in place · 220ms — the signal without the sweep

Don't

slides regardless · 220ms — motion the user asked you to remove

Play both — the left still reports the news without sweeping it across the screen
Do

Reduced motion: fade in place

Don't

Reduced motion: slides anyway

How to apply it

  1. 1

    Wrap movement-based transitions in a prefers-reduced-motion: reduce check and swap in opacity-only fades.

  2. 2

    Never let @media (prefers-reduced-motion: reduce) strip the feedback down to nothing.

  3. 3

    Replace slides and scales with instant or near-instant state changes plus a color or opacity cue.

  4. 4

    Test every animated component with the OS reduced-motion setting toggled on.

Why it works

prefers-reduced-motion exists for vestibular disorders under WCAG 2.3.3, where large or spinning movement can trigger real physical symptoms, not just annoyance. The fix is not silence: users still need to know a state changed, so opacity, color, or instant swaps carry that signal instead of translation or scaling. Fading in place preserves the feedback loop while removing the motion that causes harm.

What breaks

A user with the OS setting enabled toggles a control and sees nothing happen because the animation was stripped with no fallback, leaving them unsure if the action registered.

Review questions

  1. 1

    With reduced motion enabled, does the interface still confirm the action happened?

  2. 2

    Is movement removed while opacity or color feedback remains?

  3. 3

    Does no component silently do nothing when reduced motion is on?

Related rules