Tweak C39 and add new matching SCR40 #4404
Conversation
* 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
✅ Deploy Preview for wcag2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-authored-by: Dan Bjorge <dan@dbjorge.net>
| @@ -1,5 +1,6 @@ | |||
| <ol> | |||
| <li><time datetime="2025-04-22">2 Jun 2025</time>: Added {{ "G226" | linkTechniques }}</li> | |||
| <li><time datetime="2025-06-02">2 Jun 2025</time>: Added {{ "G226" | linkTechniques }}</li> | |||
| <li><time datetime="2025-05-19">19 May 2025</time>: Added {{ "SCR40" | linkTechniques }}</li> | |||
There was a problem hiding this comment.
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)
| @@ -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> | |||
There was a problem hiding this comment.
I think the reason this was quoted as 'Reduce Motion' might be because that's what the exact setting is called in Mac OS X.
However, each OS/DE has a completely different phrasing for the setting, so maybe we should rephrase this in a way that removes the quotation? (The resource links in Animation from Interactions should help people find the right setting in their particular environment.)
(This comment applies to both SCR40 and C39.)
| <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> |
There was a problem hiding this comment.
I think you might've meant to link to Animation from Interactions (i.e. the one also included in this PR); the resource links in Motion Actuation seem less relevant.
(This comment applies to both SCR40 and C39.)
| <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.)
prefers-reduced-motionvia JavaScriptCloses #3931
Previews: