On 23 October, Mozilla released Firefox 63. A new feature is support for the CSS media feature prefers-reduced-motion.
Firefox 63 also supports the prefers-reduced-motion CSS media feature: it allows animation-heavy sites to provide alternative layouts to users who have ticked off “Show animations in Windows” on Windows, or checked the “Reduce motion” a11y option on macOS https://t.co/GWwbeHSd8Z
— Andreas Bovens (@andreasbovens) October 23, 2018
By making CSS animation conditional on prefers-reduced-motion, websites can respect a user’s operating system animation setting. In Windows 10, that setting is Windows Settings > Ease of Access > Display > Show animations in Windows.
In iOS 12, you unintuitively turn on two switches to turn off animation: Settings > Safari > Advanced > Experimental Features > Web Animations and CSS Integration and Web Animations.
The Mozilla page in the tweet contains a great worked example; a <div> has a vibrate animation applied unless the user has disabled animations. I checked it in Firefox 63/Windows 10 and Safari/iOS 12.0 – it works!
Making CSS animation conditional on user settings enables developers to satisfy the WCAG 2.1 success criterion, 2.3.3 Animation from Interactions (AAA):
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
This success criterion supports people with vestibular (inner ear) disorders. These disorders can be triggered by animations like parallax scrolling, content sliding, and page flipping. The animations can cause nausea, headaches, and dizziness.
Developers should use prefers-reduced-motion to respect user settings for all non-essential interaction animations, such as page flipping transitions and sliding expansion of panels and menus.
Browser support so far is limited, just Firefox (desktop) and Safari (desktop/mobile), but it should only improve.
