You Make My Head Spin - Reducing the Motion on Web
Tags: a11y, webdev, css, javascript
Published: 2020-12-13 11:12:46

Two weeks of vertigo from every head movement has been among the most unpleasant experiences of my adult life. I could work if I kept my head still, but it took a lot of energy and concentration. Every time I moved my head just slightly, it hit me, and I had to stay still for a couple of minutes before it stopped. 

The cause of my condition was [Benign paroxysmal positional vertigo (BPPV)][1]. There was no apparent reason for this to happen, and from what I've read, that is pretty common with BPPV. However, something had changed after the symptoms went away - I realized that I react to certain kinds of movement on web pages and start feeling a little nauseous and dizzy.

For me, these symptoms are mostly only irritating, but that is not the case for all. Some people with vestibular disorders need to rest for a long time after encountering movement on a website, and they can feel really sick from that. In this blog post, I will discuss the reasons for having this kind of symptoms and how we, as developers and designers, could make the web more accessible for people who live with these symptoms. 

## What Kind of People Are Affected?

The vestibular disorder is an umbrella term for multiple different conditions affecting the vestibular system. These can be caused by an injury, illness, or a genetic condition, but the cause remains unknown in some cases. Symptoms can be anything from dizziness to nausea and hearing changes. If you want to read more, head to [vestibular.org][3]. 

While people with visually triggered vestibular disorders are a big group whose symptoms can develop from specific animations, they aren't the only ones. Certain kinds of movement on the webpage can also trigger a migraine or epileptic seizures. Having less distracting animations also benefits those who get sidetracked easily. 

I want to point out that some users can benefit from animations. For people with cognitive disabilities, animations in pictures can help understand, for example, relations between items. So not all animations are bad - there just should be a way to reduce them.

## What Kind Of Movement Triggers These Symptoms?

As I'm talking here about _reducing_ something, one might think I'm advising to remove it altogether. But that's not the case - not all movement is problematic. Animating non-moving properties, such as opacity or color, is less likely to cause problems.

[Val Head lists][4] three common factors that can trigger the symptoms. They are the **relative size of the movement**, **mismatched directions and speed**, and **the distance covered**. 

When the content moves across a large amount of space, it is more likely to trigger the symptoms of someone having vestibular disorders. "The space" in this case is about the _perceived_ space. [Val Head writes][4]:

> The physical size of screen matters less than the size of the motion relative to the screen space available—so a small button with a 3D rotation probably won’t cause trouble, but a full-screen wipe transition covering the entire screen likely would.

Simultaneously, when the animation takes a large area, it can capture the attention. That can be really disorienting, especially for people who have a hard time concentrating.

