Using the CSS reduce-motion query to prevent motion

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Content using technologies that support Cascading Style Sheets (CSS).

This technique relates to Success Criterion 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 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.