Skip to main content

​
Exercise objective

In this exercise, you’ll learn how to respect users’ motion preferences by implementing the prefers-reduced-motion CSS media query. This is crucial for users who suffer from vertigo, have ADHD, or are sensitive to motion.

​
The challenge

You’ll find a spinning animation in the course demo site (src/pages/introduction.html) that needs to be disabled when users have reduced motion preferences enabled.

​
The spinner element

Here’s the HTML structure of the spinner: 
<div
  id="spinner"
  aria-hidden="true"
  class="h-10 w-10 animate-spin rounded-full border-4 border-l-transparent"
></div>
The animate-spin class applies a continuous rotation animation to this element.

​
Your task

1

Locate the exercise file

Navigate to src/exercises/reduced-motion/reduced-motion.css in the course repository.
2

Implement the media query

Add the prefers-reduced-motion media query to disable the animation:
@media (prefers-reduced-motion: reduce) {
  #spinner {
    animation: none;
  }
}
This CSS rule checks if the user has enabled reduced motion in their operating system settings. If they have, it removes the spinning animation entirely.
3

Test your implementation

Enable reduced motion in your operating system:
  1. Open Settings > Ease of Access > Display
  2. Turn on Show animations in Windows
  3. Or search for “Reduce motion” in Windows Settings
4

Verify the result

Refresh the introduction page in your browser. The spinner should no longer animate when reduced motion is enabled.
You may need to hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to see the changes.

​
Complete solution

Here’s the complete CSS solution for the exercise:
reduced-motion.css
/* Stop the spinner from spinning when users have "Reduced Motion" enabled */
@media (prefers-reduced-motion: reduce) {
  #spinner {
    animation: none;
  }
}

​
Testing with browser DevTools

You can also test this without changing your OS settings:
  1. Open DevTools (F12)
  2. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the Command Palette
  3. Type “reduced motion” and select Emulate CSS prefers-reduced-motion
  4. Choose prefers-reduced-motion: reduce
  1. Open DevTools (F12)
  2. Click the three dots menu > Settings
  3. Scroll to Advanced settings
  4. Under Accessibility, select prefers-reduced-motion: reduce

​
Best practices

Apply globally

Consider applying reduced motion preferences to all animations in your application, not just individual elements.

Use transitions

If you need some motion for functional purposes, use instant transitions instead of completely removing them:
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Test with real users

If possible, test your implementation with users who actually use reduced motion settings.

Document your approach

Document which animations respect reduced motion preferences for future developers on your team.

​
Learn more

Reduced motion fundamentals

Learn more about why reduced motion matters and implementation patterns

​
Next steps

Once you’ve completed this exercise, move on to the Custom button exercise to learn about building accessible interactive elements.

Build docs developers (and LLMs) love

Get started for freeTalk to us