vertigif

2024-11-01

CSS has a media feature called prefers-reduced-motion which detects if the browser is set to minimise motion in web pages. This is beneficial for users who have vestibular disorders as visual stimuli can induce motion sickness.

This site doesn’t have any animated elements, just fade-in transitions for tooltips and barely-perceptible colour transitions in link hovers. But I do have GIFs and, unfortunately, browsers always autoplay them. One way to deal with this is to use videos instead, but I opted to use this media feature in tandem with picture sources.

GIFs can be a lot of fun, but they can also cause big problems for people with vestibular disorders, vision disorders, and seizure disorders.

—Kayleen Holt, The Trouble with GIFs

To set it up, you need two things:* the animated GIF and a still image (one of its frames). Set the GIF as the first source with media set to prefers-reduced-motion: no-preference. Set the still as the second source and the fallback.

Update: I just realised setting the still image as the second source is redundant since the fallback image will be used anyway without it.

Now the GIF will load unless reduced motion is set. The next thing to add is a link to the GIF as an option† for the user. Of course this is redundant if the GIF is visible so we’ll hide it accordingly.

If your device is already set to reduced motion preferences, the cat below shouldn’t be moving. In Firefox, you can add the following in about:config:

See it in action:

—josh