Did you know that movement on websites can literally make people sick?
How Websites Can Make People Sick
Movement on websites can cause discomfort and motion sickness for people with vestibular disorders (inner ear) or motion sensitivity. For these people, certain kinds of movement on websites can cause dizziness, vertigo, and even nausea.
For people with photosensitive epilepsy, flashing lights, scrolling images, or alternating patterns of color (stripes) can trigger seizures, depending upon the speed of change, brightness, and contrast with the background.
Common Website Features That Cause Motion Sickness
Specific examples of website features that can cause users to feel ill include:
- Carousels or sliders that change automatically: Sliders or carousels that auto-play and include a sliding or swipe effect as slides change can cause dizziness or nausea.
- Parallax scrolling: This effect creates an illusion of depth by moving the background at a different rate than the foreground but commonly creates a disorienting or nauseating sensation for some users.
- Auto-playing videos: Videos that play automatically on page load can be jarring and disorienting for everyone, but they are especially problematic for people with disabilities or motion sickness if they contain rapid changes or camera elements that look like flying or rocking.
- Rapid flashing or blinking elements: This can trigger seizures in users with photosensitive epilepsy but can also cause discomfort and motion sickness in others.
- Fade-up or fly-in animations: Any animations that make text move – even if temporarily as it enters the screen can cause dizziness or nausea for users as they try to read or experience moving text.
Adding Accessibility with Prefers-Reduced-Motion CSS Media Queries
One key way to make websites more accessible to people with vestibular disorders and epilepsy is to ensure that all the animations on the websites you build are removed if the user has turned off motion in their computer’s operating system.
You can easily remove motion from your websites with a CSS media query, just like you would define different styles for mobile or tablet widths with a media query.
Here’s an example showing removing parallax:
/* Adding a parallax background on a container */
.container-class-here {
background-image: url("/background.jpg");
min-height: 500px;
background-attachment: fixed; /* The fixed background attachment is what creates a parallax-like effect as other content scrolls over it. */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Removing parallax for users who don’t want motion */
@media (prefers-reduced-motion) {
.container-class-here {
background-attachment: scroll;
}
}
As shown above, all you have to do is wrap your CSS in @media (prefers-reduced-motion) {}, and it will automatically override the CSS for anyone who has set their operating system preferences to reduce motion.
How to Check Prefers-Reduced-Motion Media Queries
What to make sure it works? Here’s how to turn off animations in different operating systems so you can check that all animations are properly disabled on the websites you build:
- Windows 10: go to Settings > Ease of Access > Display > Show animations in Windows.
- Windows 11: go to Settings > Accessibility > Visual Effects > Animation Effects
- Mac: go to System Preferences > Accessibility > Display > Reduce motion.
- Mobile iOS: go to Settings > Accessibility > Motion.
- Android versions 9+: go to Settings > Accessibility > Remove animations.
You can also simulate the operating system's reduced motion setting without changing your operating system’s setting. Here is how to simulate prefers-reduced-motion in Chrome.
Additional Resources
Join the Conversation!
There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!
Group Thread