Design practice

Reduced Motion Audit

Audit a page for motion and implement meaningful prefers-reduced-motion alternatives

Start the exercise

01 / Prepare

What you’ll
work on.

Audit an existing web page (your own or a public site) for motion accessibility. Identify all animations, categorize them by function, and implement prefers-reduced-motion alternatives that preserve meaning without triggering vestibular discomfort.

Before you begin

  • Understanding of CSS prefers-reduced-motion media query
  • Basic knowledge of vestibular disorders and motion sensitivity
  • A web page with animations to audit (your own project or a public site you can fork)

02 / Practice

The work,
step by step.

Work through these 4 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Inventory All Motion

    30 min

    1. Visit the page with DevTools open (Chrome > More tools > Animations panel)

    2. Catalog every animation on the page: CSS transitions, CSS @keyframe animations, JavaScript-driven animations (GSAP, Framer Motion, etc.), scroll-linked animations, auto-playing video or GIF content

    3. For each, note: trigger (hover, scroll, load, click), duration, what changes

  2. Categorize by Function

    30 min

    1. Sort each animation into one of three categories: Essential (communicates state change or provides critical feedback — keep but simplify), Functional (aids comprehension but is not critical — replace with instant appearance), Decorative (adds polish but carries no information — remove entirely)

  3. Implement Alternatives

    60 min

    1. Add the prefers-reduced-motion media query

      @media (prefers-reduced-motion: reduce) {
  /* Overrides go here */
}

    2. For essential animations: reduce duration to minimum, remove spatial movement, keep opacity

    3. For functional animations: replace with instant transitions (transition-duration: 0.01s)

    4. For decorative animations: remove completely (animation: none)

    5. Handle JavaScript animations: check the preference in JS and skip or simplify

  4. Test and Document

    30 min

    1. Enable "Reduce motion" in your OS settings (macOS: System Settings > Accessibility > Display)

    2. Navigate the entire page — does it still make sense? Are state changes still visible?

    3. Compare the two experiences side-by-side

    4. Write a brief (300 words): what you removed, what you kept, and why

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Motion inventory table (animation, trigger, duration, category)
  • Implemented prefers-reduced-motion overrides
  • Side-by-side comparison (screenshots or recording)
  • 300-word brief explaining decisions

How to assess your work

Completeness
All animations on the page inventoried
Categorization
Correct classification of essential vs. functional vs. decorative
Implementation
Reduced motion mode is functional, not just * { animation: none }
Preserved meaning
State changes are still visible without motion
Documentation
Decisions are explained with rationale

Choose your
next exercise.

Browse all exercises