Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities

It’s a common misconception that things like inclusive design and accessibility only come at the cost of design details like motion, but that doesn’t have to be the case. In this session we’ll take a closer look at the prefers-reduced-motion query and how we can use it to make sure even our most creative web animation work can be viewed safely by those with motion sensitivities.

Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities

Val Head, Senior Design Advocate Adobe

Val’s going to be talking about the unusual intersection of animation and accessibility: Prefers Reduced Motion. Certain kinds of motion on screen can cause physical symptoms or responses – even when the screen is as small as an iPhone.

First-person accounts help understand the impact of this:

You may not expect the problems that come up – not just motion but certain use of colour can trigger vestibular disorders.

Before we go too far – this talk is not saying animation is bad or not to use it. There is a lot we can do with animation that positively impacts UX and acessibility – Val’s written a whole book on this!

Rather it’s about how to use animation in a responsible and inclusive way, the same as other aspects of design like colour.

How can users request reduced motion in their browser? There are a few options:

  • OSX accessibility panel
  • Windows’ Ease of Access includes ‘simplify and personalise windows’
  • Android and iOS have settings as well

So how can web developer tap into these settings? The prefers-reduced-motion media query (supported in almost everything other than IE11).

Since it’s a media query we use it the same way as any other, for example in CSS:

@media (prefers-reduced-motion: reduce) {
  /* alternative behaviour */
}

JavaScript matchMedia also works.

You will get back either true or false/no-preference. Only true is a really distinct indication of user preference as they have specifically changed the setting intentionally. This is why we go against the usual progressive enhancement direction and reduce motion when reduction is requested rather than adding when it’s allowed.

So what types of motion can be problematic? WCAG defines it as reducing “any motion that creates the illusion of movement”, which is a very broad brush but it makes sense to err on the side of caution.

Val’s research suggests there are some particularly problematic types of motion, or are almost-universally problematic to people with motion sensitivities:

  • Spinning and vortex effects
  • Multi-speed or multi-directional movement, including parallax effects
  • Constant animation near text

For more:

One thing that’s not on the list: animated colour changes, opacity fades and so on. These don’t create a motion effect so they aren’t considered a problem.

How can we respect the request for reduced motion?

  1. Identify potentially triggering motion
  2. Decide on the best reduced effect based on context

Be careful not to remove content when you do this – you want to improve the experience, not break it!

Examples of reducing motion:

  • iOS has a pronounced zoom effect that changes to a crossfade
  • Hello, Universe website has an animated starfield background that is paused/not moving
  • Mockup with multi-directional animation with transform and transition – the reduced version just translates immediately to the final coordinate, sets opacity to zero and fades them in

What about sites that use animation heavily, or as a core part of the content. In that case you might make the motion toggle much more prominent – reveal it in your own UI and don’t rely on the OS setting at all. Not everyone will know about the (relatively new) reduced motion setting.

We also need to use the setting more on the web, to encourage more people who need it to use it (or discover it in the first place).

Example of a prominent toggle is the Animal Crossing website – being an animation-based game there is a lot of animation. When this is toggled you don’t lose any content, but the animation stops – and there’s a control to go back to animation if you prefer.

For a useful and smart toggle, check out Codepen: Animation with reduced-motion by Marcy Sutton

The idea of toggles might feel a bit weird, but when you look for them you find toggles everywhere! If you are going to add one, make sure it’s in a logical place that people will be able to find it.

Or you might make it a prominent part of the content, like turning animations on and off while reading a tutorial with animated illustrations.

Reduced Motion Picture Technique, Take Two | CSS-Tricks

Hopefully this talk has shown we can still be creative with motion, while still being inclusive and considering accessibility. Expanding your audience is pretty much always a good thing, it seems like a win-win!

uianimationnewsletter.com

@vlh