From 8cbaae645f475d18132ab43fcaec87a295d61021 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 18 May 2025 23:36:25 +0100 Subject: [PATCH 01/13] Tweak C39 and 2.3.3 understanding * wrap mention of `prefers-reduced-motion` in code tags * improve explanation for C39 * add a defensive reduced motion use (checking for `no-preference`) example code --- techniques/css/C39.html | 26 ++++++++++++------- .../21/animation-from-interactions.html | 6 ++--- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/techniques/css/C39.html b/techniques/css/C39.html index 44e2b8daae..86e5cf00f9 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -1,12 +1,12 @@ - Using the CSS reduce-motion query to prevent motion + Using the CSS prefers-reduced-motion query to prevent motion -

Using the CSS reduce-motion query to prevent motion

+

Using the CSS prefers-reduced-motion query to prevent motion

Metadata

@@ -25,22 +25,30 @@

When to Use

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.

+

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

-

'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) {
+    
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 */
+}
@@ -50,7 +58,7 @@

Tests

Procedure

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

    -
  1. Enable the 'Reduce Motion' setting in your system;
    2. +
  2. Enable the 'Reduced Motion' setting in your system;
  3. Check that the motion is not essential;
  4. Check that the element does not move.
diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html index d0c08b72a2..950ce9ede0 100644 --- a/understanding/21/animation-from-interactions.html +++ b/understanding/21/animation-from-interactions.html @@ -51,7 +51,7 @@

Examples

allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.
Transitions that support the reduce motion preference
A site includes a non-essential transition when loading new content. The transition is a page-flipping - animation that respects the reduce-motion CSS media query. When the user enables the reduce motion preference, + animation that respects the prefers-reduced-motion CSS media query. When the user enables the reduce motion preference, the page-flipping animation is turned off.
Essential animation
A web application provides a feature to author animated sequences. As part of this tool the author needs to preview the animation.
@@ -60,8 +60,8 @@

Examples

Resources

    -
  • Mozilla documentation for 'prefers-reduced-motion'
    • -
  • Demonstration of 'prefers-reduced-motion' in Webkit
    • +
  • Mozilla documentation for prefers-reduced-motion
    • +
  • Demonstration of prefers-reduced-motion in Webkit
  • An Introduction to the Reduced Motion Media Query
  • Designing Safer Web Animations for Motion Sensitivity
  • iOS: Reduce Motion on iPhone, iPad or iPod touch
    • From c54d1060cf6bf25cc61c039964602ef034815caf Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 19 May 2025 00:01:30 +0100 Subject: [PATCH 02/13] Add SCR40 JavaScript technique to evaluate `prefers-reduced-motion` --- _includes/techniques/changelog/21.html | 1 + _includes/techniques/changelog/22.html | 1 + techniques/client-side-script/SCR40.html | 66 +++++++++++++++++++ .../21/animation-from-interactions.html | 1 + 4 files changed, 69 insertions(+) create mode 100644 techniques/client-side-script/SCR40.html diff --git a/_includes/techniques/changelog/21.html b/_includes/techniques/changelog/21.html index 3323b54657..e85022758e 100644 --- a/_includes/techniques/changelog/21.html +++ b/_includes/techniques/changelog/21.html @@ -1,4 +1,5 @@
      +
    1. : Added {{ "SCR40" | linkTechniques }}
    2. : Removed F87 Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS
    3. : Removed Flash techniques.
    4. : Added {{ "F105" | linkTechniques }}
      5. diff --git a/_includes/techniques/changelog/22.html b/_includes/techniques/changelog/22.html index 3323b54657..e85022758e 100644 --- a/_includes/techniques/changelog/22.html +++ b/_includes/techniques/changelog/22.html @@ -1,4 +1,5 @@
        +
      1. : Added {{ "SCR40" | linkTechniques }}
      2. : Removed F87 Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS
      3. : Removed Flash techniques.
      4. : Added {{ "F105" | linkTechniques }}
        5. diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html new file mode 100644 index 0000000000..1a118c4ba6 --- /dev/null +++ b/techniques/client-side-script/SCR40.html @@ -0,0 +1,66 @@ + + + + Using the CSS prefers-reduced-motion query in JavaScript to prevent motion + + + + +

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

        + +
        +

        Metadata

        +

        +

        +

        +
        + +
        +

        When to Use

        +

        + 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

        +
        +

        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. +
        2. Check that the motion is not essential;
          3. +
        3. Check that the element does not move.
          4. +
        +
        +
        +

        Expected Results

        +
          +
        • #2 and #3 are true.
          • +
        +
        +
        + + diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html index 950ce9ede0..b1a77183d3 100644 --- a/understanding/21/animation-from-interactions.html +++ b/understanding/21/animation-from-interactions.html @@ -75,6 +75,7 @@

        Techniques

        Sufficient

        • C39
          • +
        • SCR40
        • Gx: Allowing users to set a preference that prevents animation.
