What is Prefers Reduced Motion?

Prefers reduced motion graphic

Animations are ubiquitous to the modern web.

It’s rare to visit a web page today and not encounter some form of animation as you navigate from page to page. And with good reason.

Animations, when done purposefully and carefully, can help communicate your message, draw attention to key information, and create experiences that amaze and delight.

These days, designers and developers can really express creative ideas with fewer limitations in today’s web browsers.

Simple things like elements scrolling into view from thin air to fully illustrated scenes with timed and coordinated motion effects using scalable vector graphics (SVGs) and CSS animations. JavaScript-based animation libraries are also becoming more popular and more performant.

However, motion on the web can cause serious discomfort (such as dizziness, headaches, or nausea) for visitors—specifically, but not limited to, those who have vestibular disorders. This presents a huge accessibility issue from our design choices!

I’m not here to “rain on your parade” and tell you to toss out all your animations. But what if we could approach animation on the web, more specifically, motion-based animations based on what the user prefers?

The prefers-reduced-motion media feature in CSS allows such a reality!

What Is “Prefers Reduced Motion”?

The definition I like to refer to is the one provided by Mozilla Developers Network (MDN):

“The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.”

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.

Reduced motion feature being showcased on a Macbook

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

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 WCAG 2.3.3 (Level AAA): Animation from Interactions.

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 / helper 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: