Skip to content

Technique C39:Using the CSS prefers-reduced-motion query to prevent motion

About this Technique

This technique relates to 2.3.3: Animation from Interactions (Sufficient).

This technique applies to CSS which causes motion that is triggered by user interactions.

Description

The objective of this technique is to allow users to prevent animation from being displayed on web pages, via the use of the prefers-reduced-motion CSS Media Query.

Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move(other than the essential movement associated with scrolling the content, which is under the user's control) it can trigger vestibular disorders.

Media queries that selectively enable/disable CSS-driven animations based on operating system or user agent preferences allow users to prevent those symptoms.

The understanding document for Motion Actuation includes links for changing the 'Reduce Motion' setting.

Examples

Example 1: prefers-reduced-motion CSS Media Query

Users can indicate their motion preference for interfaces in their system and the prefers-reduced-motion CSS Media Query will respect that choice. CSS can then be applied to disable that motion for users that request it.

/* CSS for the motion effect */

@media (prefers-reduced-motion: reduce) {
  /* CSS to disable motion goes here */
}

Working example of 'prefers-reduced-motion' CSS Media Query

Alternatively, it is possible to take the inverse approach: define static styles, and then include a media query that only applies when the user has not set the reduced motion preference.

/* "Static" CSS styles */

@media (prefers-reduced-motion: no-preference) {
  /* CSS for the motion effect goes here */
}

Tests

Procedure

For each interactive element that moves due to a user interaction:

  1. Enable the 'Reduced Motion' setting in your system;
  2. Check that the motion is not essential;
  3. Check that the element does not move.

Expected Results

  • #2 and #3 are true.
Back to Top