Accessibility, checking if user prefers reduced motion

Introduction

Animations on the web, love or loathe them, are everywhere. For a significant number of the worlds population this can have an impact on their accessibility needs.

How can simple motion cause problems?

Just imagine if viewing animations were to cause you to lose your balance, this is possible with a malady known as vestibular disorder.

Your Vestibular system is the sensory mechanism in the inner ear that detects movement of the head and helps to control balance.

Dennis Gaebel / a11yproject.com

Depending on the type and intensity of the animation it can also trigger epilepsy and migraines. To find out more read this list of vestibular disorders.

Configure your settings

Each relatively up-to-date Operating System has settings to allow reducing motion. In general this means turning it off altogether. Below are the instructions for Apple Mac Monterey.

1. Open System Preferences and select Accessibility (the blue circle, 2nd row in the centre.)
2. Select Display under the Vision section.
3. Click the Reduce motion checkbox.

An example of pulsing animation (slowed down)

You can imagine after understanding the effects of vestibular disorder what the example below would do if speeded up. If you’ve already tried out configuring your settings to reduce motion it should be in a static state.

Note: The preference setting depends on the browser honouring that choice.

The CSS code

The animation element is activated in a div with an id of reduce-motion-example. In order to target and activate the prefers-reduced-motion code we use;

@media (prefers-reduced-motion: reduce) {
  #reduce-motion-example {
      animation: none;
  }
}

The @media query will check for a preference and if set as above, will override the animation settings.

Target the inverse

There’s usually more than one way to do things. If the browser understands the @media query and the user has not set a preference for reduced motion we can use the following code to only activate the animation using no-preference.

@media (prefers-reduced-motion: no-preference) {
  #reduce-motion-example {
      animation: stretch 10s ease-out 0s alternate infinite;
  }
}

Final thoughts

Browsers are enabling Web Developers of modern websites more access to System Preferences allowing them to respect Users Preferences. This is a key factor to bear in mind moving forwards to make the web more accessible for everyone.

Article Information

About Dave A.K.A. 'barrd'

Dave is a Bristol based Scottish Expat who has 20+ years experience of web development. Loves playing guitar, reading books, watching Sci-Fi and tinkering with tech.

Read more about Dave