Skip to content

Technique SCR40:Using the CSS prefers-reduced-motion query in JavaScript to prevent motion

About this Technique

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

This technique applies to javaScript animation 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, by using JavaScript to evaluate 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 JavaScript-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: Evaluating the prefers-reduced-motion CSS Media Query in JavaScript

Users can indicate their motion preference for interfaces in their system. This choice can be detected in JavaScript by evaluating the prefers-reduced-motion CSS Media Query. The script can then decide to enable or disable animation effects based on the result of the media query test.

const mediaQueryList = window.matchMedia("(prefers-reduced-motion: no-preference)");

if (mediaQueryList.matches) {
  /* The user has not expressed a preference for reduced motion – run JavaScript-based animation */
}

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