Technique C39:Using the CSS reduce-motion query to prevent motion

Applicability

Content using technologies that support CSS.

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

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) it can trigger vestibular disorders. Enclosing the CSS that creates the animations in a media query allows people to prevent those symptoms.

A typical example is 'parallax scrolling', where backgrounds move at different rates. The movement due to scrolling the page is essential (and under the users control), but additional movement triggered by the scrolling can also trigger vestibular 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.

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

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

Tests

Procedure

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

  1. Enable the 'Reduce 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.