From 24a367ff1e5767739fd1b8b5d8edb82390366fef Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 27 Jun 2025 17:35:49 +0100 Subject: [PATCH 03/13] Update techniques/css/C39.html Co-authored-by: Dan Bjorge --- techniques/css/C39.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/C39.html b/techniques/css/C39.html index 86e5cf00f9..8396c150f4 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -25,7 +25,7 @@

When to Use

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.

+

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.

From 2bcf190941d48cfd2758656c42a0de480bc61023 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 4 Jul 2025 15:39:50 +0100 Subject: [PATCH 04/13] Update techniques/css/C39.html --- techniques/css/C39.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/C39.html b/techniques/css/C39.html index 8396c150f4..cd2bb6a975 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -27,7 +27,7 @@

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.

+

The understanding document for Animation from Interactions includes links for changing the 'reduce motion' setting.

From 57325925d104c2bbed430a790d9d40f5b6a7862b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 4 Jul 2025 15:40:52 +0100 Subject: [PATCH 05/13] Update techniques/client-side-script/SCR40.html --- techniques/client-side-script/SCR40.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html index 1a118c4ba6..a25ee8efca 100644 --- a/techniques/client-side-script/SCR40.html +++ b/techniques/client-side-script/SCR40.html @@ -27,7 +27,7 @@

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.

+

The understanding document for Animation from Interactions includes links for changing the 'reduce motion' setting.

From b9f0275fe7befb13365933cd1d9d15b057c0695f Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 4 Jul 2025 15:41:16 +0100 Subject: [PATCH 06/13] Update techniques/client-side-script/SCR40.html --- techniques/client-side-script/SCR40.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html index a25ee8efca..43b81848df 100644 --- a/techniques/client-side-script/SCR40.html +++ b/techniques/client-side-script/SCR40.html @@ -50,7 +50,7 @@

Tests

Procedure

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

    -
  1. Enable the 'Reduced Motion' setting in your system;
    2. +
  2. Enable the reduced motion setting in your system;
  3. Check that the motion is not essential;
  4. Check that the element does not move.
From dd06393b7fae99d84b47815f09ce381106c4e31f Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 4 Jul 2025 15:41:32 +0100 Subject: [PATCH 07/13] Update techniques/css/C39.html --- techniques/css/C39.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/C39.html b/techniques/css/C39.html index cd2bb6a975..0ac2977908 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -58,7 +58,7 @@

Tests

Procedure

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

    -
  1. Enable the 'Reduced Motion' setting in your system;
    2. +
  2. Enable the reduced motion setting in your system;
  3. Check that the motion is not essential;
  4. Check that the element does not move.
From cc80730a0a930d9b3a57f71c2d4c055be9a56910 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 4 Jul 2025 15:42:03 +0100 Subject: [PATCH 08/13] Update techniques/css/C39.html --- techniques/css/C39.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/C39.html b/techniques/css/C39.html index 0ac2977908..e939216331 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -27,7 +27,7 @@

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 Animation from Interactions includes links for changing the 'reduce motion' setting.

+

The understanding document for Animation from Interactions includes links for changing the 'reduced motion' setting.

From 316325a9ccd200ab3cf07948779dbbbe132a1baf Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 4 Jul 2025 15:42:27 +0100 Subject: [PATCH 09/13] Update techniques/client-side-script/SCR40.html --- techniques/client-side-script/SCR40.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html index 43b81848df..a5bc5d8bfc 100644 --- a/techniques/client-side-script/SCR40.html +++ b/techniques/client-side-script/SCR40.html @@ -27,7 +27,7 @@

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 Animation from Interactions includes links for changing the 'reduce motion' setting.

+

The understanding document for Animation from Interactions includes links for changing the 'reduced motion' setting.

From c647a18dc83835f05e5854ffed2dd3c21ea75239 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 14 Jul 2025 08:38:55 +0100 Subject: [PATCH 10/13] Correct intro and test steps for C39/SCR40 Clarify it's about *motion* animation --- techniques/client-side-script/SCR40.html | 8 ++++---- techniques/css/C39.html | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html index a5bc5d8bfc..62d4ac997f 100644 --- a/techniques/client-side-script/SCR40.html +++ b/techniques/client-side-script/SCR40.html @@ -24,7 +24,7 @@

