prefers-reduced-motion

I've been starting to delve a bit more into web accessibility, both for work and as a general curiosity as I try to broaden my own horizons. After creating a few animations for some recent work at Xero, I came across a CSS media feature called prefers-reduced-motion.

As the name suggests, prefers-reduced-motion is something you can query in CSS to know whether the visitor of your website has set a preference to have things move around less. Reasons for why this might be are numerous: to save battery, or because the person finds extraneous animations annoying, or - as it relates to accessibility when I came across it - because the person may have a vestibular disorder in which the extra motion can cause dizziness or general discomfort.

For many years this website has had a parallax effect with the big image at the top of each page (often called a "hero image" in web design), whereby it moves at a slower rate than the rest of the page, notably the text. It's really only there as a stylistic thing because I thought it was cool all those years ago and I haven't quite gotten sick of it just yet. However, upon learning such fancies might actually make people sick, I thought I'd try with placing this effect behind that preference.

On macOS, the effect, system setting, and difference looks something like this:

So normally, the parallax effect is in play. But with "Reduce motion" enabled, that then informs the value of the prefers-reduced-motion feature in the browser, and the hero image reverts to scrolling at the same rate as everything else.

Other operating systems have similar settings, really only leaving browsers to implement the CSS feature so websites can react accordingly. Looking at the following browser support chart though, it looks like its really only the non-iOS mobile browsers lagging behind: https://caniuse.com/#feat=prefers-reduced-motion

There's a lot of nuance to this setting and its implications (eg: some movement actually aids with navigating the web, so turning of all movements might not always be the solution when reacting to this setting). Even though it's only made a tiny change here on this website, I've found it to be a nice intro to thinking more about accessibility and the ways I can better respect the diverse range of needs of those browsing the web.