[mediaqueries] Media Feature: "reduce motion" user setting

[cookiecrook]

Tracking issue for Media Feature "prefers-reduced-motion"

Originally accepted at W3C TPAC, October 2014:
https://lists.w3.org/Archives/Public/www-style/2014Oct/0527.html

More recently discussed in February 2016 thread:
https://lists.w3.org/Archives/Public/www-style/2016Feb/0037.html

For spec:
https://drafts.csswg.org/mediaqueries/

[cookiecrook]

Allows certain views to remove or tone down animations. Platform preference is shipping on iOS, macOS, watchOS, and tvOS.

For example:

• launching an app on iOS changes to a subtle dissolve animation rather than a full-screen zoom.
• switching Spaces or launching Exposé on macOS Sierra

Customers regularly mention to us that common web site patterns (e.g. horizontal carousels or scroll-jacking animations) cause vestibular issues such as dizziness or vertigo. Web developers ought to be able to achieve a similar solution that app developers can achieve natively.

Some background:
http://simplyaccessible.com/article/balance-awareness/

Example calls for this support from the web development community:
https://twitter.com/zeldman/status/492805247455072256
https://twitter.com/webaxe/status/489159894860197888

Examples of vestibular trigger usage on sites:
Zoom while scrolling: http://www.nytimes.com/projects/2013/tomato-can-blues/
Spinning parallax starfield: http://cuberto.com

Update 2016-09-30: Desktop version only (simulated 3D zoom and spin triggers)
http://www.nytimes.com/interactive/2016/09/30/opinion/penn-station-reborn.html?_r=0

Site teams like @nytdesign could use this media feature via a standard CSS @ media block:

@media (prefers-reduced-motion) { /* reduce animation */ }

Or via JavaScript:

if (window.matchMedia('(prefers-reduced-motion)').matches) {
    /* reduce animation */
}

Update 2016-10-05: Another example:
http://qz.com/se/map-of-the-internet/

Update 2016-12-07: Video Podcast (~1 hour) by Microsoft Edge contributor detailing a variety of problematic web examples: "Infinite Canvas 6: Vestibular Disorders and Accessible Animation"
https://www.youtube.com/watch?v=QhnIZh0xwk0

[cookiecrook]

Changing these user settings don't change the rendering of anything. It just conveys a user preference that allows the frameworks, native apps, or web apps to adjust for this user preference/desire/need.

I should also note these proposed names don't fit well within the "none or truthy" pattern of some existing media features. It'd be awkward to specify that prefers-reduced-motion: none means "user is okay with animation." The none value here may be open to misinterpretation, so considering a default or no-preference value that behaves like none for boolean comparisons.

prefers-reduced-motion: [ default | reduce ];
prefers-reduced-motion: [ no-preference | reduce ];

[astearns]

If using 'none' is a pattern we want to maintain, then we could rename the prefers-* properties:

reduced-motion-preference: [ none | reduce ]
reduce-motion-preference: [ none | reduce ]

[cookiecrook]

The core reason this needs to expose a user preference rather than change something about the view is because UI varies greatly. There's no way a UA can reliably reduce or stop motion on behalf of the user and still guarantee an understandable interface. Exposing the pref gives authors a way to do this appropriately within the context of their own interfaces.

[cookiecrook]

Authors should ensure a reduction in motion does not negatively affect the usability of the interface. If movement was used to convey information (such as an action or relationship between two UI elements), the reduced motion variant should retain the same level of understandability.

For example, if a queuing action was conveyed by "moving the object into a queue position", then removing the animation entirely could result in the user not knowing the item had been successfully queued. It may be appropriate to draw the user's eye to the queued position using a different design metaphor, such as a badge or or variant of the fade technique.

[cookiecrook]

Vestibular triggers for animation include:

• any looping animation that cannot otherwise be stopped or autoplays on content load.
• any movement that is not triggered by the user (e.g. a notification bounces into view)
• any animations along a z-axis (e.g. zoom in or zoom out) or scaling of UI elements
• anytime two or more objects are simultaneously moving in different directions
• anytime two or more objects are moving at different speeds (parallax or momentum trailing effects)

[cookiecrook]

From @frivoal suggestion in #443, this could be

reduce-motion-preference: [ none | prefer | forced ]

• none: no preference
• prefer: web page author responsible for reducing animations or movement appropriately to avoid vestibular triggers or otherwise excessive motion.
• forced: motion (CSS animations, etc) prevented by the UA. Note: as far as I know, no platform or browser supports a setting like this, but I suppose it could happen.

PS. The none pattern still seems misleading in this context. It's silly that reduce-motion-preference: none means "user is okay with motion."

[tabatkins]

Drop the -preference. It's long and makes things harder to understand. (reduce-motion: none) says "don't reduce any motion". ^_^

Then (reduce-motion: prefer) works well too. (reduce-motion: forced) doesn't read quite as well, but I'm okay with it.

[inoas]

Why not keep adjectives:
(reduce-motion: none)
(reduce-motion: preferred)
(reduce-motion: forced) or(reduce-motion: requested) or (reduce-motion: required)

[inoas]

@cookiecrook reading that list makes me wonder if the property could become more fine grained in future (reduce-motion: loading-none fade-none zoom-none animation-none)

Another question would be if the users could in future have different levels of motion-animations (say 0-100%) and if the media query property should catch that?

[tabatkins]

"preferred" is above my comfortable "easy spelling" threshold; we try to keep CSS with as simple English as we can. (In general, past tense suffers from that, given the inconsistent end-consonant doubling.)

"required" doesn't quite communicate what's happening; it feels like a stronger version of "prefer", when actually it means something entirely different - it means that, in some way, the OS is turning off motion, and you better adapt to that lack.

[inoas]

What about:
(motion: all)
(motion: prefer-reduced) or (motion: reduced)
(motion: none) or (motion: disabled)