Accessible Motion

Motion can orient users when it is restrained and purposeful — not when it decorates for decoration’s sake.

01 — Purpose

Motion that explains change

Motion can improve orientation and clarity when used responsibly — not purely for decoration.

Animation helps users understand what changed: a panel opened, a step completed, an item moved. When motion is restrained and tied to interface change, it supports comprehension. When it exists only to impress, it adds cognitive load and can exclude people sensitive to movement.

Pair with reduced motion strategy and the accessibility standard for site-wide expectations.

02 — Principles

Animation should explain interface change

Motion earns its place when it clarifies state — not when it competes for attention.

  • restrained — small distances, modest duration, no gratuitous bounce
  • purposeful — tied to open, close, reorder, success, or error
  • predictable — same interaction, same motion language every time
  • interruptible — users can act before an animation finishes

03 — Practice

Good motion

Calm transitions that orient without overwhelming.

  • fade or slide overlays in and out — enough to show origin, not a full page dance
  • highlight what moved or updated after an action completes
  • respect prefers-reduced-motion — see reduced motion strategy
  • keep duration short — users should never wait on animation to continue
  • test with reduced motion enabled and with vestibular sensitivity in mind

04 — Avoid

Motion that harms usability

Excessive movement creates discomfort and distraction.

  • excessive scaling — zooming cards, logos, or backgrounds on hover
  • long transitions that block the next interaction
  • aggressive movement — parallax, spinning loaders, bouncing CTAs
  • motion-heavy interfaces where every element animates constantly
  • ignoring cognitive load — busy motion while users read or decide

05 — Close

Improve comprehension, not discomfort

Accessible motion should help users understand change — not create unease.

Ask whether removing the animation would make the interface harder to use. If not, remove it. If yes, keep it calm, optional where possible, and respectful of user preferences.

See reduced motion strategy, design tokens for duration and easing, and the accessibility QA checklist before release.