New issue
Advanced search Search tips

Issue 722548 link

Starred by 28 users

Issue metadata

Status: Started
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature
Team-Accessibility



Sign in to add a comment

Add support for CSS prefers-reduced-motion media feature.

Reported by cookiecr...@gmail.com, May 15 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4

Steps to reproduce the problem:
n/a

What is the expected behavior?

What went wrong?
n/a

Did this work before? N/A 

Chrome version: Trunk  Channel: n/a
OS Version: OS X 10.12.6
Flash Version: 

Add support for CSS prefers-reduced-motion media feature.

New in CSS Media Queries Level 5:
https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

WebKit blog post covering the feature, justification, and examples:
https://webkit.org/blog/7551/responsive-design-for-motion/
 
Components: Blink>CSS

Comment 3 by suzyh@chromium.org, May 15 2017

Note: This is mentioned in the Blink Animation team's public backlog: https://docs.google.com/document/d/1HqyYRIM6bE5eAOvZHjvKS1mwqvKZT_JP9VSaiUGhzk0/edit#heading=h.vbhnljhcbuhr
Initial WebKit patch (using the oolder "default" value):
https://bugs.webkit.org/show_bug.cgi?id=163250
Status: Untriaged (was: Unconfirmed)
Untriaged so that it gets addressed.
Labels: -Pri-2 -OS-Mac OS-All Pri-3
Status: Available (was: Untriaged)
Labels: Update-Quarterly
i think we need this for people with vestibular disabilities
As a vestibular disorder having person, this would be amazing to have in place. 
Labels: -Update-Quarterly
I'd love to see this addressed. We have VIMS issues tracked in Drupal here https://www.drupal.org/project/issues/search?issue_tags=VIMS
I support this advancement of this feature. WCAG 2.1 Level AAA has a requirement on authors to provide a way to turn off animation. This seems a lot more inefficient that just allowing the end user to select whether or not thy want motion.
Expanding on comment 13: The WCAG 2.1 supporting material at "Understanding Success Criterion 2.3.3: Animation from Interactions" mentions the CSS media query as a sufficient technique to address it.  This means authors don't have to implement their own controls to turn it off, they can respect OS/browser-level preferences instead.

For the Drupal core project, we've settled  on using the CSS media query to address WCAG SC 2.3.3, because:

1. The media query is loads easier than implementing our own user preference controls (as you say in comment 13).
2. Respecting preferences at the OS/browser level is more elegant, requiring no extra effort from a user who has already sorted out their preferences for the OS.
3. Crucially, the media query lets us support anonymous visitors, who don't log in to a Drupal website user account.
Related to this, I filed issue Find in page smooth scrolls in Mac contrary to Reduce Motion setting for some pages https://bugs.chromium.org/p/chromium/issues/detail?id=882197. 

This ultimately turned out to not be affected by MacOS's reduce motion setting, but Comment 4 implies that at least one member of the Chromium team considers the Find behavior not to be part of the UI, which would make it part of the content.

If that is true, then the Find behavior would need to respect the behavior of this current issue, Add support for CSS prefers-reduced-motion media feature.
That said, it would likely be a separate, but related issue. I'll wait to see the disposition of Find in page smooth scrolls in Mac contrary to Reduce Motion setting for some pages https://bugs.chromium.org/p/chromium/issues/detail?id=882197 before filing a new issue.
Cc: bokan@chromium.org
Components: Blink>Accessibility Blink>Animation Blink>Scroll
Status: Untriaged (was: Available)
This seems like an important feature (26 stars), is there anyone on the relevant teams who can pick it up?

Status: Available (was: Untriaged)
I agree that this is an important feature to implement and it seems relatively straight forward. 

Do we have a sense of how much this feature is used? It was shipped in Safari for about a year. cookiecrook@ do you have any data on usage?

Who is currently owns the Media-Query feature in Blink? I think this is not particularly related to Blink>Animation but we can try to help current MQ owner to push this forward.
FWIW, web-platform-tests does not have any tests covering this feature but webkit implementation has several layout tests [1]. I think it should be easy to convert those tests for use in Blink. 

