Improve accessibility with prefers-reduced-motion

Making our sites or apps accessible is a major responsibility for all of us developers. Many of us know about adding descriptive alt tags to images or choosing the appropriate color contrast for text with a background, however there are a few out there you may not know about including prefers-reduced-motion.

One of the biggest joys in front-end development is getting the opportunity to implement really cool animations. Many hours can be spent working alongside designers tweaking a cubic-bezier to make that fade out scrolling animation just right. A well thought out animation can take your site from something simple and bland to lively and interactive. However, not every user enjoys them. Some might be very sensitive to too much motion causing them to feel ill. Fortunately it's become trivial to help these users out by adding a simple CSS property, prefers-reduced-motion.

What it does

Prefers-reduced-motion attempts to stop any non essential animations from being triggered when a user specifies so. For example, any fading or sliding animations that are triggered when a user scrolls for an interactive feel, but not essential to the actual site should be left out at the user's request.

How to work with it.

Nearly all of us web developers have used media queries in some fashion or another and prefers-reduced-motion is as simple to implement as a media query.

.myAnimation {
   animation: 3s infinite alternate bounce;
}

@media (prefers-reduced-motion: reduce) {
  .myAnimation {
     animation: none;
  }
}

That's it to disable any animations you feel aren't essential to the user experience, giving relief to those who may be susceptible to motions. What is essential is left up to you and the designer. Animations that give users feedback like button clicks or successful form submissions would probably be considered essential, but most could be considered unessential. We can also slow animations down or decrease their frequency instead of disabling them all together.

Browser Support

In terms of browser support, the latest two versions of Chrome, Firefox and Safari all support prefers-reduced-motion. The latest Edge also supports it, however IE11 doesn't.