When to Use

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.

+

The objective of this technique is to allow users to prevent animations (including motion animations) 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 Animation from Interactions includes links for changing the 'reduced motion' setting.

@@ -48,11 +48,11 @@

Evaluating the prefers-reduced-motion CSS Media Query in JavaSc

Tests

Procedure

-

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

+

For each interactive element that triggers a motion animation as a result of a user interaction:

  1. Enable the reduced motion setting in your system;
    2. -
  2. Check that the motion is not essential;
    3. -
  3. Check that the element does not move.
    4. +
  4. Check that the motion animation is not essential;
    5. +
  5. Check that the motion animation is suppressed.
diff --git a/techniques/css/C39.html b/techniques/css/C39.html index e939216331..682c15581e 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -24,7 +24,7 @@

When to Use

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.

+

The objective of this technique is to allow users to prevent animations (including motion animations) 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 Animation from Interactions includes links for changing the 'reduced motion' setting.

@@ -56,11 +56,11 @@

prefers-reduced-motion CSS Media Query

Tests

Procedure

-

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

+

For each interactive element that triggers a motion animation as a result of a user interaction:

  1. Enable the reduced motion setting in your system;
    2. -
  2. Check that the motion is not essential;
    3. -
  3. Check that the element does not move.
    4. +
  4. Check that the motion animation is not essential;
    5. +
  5. Check that the motion animation is suppressed.
From df1b1a4e8c45c53d8c191f8b9bd8fed64c80226a Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 14 Jul 2025 08:46:27 +0100 Subject: [PATCH 11/13] Remove XHTML garbage --- techniques/client-side-script/SCR40.html | 4 ++-- techniques/css/C39.html | 4 ++-- understanding/21/animation-from-interactions.html | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html index 62d4ac997f..c7d8ecd9c2 100644 --- a/techniques/client-side-script/SCR40.html +++ b/techniques/client-side-script/SCR40.html @@ -1,8 +1,8 @@ - + Using the CSS prefers-reduced-motion query in JavaScript to prevent motion - + diff --git a/techniques/css/C39.html b/techniques/css/C39.html index 682c15581e..ba2f542198 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -1,8 +1,8 @@ - + Using the CSS prefers-reduced-motion query to prevent motion - + diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html index b1a77183d3..94eeb10077 100644 --- a/understanding/21/animation-from-interactions.html +++ b/understanding/21/animation-from-interactions.html @@ -1,9 +1,9 @@ - + - + Understanding Animation from Interactions - +

Understanding Animation from Interactions

From ddfbaf0770cc4387c72984c77ab95e7b1f613200 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Fri, 25 Jul 2025 11:47:31 -0400 Subject: [PATCH 12/13] Update test result wording in SCR40 Co-authored-by: Dan Bjorge --- techniques/client-side-script/SCR40.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/techniques/client-side-script/SCR40.html b/techniques/client-side-script/SCR40.html index c7d8ecd9c2..2dbc255e8f 100644 --- a/techniques/client-side-script/SCR40.html +++ b/techniques/client-side-script/SCR40.html @@ -51,14 +51,14 @@

Procedure

For each interactive element that triggers a motion animation as a result of a user interaction:

  1. Enable the reduced motion setting in your system;
    2. -
  2. Check that the motion animation is not essential;
    3. +
  3. Check that the motion animation is essential;
  4. Check that the motion animation is suppressed.

Expected Results

    -
  • #2 and #3 are true.
    • +
  • #2 or #3 is true.
From a1e454b81796fce2c6fd17045d8e267758094dd0 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Fri, 25 Jul 2025 11:49:38 -0400 Subject: [PATCH 13/13] Update test result wording in C39 --- techniques/css/C39.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/techniques/css/C39.html b/techniques/css/C39.html index ba2f542198..4f5f391a78 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -59,14 +59,14 @@

Procedure

For each interactive element that triggers a motion animation as a result of a user interaction:

  1. Enable the reduced motion setting in your system;
    2. -
  2. Check that the motion animation is not essential;
    3. +
  3. Check that the motion animation is essential;
  4. Check that the motion animation is suppressed.

Expected Results

    -
  • #2 and #3 are true.
    • +
  • #2 or #3 is true.