Animation that moves in another direction of the scrolling or on a speed that is not directly linked with the scrolling speed can be problematic. For me, this has been the worst case so far. Just about a week ago, I encountered a website, which had horizontally scrolling headings. Who remembers the `marquee`-element? The one that has been deprecated? It was as if those headings were made with it. (They weren't, I checked.) My symptoms have always been mild, but this time it took almost 30 minutes for nausea to go away. 

## What Can We, as Developers, Do?

I'll introduce a couple of strategies for reducing motion and thus making websites more accessible. There are some things to note about web accessibility standards. First, there's this thing about auto-playing animations. Even though [WCAG 2.2.2 Pause, Stop, Hide][7] considers only animations that last more than five seconds, there can be patterns of different (less-than-five-seconds) animations, which last longer, so be mindful of them. And for some users, even if the animations are short or can be paused, auto-playing (even for a short time) can cause a lot of harm.

Another WCAG Success Criterion that speaks about animations is [2.3.3: Animation from Interactions][9]. When non-essential animations are triggered by user interaction, this criteria applies. This means, for example, parallax-effect when scrolling. Even though this criterion is level AAA, I'd really like to emphasize that meeting this success criterion benefits many users who have symptoms discussed at the beginning of the post.

When talking about reduced motion, it doesn't mean that all movement needs to be _removed_. Animations can be simplified and slowed down. That can be done on the styles-level, respecting the user's operation system-level settings, or the power can be given to the user with control that changes the settings for the whole site. 

### Prefers Reduced Motion-Media Feature

First, we'll discuss the `prefers-reduced-motion`-media feature, which gives us the possibility to respect the user's system-level preferences on the reduced motion. This means that whenever a user has set the "reduced motion"-setting on, our website picks that preference and acts accordingly (if we have defined the behavior). 

`prefers-reduced-motion` is a [widely supported media feature][8]. We can read and use this preference with CSS:

```css
.animated-content {
  animation: 3s linear 1s infinite alternate slidein; 
}

@media screen and (prefers-reduced-motion: reduce) {
  .animated-content {
    animation: fade 0.5s ease-in both;
  }
}
```
and JavaScript:

```js
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)');

const reduceMotionChanges = () => {
  if (pefersReducedMotion.matches) {
    // Handle reduced motion
  }
}

prefersReducedMotion.addListener(reduceMotionChanges)
```

If you want to simulate the reduced motion, Chrome and (Chromium) Edge (and I guess other Chromium-based browsers, but I didn't find a source for this) offer an option in developer tools to do this. It can be found under "Rendering", which is on the menu -> "More tools": 

![Chrome developer tools, menu opened pointing the location of "Rendering" which is the 13th item on the More tools-submenu](https://dev-to-uploads.s3.amazonaws.com/i/yb98j514c1ni8gfcnpou.png)

On the Rendering-tab, scroll down, and you'll find options for emulating CSS media features such as `prefers-reduced-motion` and `prefers-color-scheme.` By the way, on the same tab, it's possible to emulate vision deficiencies, meaning different types of color blindness.

### A Toggle for Reduced Motion

Another way to help users affected by these animations is to give them site-wide control to reduce motion. This could be done with, for example, a similar toggle as there often is with dark mode and light mode. For instance, in [Futurice's Tech Weeklies' website][10], there was a toggle for site animations: *(the actual site has been rewritten, but the link leads to Wayback machine to display the site as it was at the time of writing)*

![Footer of Futurice Tech Weeklies website showing a toggle with text "Site animations: Off"](https://dev-to-uploads.s3.amazonaws.com/i/dwoo4d3bksgnwkf5hxt3.png)

Technical implementation for the actual reduction of motion could be done in different ways, such as CSS-variables or adding a class for the site's body. [Lindsey Kopacz gives an example][11] of how this could be implemented. I want to note that it would be awesome if these toggles would respect the system settings by default. This can be done by reading the value from the `prefers-reduced-motion`-media feature explained in the previous section.

## Conclusions

So, not all movement on the website is bad. However, when developing or designing a site, remember that animations can be problematic for some users. When unexpected, they can cause a lot of harm by triggering symptoms, as mentioned earlier. If you want to learn more about the topic, I'll list some additional reading in the next section.

## Read More

Here are some articles I've found useful when learning about this topic.  
- [Val Head - Designing Safer Web Animation For Motion Sensitivity][4]
- [Eric Bailey - Revisiting prefers-reduced-motion, the reduced motion media query][5]
- [Eileen Webb - Your Interactive Makes Me Sick][6]
- [Facundo Corradini - Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective][12]
- [Brad Frost - Reducing motion with the picture element][13]
- [Thomas Steiner - prefers-reduced-motion: Sometimes less movement is more][14]


*Cover photo by [Olivier Collet](https://unsplash.com/@ocollet?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/).*

[1]: https://en.wikipedia.org/wiki/Benign_paroxysmal_positional_vertigo
[2]: https://web.dev/prefers-reduced-motion/                     
[3]: https://vestibular.org/article/what-is-vestibular/about-vestibular-disorders/   
[4]: https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/       
[5]: https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
[6]: https://source.opennews.org/articles/motion-sick/  
[7]: https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html
[8]: https://caniuse.com/?search=prefers-reduced-motion
[9]: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html
[10]: https://web.archive.org/web/20201203220753/https://techweeklies.futurice.com/
[11]: https://www.a11ywithlindsey.com/blog/reducing-motion-improve-accessibility
[12]: https://alistapart.com/article/accessibility-for-vestibular/
[13]: https://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/
[14]: https://web.dev/prefers-reduced-motion/