[1] https://github.com/WebKit/webkit/tree/89c28d471fae35f1788a0f857067896a10af8974/LayoutTests/fast/media
Labels: Hotlist-Interop
Note: This appears to be supported by Firefox as of 63 (https://caniuse.com/#search=prefers-reduced-motion, https://bugzilla.mozilla.org/show_bug.cgi?id=1365045 is now fixed). Surprisingly it looks like they didn't upload WPT tests for it (they have local reftests I think? https://hg.mozilla.org/integration/mozilla-inbound/rev/786a2e4ea6ea).

This is just a media selector, so ease on implementation depends if we already have some Chrome setting or way to check system settings for reduced motion.
We already respect the Windows' "disable animation" system setting and we stop doing animated scrolls. Shouldn't be too hard to plumb that through to a media query.
Owner: smcgruer@chromium.org
Status: Assigned (was: Available)
From a discussion on internal IM:

Firefox uses:
  * Windows: SPI_GETCLIENTAREAANIMATION
  * Mac: accessibilityDisplayShouldReduceMotion (https://developer.apple.com/documentation/appkit/nsworkspace/1644069-accessibilitydisplayshouldreduce?language=objc, 10.12+ only)
  * Android: Settings.Global.ANIMATOR_DURATION_SCALE == 0.0f
  * gtk: 'gtk-enable-animations'

As David notes, we already obey Windows settings for ui/ animations in https://cs.chromium.org/chromium/src/ui/gfx/animation/animation_win.cc?l=15&rcl=0577a79942585ed085f702a5d48a9b31d3f55bc4

I'm happy to look at doing the plumbing for this. I'll likely start with Windows since we already have some code we can generalize for that. Would love some input from Accessibility folks if any are listening.
Note to myself so I don't forget: the naive way to do this will likely mean a browser restart is required to change this media query (since I assume we can't call these various APIs from the sandboxed renderer, and instead will pass them via web prefs). I'm not sure if we're happy with that or not.

I will test on a Windows machine and a Mac device if Firefox/WebKit update dynamically or require a browser restart. The Firefox source looks like it would update dynamically.
Status: Started (was: Assigned)
In addition to the original Safari/WebKit implementation. prefers-reduced-motion shipped recently in Firefox 63, so there are two independent implementations now.
FYI all, we are working actively on this issue. A design doc has been created[0], and we are currently investigating appropriate system settings to use to base this feature on.

[0]: https://docs.google.com/document/d/1aZnSfg7I-xbRBYui5jkUIdbIgZ5jK9u-CUplPFU_tC8/view
Project Member

Comment 28 by bugdroid1@chromium.org, Nov 5

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4

commit 53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Mon Nov 05 15:40:42 2018

[Accessibility] Add histograms for Mac/Windows reduce-motion APIs

These histograms will be used to guide the implementation of the CSS
prefers-reduced-motion media feature. The primary goal is to compare
usage levels across platforms. This CL starts with the two easiest
platforms to measure - Windows and MacOS.

Bug: 722548
Change-Id: I8643ec4df206e112f31943de0865b27775f72ce3
Reviewed-on: https://chromium-review.googlesource.com/c/1308104
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605340}
[modify] https://crrev.com/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4/content/browser/accessibility/browser_accessibility_state_impl_mac.mm
[modify] https://crrev.com/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4/content/browser/accessibility/browser_accessibility_state_impl_win.cc
[modify] https://crrev.com/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4/tools/metrics/histograms/histograms.xml

It would be cool if there'd be a way to manually enable / disable this for individual websites (maybe via an extension?). I'm a user of that accessibility feature, but I haven't enabled the system-wide toggle, because I do like most animations - only some of them induce vertigo for me. For example, I can't use Google Photos, because the full-screen swipe animation is such an animation.
Cc: dmazz...@chromium.org
cc dmazzonni@ as an FYI about the user-request in #29

As a not-perfect workaround, you could have an extension (I *think*, not familiar with extension capabilities) which detects '@media (prefers-reduced-motion)' rules on the page and removes them for sites you want to enable motion for. This would not fix any future internal accessibility related changes we make based on the system setting (which, to be clear, we haven't even begun talking about - it's just a future possibility), but it would allow you to fix individual sites.
Project Member

Comment 31 by bugdroid1@chromium.org, Nov 14

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f

commit a73dfdba61d1ad37d885ccecbcb9868de5c05c7f
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Wed Nov 14 18:19:47 2018

[Accessibility] Add histograms for Android reduce-motion API

This histogram will be used to guide the implementation of the CSS
prefers-reduced-motion media feature. The primary goal is to compare
usage levels across platforms.

Bug: 722548
Change-Id: I9162d4e9df2e04afa0c8716266c2f0dc2c57b2ac
Reviewed-on: https://chromium-review.googlesource.com/c/1330827
Reviewed-by: Yaron Friedman <yfriedman@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608052}
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/browser/BUILD.gn
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/browser/accessibility/browser_accessibility_state_impl.cc
[add] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/browser/accessibility/browser_accessibility_state_impl_android.cc
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/public/android/BUILD.gn
[add] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/public/android/java/src/org/chromium/content/browser/accessibility/BrowserAccessibilityState.java
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/tools/metrics/histograms/histograms.xml

Project Member

Comment 32 by bugdroid1@chromium.org, Nov 28

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/22d620d8174b502710c81d2b131c0eea96a1abe2

commit 22d620d8174b502710c81d2b131c0eea96a1abe2
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Wed Nov 28 13:48:08 2018

[Accessibility] Account for flag default in Android animation histograms

The initial implementation of this histogram used 0 as the default
setting. This will incorrectly count cases where the flag is missing as
'animation disabled'. This CL fixes this by splitting the default case
into its own enum. In order to preserve correct data, the old histogram
is obsoleted and a new histogram is created.

Bug: 722548
Change-Id: I031ca38cf70ddc8b51c9a150f31e25a305b9fc7a
Reviewed-on: https://chromium-review.googlesource.com/c/1351273
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Reviewed-by: Yaron Friedman <yfriedman@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611674}
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/content/public/android/BUILD.gn
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/content/public/android/java/src/org/chromium/content/browser/accessibility/BrowserAccessibilityState.java
[add] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/content/public/android/junit/src/org/chromium/content/browser/accessibility/BrowserAccessibilityStateTest.java
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/tools/metrics/histograms/enums.xml
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/tools/metrics/histograms/histograms.xml

Sign in to add a comment