Reduced Motion #

When designing websites—well, anything, really—it is important to think about what impacts your designs can have on people with disabilities. Motion-heavy animations, animated GIFs and similar, can cause discomfort for people with, e.g. vestibular motion disorders. For this reason, browsers have had support for the prefers-reduced-motion media query for a long time, allowing users to set motion preferences at both the browser and even the operating system level.

Animations #

Let’s take the following CSS animation, which is played when clicking an anchor next to a heading on this page, as an example:

section:target {
  animation: highlight 3s;
}

We could add the following snippet below, to disable the animation if a user prefers reduced motion:

@media (prefers-reduced-motion: reduce) {
  section:target { animation: none; }
}

But this disables the animation entirely, meaning when the animation would trigger, users with this preference are left out, not seeing anything. So instead, it might be better to instead show something, although with less motion in it, like this for example:

@media (prefers-reduced-motion: reduce) {
  section:target {
    animation: highlight 3s;
    animation-timing-function: steps(1);
  }
}

Using the steps() function, one can specify the number of animation steps, which in this case only causes the first step of the animation to appear for three seconds, and then immediately disappear.

We can do one more thing, to also include the people using browsers that don’t support the media query, by using no-preference instead of reduce and swapping the rules:

section:target {
  animation: highlight 3s;
  animation-timing-function: steps(1);
}

@media (prefers-reduced-motion: no-preference) {
  section:target { animation: highlight 3s; }
}

You can verify these results, by enabling reduced motion either in your operating system settings or in your browsers preferences and simply clicking on the anchor mark of one of these sections (the hash character behind a heading).

GIFs #

To respect a users choice for reduced motion in regard to animated GIFs, one might implement one of these two (non-exhaustive) options:

1. Show a freeze-frame of the GIF, keeping the alt-text of the original. This could also allow for reduced network traffic because only a single frame would need to be downloaded.
2. Create a different, static visualisation of the GIF’s information which doesn’t require motion. In this case the question would be, whether the GIF was even needed in the first place.

The second case could be solved in multiple ways, and as already stated, could be interpreted as a lack of need for the GIF in the first place. So instead let’s look at the more interesting case of showing a still.

When I first started thinking about this problem, I couldn’t come up with a solution that didn’t require JavaScript. But then I discovered the HTML <picture> element. It can be used to offer alternative versions of an image for different scenarios by specifying <source> elements as alternatives to a foundamental <img> element. And of these <source> elements, the best match is chosen by the browser. So let’s take this snippet here, which loads the animated cover-image for this website:

<img src="https://traumweh.dev/black_cat_x32.png" alt="(Removed for readability.)">

This is a fairly fast, looping animation, which might very well cause discomfort for some individuals. So using thee <picture> element mentioned above, we could instead write the following code, which uses the media attribute for <source> elements, to specify that a resource is a good match for a certain media preference:

<picture>
  <source class="coverart" srcset="https://traumweh.dev/black_cat_x32.gif" media="(prefers-reduced-motion: no-preference)">
  <img class="coverart" src="https://traumweh.dev/black_cat_x32.png" alt="(Removed for readability.)">
</picture>

This produces the following result, which you can verify by enabling reduced motion either in your operating system settings or in your browsers preferences: