Tweak C39 and add new matching SCR40 #4404
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/animation-from-interactions.html#resources">Animation from Interactions</a> includes links for changing the 'reduced 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> | ||
|
There was a problem hiding this comment. I'm a little curious about this phrasing (which I realize is identical to C39). I'm concerned this could be misinterpreted too strictly? i.e. if the "movement" is associated with new content appearing, or content being relocated, the content can still appear or relocate instantaneously rather than gradually via an animation, right? If you think I'm overthinking this and it should be fine given the context of the rest of the page, feel free to ignore. (This comment applies to both SCR40 and C39.) There was a problem hiding this comment. i hear you, particularly as the initial prose for the technique also seems a bit nuance-free "allow users to prevent animation from being displayed on web pages" maybe just qualifying this with something like "unnecessary and distracting animation" in the description, and modifying the check to something more like "Check that the element does not show an unnecessary or distracting animation" (but that's subjective, people cried...and I replied "yes, as that's the point ... not a blanket ban on animations in general, but reducing/removing the problematic ones) |
||
| </ol> | ||
| </section> | ||
| <section class="test-results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>#2 and #3 are true.</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should update the 2 changelog files so SCR40 is the latest, and reflect when it's merged rather than when the PR was first written
(FWIW I have started working on a way to automate the entire Techniques Change Log; not sure which will get done first)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Leaving this here as comment for whoever merges this eventually ... update the changelog dates