Accessibility Weekly

Coding Media Queries for Prefers Reduced Motion

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 19

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
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …