WCAG 2.1 introduces Success Criterion 2.3.3 Animation from Interactions, and using the prefers-reduced-motion media query is recognized as a sufficient technique to address it. Notably, it's classed at level AAA, so it isn't a blocker for the Drupal core accessibility gate (which targets level AA). However it looks easy to address using the prefers-reduced-motion media query, and being able to turn animations off has a very high value for affected users in several groups.
TODO: explain the problem better, background on vestibular disorders, etc. Also the difficulty of assessing high-risk vs low-risk for individual designs. Also benefits to users with some cognitive disabilities. Animations can be very unfriendly ("too loud") for people with autistic-spectrum disorders. People with attention difficulties can lose their focus when a notification grabs their attention.
TODO: WCAG SC 2.2.2 Pause, Stop, Hide (AA) is also relevant here, add explainers for that.
TODO: Is WCAG SC 2.3.1 Three Flashes or Below Threshold relevant here? If so, add explainers for that.
TODO: Do we want to disallow or at least discourage autoplay if prefers-reduced-motion is set to reduce?
A user preference in Windows, Android, macOS, iOS, and Windows (see #34) now have an OS-level user preference for turning animations off. Safari already implements the CSS5 prefers-reduced-motion media query.
Many of the browsers supported by Drupal core have implemented the prefers-reduced-motion media feature:
Browsers activate the prefers-reduced-motion media feature based on OS-level user preferences:
Note that the name of the user preference varies by OS, and this sets user expectations. While the media query uses the term "reduce", most operating system UIs present it in a way that means "remove".
iOS 13 additionally implements Prefer Cross-Fade Transitions, which replaces menu slide-ins with cross fades, as a separate preference.
An article on the WebKit blog this summer, Responsive Design for Motion, breaks down different kinds of animation trigger for VIMS with video demonstrations of each one. This is the first easy guide I've seen about assessing animations. A demo page linked at the bottom of the article shows different ways to use the prefers-reduced-motion media query.
An article on A List Apart, Designing Safer Web Animation For Motion Sensitivity gives another good explanation of the issue. Two commenters on that article reports that they found the (stationary) illustration at the top of the article triggering as a simulation of the disorder. Also provides videos.
Form guidelines for developers and designers, about how to use the prefers-reduced-motion
media query effectively.
MOOD: optimistic - animations are actually welcome, as they can help users understand what buttons actually do, make notifications noticable, indicate that a component is busy, and a bunch of other nice design benefits. We aren't trying to hold designers back from using animation.
We can frame this as an achievable DESIGN CONSTRAINT: you can use animations to enhance usability/understanding, but designs should not RELY on animation to convey important information, and designs must be understandable/operable when animations are disabled. (This is following an established principle for use of colour; don't rely on colour alone to convey information/meaning.)
We don't have many animations in core (as of 8.4.0), but we are expecting some more animations in future. In particular, the design mockups from the outside-in initiative show several large animations framing the whole page. Open child issues to fix individual animations.
No design changes as such. Instead we propose to:
Most users will see no change to the existing design, but users can turn off animations if they need to. This is a high-impact improvement for affected user groups.
None. We decided against introducing Drupal-specific API and user preferences, in favour designing our animations to respect CSS prefers-reduced-motion media query.
None.
See
#2316205-72: Provide a way to disable animations for a11y →
. That issue tried introducing an animation preferences API to Drupal, but we eventually decided upon supporting OS/platform-level preferences via the new CSS prefers-reduced-motion media query.
Active
Proposed Plan
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.
Visually induced motion sickness
It involves the content or handling of Cascading Style Sheets.
Makes Drupal easier to use. Preferred over UX, D7UX, etc.
Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.
A change record needs to be drafted before an issue is committed. Note: Change records used to be called change notifications.
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
The Ideas project is being deprecated. This issue is moved to the Drupal project. Check that the selected component is correct. Also, add the relevant tags, especially any 'needs manager review' tags.
Added Windows 11 wording for setting.