**[[ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | prefers-reduced-motion ]]** media query sees [[ https://caniuse.com/#feat=prefers-reduced-motion | increasing operating system and browser support ]] and should be taken into account for all user-interface `transitions` and `animations` to address people with [[ http://a11yproject.com/posts/understanding-vestibular-disorders/ | vestibular disorder needs ]] (global estimation of [[ http://vestibular.org/understanding-vestibular-disorder | around 70 million people ]]).
=== Possible implementation paths
- Adding a core style module that is either loaded by default or as an opt-in for skins and by default by installer(?)
- Adding a specific CSS class to `body` as core functionality when user hasn't set `@media screen and (prefers-reduced-motion: reduce)`;
- Just relying on media query (as Less mixin) on every relatively big movement, mismatched direction or spatial distance animation/transition
== Prior work
This has been discussed before in context of
- MobileFrontend T234570#5784464
- Vector T246419 and https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/599431/ on sidebar animation
== External references
- https://animate.style/ (see the section labeled "Don't disable the prefers-reduced-motion media query")
# QA
On OSX
[] Click reduce motion checkbox in accessibility system preferences
{F35098177}
[] Visit a page as a logged in user and scroll down so the sticky header appears
[] Expected - sticky header appears instantly without animation
[] Untick the reduce motion checkbox
[] Visit a page as a logged in user and scroll down so the sticky header appears
[] Expected - sticky header appears with animation