Skip to content

Commit 6e22d07

Browse files
patrickhlaukedbjorgekfranqueirombgower
authored
Tweak C39 and add new matching SCR40 (#4404)
* Tweak existing C39 to provide extended example, and improve the prose * Tweak 2.3.3 understanding * Create new SCR40 technique that checks `prefers-reduced-motion` via JavaScript * Add SCR40 to the changelogs Closes #3931 Previews: * SCR40 https://deploy-preview-4404--wcag2.netlify.app/techniques/client-side-script/scr40 * C39 https://deploy-preview-4404--wcag2.netlify.app/techniques/css/c39 * 2.3.3 understanding https://deploy-preview-4404--wcag2.netlify.app/understanding/animation-from-interactions --------- Co-authored-by: Dan Bjorge <dan@dbjorge.net> Co-authored-by: Kenneth G. Franqueiro <kfranqueiro@users.noreply.github.com> Co-authored-by: Mike Gower <mikegower@gmail.com>
1 parent 83495d5 commit 6e22d07

File tree

5 files changed

+95
-18
lines changed

5 files changed

+95
-18
lines changed

‎_includes/techniques/changelog/21.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<ol>
2-
<li><time datetime="2025-04-22">2 Jun 2025</time>: Added {{ "G226" | linkTechniques }}</li>
2+
<li><time datetime="2025-06-02">2 Jun 2025</time>: Added {{ "G226" | linkTechniques }}</li>
3+
<li><time datetime="2025-05-19">19 May 2025</time>: Added {{ "SCR40" | linkTechniques }}</li>
34
<li><time datetime="2025-04-22">22 Apr 2025</time>: Added {{ "F112" | linkTechniques }}</li>
45
<li><time datetime="2025-04-22">22 Apr 2025</time>: 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</li>
56
<li><time datetime="2025-04-22">22 Apr 2025</time>: Removed F47 Failure of Success Criterion 2.2.2 due to using the blink element</li>

‎_includes/techniques/changelog/22.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<ol>
22
<li><time datetime="2025-04-22">2 Jun 2025</time>: Added {{ "G226" | linkTechniques }}</li>
3+
<li><time datetime="2025-05-19">19 May 2025</time>: Added {{ "SCR40" | linkTechniques }}</li>
34
<li><time datetime="2025-04-22">22 Apr 2025</time>: Added {{ "F112" | linkTechniques }}</li>
45
<li><time datetime="2025-04-22">22 Apr 2025</time>: 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</li>
56
<li><time datetime="2025-04-22">22 Apr 2025</time>: Removed F47 Failure of Success Criterion 2.2.2 due to using the blink element</li>

‎techniques/client-side-script/SCR40.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Using the CSS prefers-reduced-motion query in JavaScript to prevent motion</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/editors.css">
6+
</head>
7+
<body>
8+
9+
<h1>Using the <abbr title="Cascading Style Sheets">CSS</abbr> <code>prefers-reduced-motion</code> query in JavaScript to prevent motion</h1>
10+
11+
<section id="meta">
12+
<h2>Metadata</h2>
13+
<p id="id"></p>
14+
<p id="technology"></p>
15+
<p id="type"></p>
16+
</section>
17+
18+
<section id="applicability">
19+
<h2>When to Use</h2>
20+
<p>
21+
JavaScript animation which causes motion that is triggered by user interactions.
22+
</p>
23+
</section>
24+
25+
<section id="description">
26+
<h2>Description</h2>
27+
<p>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 <code class="language-css">prefers-reduced-motion</code> CSS Media Query.</p>
28+
<p>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.</p>
29+
<p>Media queries that selectively enable/disable JavaScript-driven animations based on operating system or user agent preferences allow users to avoid those triggers.</p>
30+
<p>The understanding document for <a href="../../Understanding/animation-from-interactions.html#resources">Animation from Interactions</a> includes links for changing the 'reduced motion' setting.</p>
31+
</section>
32+
33+
<section id="examples">
34+
<h2>Examples</h2>
35+
<section class="example">
36+
<h3>Evaluating the <code>prefers-reduced-motion</code> CSS Media Query in JavaScript</h3>
37+
<p>Users can indicate their motion preference for interfaces in their system. This choice can be detected in JavaScript by evaluating the <code>prefers-reduced-motion</code> CSS Media Query. The script can then decide to enable or disable animation effects based on the result of the media query test.</p>
38+
<pre xml:space="preserve"><code class="language-js">const mediaQueryList = window.matchMedia("(prefers-reduced-motion: no-preference)");
39+
40+
if (mediaQueryList.matches) {
41+
/* The user has not expressed a preference for reduced motion – run JavaScript-based animation */
42+
}
43+
</code></pre>
44+
</section>
45+
</section>
46+
47+
<section id="tests">
48+
<h2>Tests</h2>
49+
<section class="test-procedure">
50+
<h3>Procedure</h3>
51+
<p>For each interactive element that triggers a motion animation as a result of a user interaction:</p>
52+
<ol>
53+
<li>Enable the reduced motion setting in your system;</li>
54+
<li>Check that the motion animation is essential;</li>
55+
<li>Check that the motion animation is suppressed.</li>
56+
</ol>
57+
</section>
58+
<section class="test-results">
59+
<h3>Expected Results</h3>
60+
<ul>
61+
<li>#2 or #3 is true.</li>
62+
</ul>
63+
</section>
64+
</section>
65+
</body>
66+
</html>

‎techniques/css/C39.html

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>Using the CSS reduce-motion query to prevent motion</title>
4+
<title>Using the CSS prefers-reduced-motion query to prevent motion</title>
55
<link rel="stylesheet" type="text/css" href="../../css/editors.css">
66
</head>
77
<body>
88

9-
<h1>Using the <abbr title="Cascading Style Sheets">CSS</abbr> reduce-motion query to prevent motion</h1>
9+
<h1>Using the <abbr title="Cascading Style Sheets">CSS</abbr> <code>prefers-reduced-motion</code> query to prevent motion</h1>
1010

1111
<section id="meta">
1212
<h2>Metadata</h2>
@@ -24,41 +24,49 @@ <h2>When to Use</h2>
2424

2525
<section id="description">
2626
<h2>Description</h2>
27-
<p>The objective of this technique is to allow users to prevent animation from being displayed on web pages, via the use of the <code class="language-css">prefers-reduced-motion</code> CSS Media Query.</p>
28-
<p>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.</p>
29-
<p>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.</p>
30-
<p>The understanding document for <a href="../../Understanding/motion-actuation.html#resources">Motion Actuation</a> includes links for changing the reduce motion setting.</p>
27+
<p>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 <code class="language-css">prefers-reduced-motion</code> CSS Media Query.</p>
28+
<p>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.</p>
29+
<p>Media queries that selectively enable/disable CSS-driven animations based on operating system or user agent preferences allow users to avoid those triggers.</p>
30+
<p>The understanding document for <a href="../../Understanding/animation-from-interactions.html#resources">Animation from Interactions</a> includes links for changing the 'reduced motion' setting.</p>
3131
</section>
3232

3333
<section id="examples">
3434
<h2>Examples</h2>
3535
<section class="example">
36-
<h3>'prefers-reduced-motion' CSS Media Query</h3>
37-
<p>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.</p>
38-
<pre xml:space="preserve"><code class="language-css">@media (prefers-reduced-motion: reduce) {
36+
<h3><code>prefers-reduced-motion</code> CSS Media Query</h3>
37+
<p>Users can indicate their motion preference for interfaces in their system and the <code>prefers-reduced-motion</code> CSS Media Query will respect that choice. CSS can then be applied to disable that motion for users that request it.</p>
38+
<pre xml:space="preserve"><code class="language-css">/* CSS for the motion effect */
39+
40+
@media (prefers-reduced-motion: reduce) {
3941
/* CSS to disable motion goes here */
4042
}</code></pre>
4143
<p class="working-example">
4244
<a href="../../working-examples/css-reduced-motion-query/">Working example of 'prefers-reduced-motion' CSS Media Query</a>
4345
</p>
46+
<p>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 <em>not</em> set the reduced motion preference.</p>
47+
<pre xml:space="preserve"><code class="language-css">/* "Static" CSS styles */
48+
49+
@media (prefers-reduced-motion: no-preference) {
50+
/* CSS for the motion effect goes here */
51+
}</code></pre>
4452
</section>
4553
</section>
4654

4755
<section id="tests">
4856
<h2>Tests</h2>
4957
<section class="test-procedure">
5058
<h3>Procedure</h3>
51-
<p>For each interactive element that moves due to a user interaction:</p>
59+
<p>For each interactive element that triggers a motion animation as a result of a user interaction:</p>
5260
<ol>
53-
<li>Enable the 'Reduce Motion' setting in your system;</li>
54-
<li>Check that the motion is not essential;</li>
55-
<li>Check that the element does not move.</li>
61+
<li>Enable the reduced motion setting in your system;</li>
62+
<li>Check that the motion animation is essential;</li>
63+
<li>Check that the motion animation is suppressed.</li>
5664
</ol>
5765
</section>
5866
<section class="test-results">
5967
<h3>Expected Results</h3>
6068
<ul>
61-
<li>#2 and #3 are true.</li>
69+
<li>#2 or #3 is true.</li>
6270
</ul>
6371
</section>
6472
</section>

‎understanding/21/animation-from-interactions.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h2>Examples</h2>
5151
allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.</dd>
5252
<dt>Transitions that support the reduce motion preference</dt>
5353
<dd>A site includes a non-essential transition when loading new content. The transition is a page-flipping
54-
animation that respects the reduce-motion CSS media query. When the user enables the reduce motion preference,
54+
animation that respects the <code>prefers-reduced-motion</code> CSS media query. When the user enables the reduce motion preference,
5555
the page-flipping animation is turned off.</dd>
5656
<dt>Essential animation</dt>
5757
<dd>A web application provides a feature to author animated sequences. As part of this tool the author needs to preview the animation.</dd>
@@ -60,8 +60,8 @@ <h2>Examples</h2>
6060
<section id="resources">
6161
<h2>Resources</h2>
6262
<ul>
63-
<li><a href="//developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Mozilla documentation for 'prefers-reduced-motion'</a></li>
64-
<li><a href="//webkit.org/blog-files/prefers-reduced-motion/prm.htm">Demonstration of 'prefers-reduced-motion' in Webkit</a></li>
63+
<li><a href="//developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Mozilla documentation for <code>prefers-reduced-motion</code></a></li>
64+
<li><a href="//webkit.org/blog-files/prefers-reduced-motion/prm.htm">Demonstration of <code>prefers-reduced-motion</code> in Webkit</a></li>
6565
<li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query</a></li>
6666
<li><a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animations for Motion Sensitivity</a></li>
6767
<li><a href="https://support.apple.com/en-gb/HT202655"><strong>iOS:</strong> Reduce Motion on iPhone, iPad or iPod touch</a></li>
@@ -75,6 +75,7 @@ <h2>Techniques</h2>
7575
<h3>Sufficient</h3>
7676
<ul>
7777
<li><a href="../../techniques/css/C39">C39</a></li>
78+
<li><a href="../../techniques/client-side-script/SCR40">SCR40</a></li>
7879
<li>Gx: Allowing users to set a preference that prevents animation.</li>
7980
</ul>
8081
</section>

0 commit comments

Comments
 (0)