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). 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.
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 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:
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 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. 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. We can read and use this preference with 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:
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":
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, 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)
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 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
- Eric Bailey - Revisiting prefers-reduced-motion, the reduced motion media query
- Eileen Webb - Your Interactive Makes Me Sick
- Facundo Corradini - Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
- Brad Frost - Reducing motion with the picture element
- Thomas Steiner - prefers-reduced-motion: Sometimes less movement is more
Cover photo by Olivier Collet on Unsplash.
Top comments (4)
Hey Eevis, thanks for advocating for
prefers-reduced-motion! May I ask about your personal experiences with animated pan/zoom in web maps? (Or would you happen to know of any studies in regards to how people with vestibular disorders are affected by such animations in web maps?)I'm asking as a member of the W3C Maps for HTML Community Group, and I tend to focus on how we can make maps on the web more accessible (pertains to both JS libraries and (potentially) standardized web maps).
The group is reviewing and has implemented web maps using JS libraries and embeds in which you can try zooming/panning to experience the animations, however if you think that may trigger your symptoms then perhaps you can recollect previous experiences instead? I'd greatly appreciate your insight. Thanks!
Hey Robert! It's so wonderful that you're reaching out and want to find out about the experiences that people with vestibular disorders have. I too have some kind of vestibular disorder, but I don't have a diagnosis like Eevis does. I found out about condition only this year, when a web app I use often (Ravelry, a social media for knitters and makers) changed their UI and that triggered nausea for me. I've also come across some GIFs at news site and even here on Dev.to that trigger my nausea.
I haven't heard of any studies, but I had this article bookmarked as an example how to design for reduced motion. The article lists several different motion triggers, and gives examples of them. The first trigger they list, is scaling and zooming. Panning isn’t mentioned with this term, but one of the triggers is “multi-speed or multi-directional movement”, or parallax effects, which I understand to be similar to panning. Hope the examples in the article of these effects help! And just as a fun side note, looked through all the videos on the article, and listed below which gave me nause and which didn’t:
What triggered nausea in me:
Scaling and zooming
example 1: mouse-triggered scaling
example 2: zoom and blur
Spinning and vortex effects:
example 4: multi-speed or multi-directional movement
Some nausea, but not so bad as the above mentioned
Dimensionality or plane shifting
5: plane-shifted scrolling
Did not give me nausea at all:
Spinning and vortex effects:
3 spininng parallax starfield
Peripheral motion
6: subtle, contant animation near text (just distracts me from reading text, but no nausea)
Hey Robert, and thanks for your comment. Unfortunately, I am pretty new to this topic myself and don't know about any studies regarding animations in web maps and people with vestibular disorders. That would be an interesting topic to read more about!
For me personally, zooming of the maps can be problematic. I have good days when the symptoms don't get triggered from about anything. But on the worse days, for example, zooming a map with a fast animation can trigger nausea, as they're creating a sensation of going/falling forward. With panning, I think I've never had problems. As mentioned in the post Senja linked, if I have control over the zooming (instead of automatic animations), I can prepare myself for possible nausea.
1+ for 'prefers-reduced-motion: reduce' didn't know about that 👍