[policy, no patch] Use "prefers-reduced-motion" media query to disable animations

Problem/Motivation

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:

• prefers-reduced-motion support (caniuse.com)
• Firefox
• Chrome
• Opera
• Safari
• Edge (as of version 76, Chromium-based)

Browsers activate the prefers-reduced-motion media feature based on OS-level user preferences:

• Windows 10: "Show animations in Windows"
• Windows 7: "Turn off all unnecessary animations (when possible)"
• Android (9+): "Remove animations"
• macOS, iOS: "Reduce motion"

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.

Proposed resolution

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.)

Remaining tasks

• Frame this as a policy which other contributors can follow.
• WCAG SC 2.3.3 "Animations from interactions" contains an exemption for animations which are deemed essential to understanding. We should address this in the policy, because sooner or later someone will try to claim that exemption. Such essential animations are expected to be very rare. Suggestion: using this exception should require explicit justification, followed by accessibility maintainer review + sign-off.
• A documentation page in the developer handbook.
• DONE. #2940012: Use prefers-reduced-motion media query on batch progress bar → . The batch API progress bar would make a good proof-of-concept demo for this plan.
• The little progress "throbbers" used by AJAX autocomplete lookups, etc, present a distinct challenge, see comments #25-29. Ideally, find a throbber design which will work without any animation. Failing that, find a thobber design which will work without motionanimation. NEEDS CHILD ISSUE.

Core issues with animation (monitor these)

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.

• 📌 Support prefers-reduced-motion in off-canvas dialog Needs work . Off-canvas dialog has an animation where the tray slides in.
• Monitor the designs from various other core plans, in particular JS/Admin-UX and other site-builder experience initiatives.
• The proposed Workspaces UI designs look like it could present a HIGH-RISK animation. They cover a large part of the screen, and use zooming and growing simultaneously.
  • Update: the drop-down tray in Workspace UI re-uses the off-canvas dialog, so this part of the design will presumably be fixed by 📌 Support prefers-reduced-motion in off-canvas dialog Needs work
  • An update on the Workflow Initiative for Drupal 8.4/8.5
  • #2732081: WI: Phase G2: Full-site preview with Workspace UI →
  • #2784921-32: Add Workspaces experimental module →
• 📌 Add a CSS animation to expanding of details elements Needs work . There's an issue for adding animation to details/summary open + close.
• #2940023: [PP-1] Improve accessibility of Umami's responsive main menu → . The mobile menu on Umami theme uses animation to open/close. The latest patch uses the media query to disable animation.

User interface changes

No design changes as such. Instead we propose to:

• Improve the current design implementations to follow an emerging accessibility practice, and respect OS-level accessibility settings.
• Recommend that new UI designs/themes are created in a such a way that they will work without relying on animation. Users should be still be able to understand and use the UI when animations are disabled.

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.

API changes

None. We decided against introducing Drupal-specific API and user preferences, in favour designing our animations to respect CSS prefers-reduced-motion media query.

Data model changes

None.

Original report

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.