Coding Media Queries for Prefers Reduced Motion

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

• Your Website Makes Me Want to Puke Accessibility Craft podcast episode
• Prefers-reduced-motion on MDN Web Docs
• An Introduction to the Reduced Motion Media Query (CSS Tricks)
• Responsive Design for Motion (WebKit Blog)