What is Prefers Reduced Motion?

What this essentially means is we now have a way to test (or detect) if a user prefers less motion on their system or device. Because this is a system-wide preference, this setting also applies to the user’s web browser and it’s something we can test for in our code. Most importantly, we are doing so in a respectful manner that honors the user’s preferences and privacy and includes them in the center of the design process.

Each system or device has a slightly different settings panel where accessibility settings are located and activated or deactivated. For example, on Mac OS, you would go to System Preferences → Accessibility → Display and then enable the “reduce motion” checkbox.

Once this system setting is enabled, you’ll probably notice some differences in your operating system. For example, there will be less motion when opening applications or switching between desktops.

So how does this actually work on our websites with our animations? We can override our CSS animations to be a lot less impactful using the prefers-reduced-motion media feature in our stylesheets. It’s also possible to leverage this approach with JavaScript.

Some Practical Examples

Note: Readers with vestibular disorders may want to enable the reduced motion settings on their device before continuing with the examples in this part of the article.

Now that we know what reduced motion preferences are and how they can be used to make our interactions with web animations more accessible, let's talk through some actual examples. Reusing the examples requires some understanding of CSS and JavaScript and the techniques can easily be applied to your project needs. These techniques can be used for satisfying 2.3.3: Animation from Interactions of the Web Content Accessibility Guidelines.

Success Criterion 2.3.3 Animation from Interactions (Level AAA): Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

CSS Example: Featured Logo Interaction

In this example, we have a logo with motion animation when a user interacts with it (either hovering with a mouse or focusing with a keyboard). The interaction scales (zooms) the logo to a larger size and slightly moves it upward on the screen — looks pretty good and we are bringing some emphasis to this logo!

View The Prefers Reduced Motion CSS Example on CodePen.

The line of CSS starting with @media screen and (prefers-reduced-motion) is our media query/feature test for reduced motion preferences. This code block is where things get interesting! The styles inside these brackets are only applied if this feature test is true. Think of a media query like a style override for a specific browsing context.

In this case, we are overriding the logo’s transform property to scale from 1.5 (pretty strong and noticeable) to none. If you toggle your reduced motion preferences on your system and reload the example, notice how the motion effect is removed from our animation?

JavaScript Example: Slide-In Effects

It's also possible to use a similar approach to animations with JavaScript! This can be especially helpful if you're using an animation script and want to customize it with user preferences in mind. For this example, we are using a scroll animation library called Sal.js to slide a list of articles into view as we scroll down the page.

While it is a bit involved to go into how to set this library up (please refer to the library documentation for that), the important takeaway from this example is that we are checking for reduced motion preferences beforehand and only turning this effect on if there are no preferences set on the user’s system.

View The Prefers Reduced Motion JS Example on CodePen.

In the JavaScript from our example, I typically like to set up a little feature test/function that can be reused across a project.

const prefersReducedMotion = () => {
  return window.matchMedia('(prefers-reduced-motion)').matches ? true : false;
}


No worries if this code doesn’t make much sense to you. What this little helper function does is returns a true or false value based on the user’s motion preferences—very similar to our CSS example from earlier.

From there, our JavaScript behavior can be set up in an opt-in approach rather than running 100% of the time. Our example runs the scroll animation library only if our prefersReducedMotion() function returns false (meaning the user has not explicitly specified that they prefer reduced motion on their system). Otherwise, the user prefers reduced motion and the code gracefully ignores the scroll animation library from turning on. The list of articles will display without any slide-in effects.

Pretty subtle and a bit of additional work but this all goes a long way to create more accessible experiences and animations for the folks who visit your website!

Resources and More Info

At the time of this writing, browser support for prefers-reduced-motion is sitting at an impressive 91%—meaning 9 out of 10 visitors will benefit from leveraging prefers-reduced-motion media features in your code. So if the question you're asking yourself is "should I be using this feature today even though there isn't 100% browser support?" — the answer is a wholehearted yes!

More information:

• iOS: Reduce Motion Settings
• Mac OS: Reduce Motion Settings
• Windows 10: Reduce Motion Settings