Menu
There is plenty of documentation around on how to use the prefers-reduced-motion media query in CSS.
This is great but now that I'm using prefers-reduced-motion in my CSS, I want to be able to test what using my site is like for someone that has this setting enabled. I can't find any information on how to do this though and I'm having difficulty finding this as a setting in browser settings.
Maybe this isn't a browser setting at all. Maybe this is something that is set at the Operating System level. 🤔
636
Many operating systems have a Reduce Motion feature in their Accessibility settings. As of now, our web app does not respect this setting, but we will update our app to do so. Thankfully there is a media query called prefers-reduced-motion that we can detect via CSS.
On Android, The settings can be found in User Settings (Bottom right by pressing your Avatar) ⟶ App Settings ⟶ Appearance ⟶ Reduced Motion When reduced motion is enabled it will overwrite two other settings:
To simulate the operating system's reduced motion setting, without having to change your operating system setting: Type Control + Shift + P on Windows/Linux or Command + Shift + P on macOS to open the Command Menu. Type reduced, to turn the simulation on and off.
This even works dynamically, so users can change their preference on-the-fly, no reload required. If a user prefers reduced motion, the non-necessary reveal animations are gone, and just the regular scrolling motion is left. The screencast below shows the demo in action:
Oh, I didn't see the "User Preferences" section in the mdn documentation. 🤦🏻♂️
For Firefox, the reduce request is honoured if:
- In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
- Alternately, add
gtk-enable-animations = falseto the [Settings] block of the GTK 3 configuration file (~/.config/gtk-3.0/settings.ini).- In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- In Window 7 [& 8]: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
- In macOS: System Preferences > Accessibility > Display > Reduce motion.
- In iOS: Settings > General > Accessibility > Reduce Motion.
- In Android 9+: Settings > Accessibility > Remove animations.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#User_Preferences
It says "for Firefox" however since this is a system setting at the OS level, this is likely how you change the setting for all browsers that support this media query.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
