Skip to content

Tweak C39 and add new matching SCR40 #4404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Tweak C39 and add new matching SCR40 #4404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cbaae6
Tweak C39 and 2.3.3 understanding
patrickhlauke May 18, 2025
c54d106
Add SCR40 JavaScript technique to evaluate `prefers-reduced-motion`
patrickhlauke May 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _includes/techniques/changelog/21.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<ol>
<li><time datetime="2025-05-19">19 May 2025</time>: Added {{ "SCR40" | linkTechniques }}</li>
<li><time datetime="2024-05-04">4 May 2024</time>: 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</li>
<li><time datetime="2020-07-15">15 July 2020</time>: Removed Flash techniques.</li>
<li><time datetime="2019-09-12">12 Sept 2019</time>: Added {{ "F105" | linkTechniques }}</li>
Expand Down
1 change: 1 addition & 0 deletions _includes/techniques/changelog/22.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<ol>
<li><time datetime="2025-05-19">19 May 2025</time>: Added {{ "SCR40" | linkTechniques }}</li>
<li><time datetime="2024-05-04">4 May 2024</time>: 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</li>
<li><time datetime="2020-07-15">15 July 2020</time>: Removed Flash techniques.</li>
<li><time datetime="2019-09-12">12 Sept 2019</time>: Added {{ "F105" | linkTechniques }}</li>
Expand Down
66 changes: 66 additions & 0 deletions techniques/client-side-script/SCR40.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using the CSS prefers-reduced-motion query in JavaScript to prevent motion</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>

<h1>Using the <abbr title="Cascading Style Sheets">CSS</abbr> <code>prefers-reduced-motion</code> query in JavaScript to prevent motion</h1>

<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology"></p>
<p id="type"></p>
</section>

<section id="applicability">
<h2>When to Use</h2>
<p>
JavaScript animation which causes motion that is triggered by user interactions.
</p>
</section>

<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to allow users to prevent animation from being displayed on web pages, by using JavaScript to evaluate the <code class="language-css">prefers-reduced-motion</code> CSS Media Query.</p>
<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>
<p>Media queries that selectively enable/disable JavaScript-driven animations based on operating system or user agent preferences allow users to prevent those symptoms.</p>
<p>The understanding document for <a href="../../Understanding/motion-actuation.html#resources">Motion Actuation</a> includes links for changing the 'Reduce Motion' setting.</p>
</section>

<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Evaluating the <code>prefers-reduced-motion</code> CSS Media Query in JavaScript</h3>
<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>
<pre xml:space="preserve"><code class="language-js">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 */
}
</code></pre>
</section>
</section>

<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For each interactive element that moves due to a user interaction:</p>
<ol>
<li>Enable the 'Reduced Motion' setting in your system;</li>
<li>Check that the motion is not essential;</li>
<li>Check that the element does not move.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>#2 and #3 are true.</li>
</ul>
</section>
</section>
</body>
</html>
26 changes: 17 additions & 9 deletions techniques/css/C39.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using the CSS reduce-motion query to prevent motion</title>
<title>Using the CSS prefers-reduced-motion query to prevent motion</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>

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

<section id="meta">
<h2>Metadata</h2>
Expand All @@ -25,22 +25,30 @@ <h2>When to Use</h2>
<section id="description">
<h2>Description</h2>
<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>
<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>
<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>
<p>The understanding document for <a href="../../Understanding/motion-actuation.html#resources">Motion Actuation</a> includes links for changing the reduce motion setting.</p>
<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>
<p>Media queries that selectively enable/disable CSS-driven animations based on operating system or user agent preferences allow users to prevent those symptoms.</p>
<p>The understanding document for <a href="../../Understanding/motion-actuation.html#resources">Motion Actuation</a> includes links for changing the 'Reduce Motion' setting.</p>
</section>

<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>'prefers-reduced-motion' CSS Media Query</h3>
<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>
<pre xml:space="preserve"><code class="language-css">@media (prefers-reduced-motion: reduce) {
<h3><code>prefers-reduced-motion</code> CSS Media Query</h3>
<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>
<pre xml:space="preserve"><code class="language-css">/* CSS for the motion effect */

@media (prefers-reduced-motion: reduce) {
/* CSS to disable motion goes here */
}</code></pre>
<p class="working-example">
<a href="../../working-examples/css-reduced-motion-query/">Working example of 'prefers-reduced-motion' CSS Media Query</a>
</p>
<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>
<pre xml:space="preserve"><code class="language-css">/* "Static" CSS styles */

@media (prefers-reduced-motion: no-preference) {
/* CSS for the motion effect goes here */
}</code></pre>
</section>
</section>

Expand All @@ -50,7 +58,7 @@ <h2>Tests</h2>
<h3>Procedure</h3>
<p>For each interactive element that moves due to a user interaction:</p>
<ol>
<li>Enable the 'Reduce Motion' setting in your system;</li>
<li>Enable the 'Reduced Motion' setting in your system;</li>
<li>Check that the motion is not essential;</li>
<li>Check that the element does not move.</li>
</ol>
Expand Down
7 changes: 4 additions & 3 deletions understanding/21/animation-from-interactions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h2>Examples</h2>
allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.</dd>
<dt>Transitions that support the reduce motion preference</dt>
<dd>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 <code>prefers-reduced-motion</code> CSS media query. When the user enables the reduce motion preference,
the page-flipping animation is turned off.</dd>
<dt>Essential animation</dt>
<dd>A web application provides a feature to author animated sequences. As part of this tool the author needs to preview the animation.</dd>
Expand All @@ -60,8 +60,8 @@ <h2>Examples</h2>
<section id="resources">
<h2>Resources</h2>
<ul>
<li><a href="//developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Mozilla documentation for 'prefers-reduced-motion'</a></li>
<li><a href="//webkit.org/blog-files/prefers-reduced-motion/prm.htm">Demonstration of 'prefers-reduced-motion' in Webkit</a></li>
<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>
<li><a href="//webkit.org/blog-files/prefers-reduced-motion/prm.htm">Demonstration of <code>prefers-reduced-motion</code> in Webkit</a></li>
<li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query</a></li>
<li><a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animations for Motion Sensitivity</a></li>
<li><a href="https://support.apple.com/en-gb/HT202655"><strong>iOS:</strong> Reduce Motion on iPhone, iPad or iPod touch</a></li>
Expand All @@ -75,6 +75,7 @@ <h2>Techniques</h2>
<h3>Sufficient</h3>
<ul>
<li><a href="../../techniques/css/C39">C39</a></li>
<li><a href="../../techniques/client-side-script/SCR40">SCR40</a></li>
<li>Gx: Allowing users to set a preference that prevents animation.</li>
</ul>
</section>
Expand Down