diff --git a/_includes/techniques/changelog/21.html b/_includes/techniques/changelog/21.html index bb1ee7cca7..8c4502d903 100644 --- a/_includes/techniques/changelog/21.html +++ b/_includes/techniques/changelog/21.html @@ -1,5 +1,6 @@
    -
  1. : Added {{ "G226" | linkTechniques }}
    2. +
  2. : Added {{ "G226" | linkTechniques }}
    3. +
  3. : Added {{ "SCR40" | linkTechniques }}
  4. : Added {{ "F112" | linkTechniques }}
  5. : Removed F4 Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds
  6. : Removed F47 Failure of Success Criterion 2.2.2 due to using the blink element
    7. diff --git a/_includes/techniques/changelog/22.html b/_includes/techniques/changelog/22.html index bb1ee7cca7..42d573bfd5 100644 --- a/_includes/techniques/changelog/22.html +++ b/_includes/techniques/changelog/22.html @@ -1,5 +1,6 @@
    1. : Added {{ "G226" | linkTechniques }}
      2. +
    2. : Added {{ "SCR40" | linkTechniques }}
    3. : Added {{ "F112" | linkTechniques }}
    4. : Removed F4 Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds
    5. : Removed F47 Failure of Success Criterion 2.2.2 due to using the blink element
      6. 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/techniques/css/C39.html b/techniques/css/C39.html index 44e2b8daae..8396c150f4 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..b1a77183d3 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