Skip to main content

Progressively enhanced animated content

Posted in Accessibility and Development

I’ve read a lot of articles about using prefers-reduced-motion on the web; I’ve even written one of them!

I’m a big fan of Patrick H. Lauke’s progressively enhanced approach where instead of telling the browser “here’s an animated image, but don’t show it if the user has set reduced motion on their system”, we’re only serving the animation if:

  • the user has an operating system and browser that is able to reduce motion
  • the user hasn’t turned on the reduced motion setting

So instead of this SCSS, that I use to make the underscore on my logo blink:

.underscore {
animation: blink 2s steps(20, start) infinite;

@media screen and (prefers-reduced-motion: reduce) {
animation: none;
}
}

We’d write this:

@media screen and (prefers-reduced-motion: no-preference) {
.underscore {
animation: blink 2s steps(20, start) infinite;
}
}

The crucial thing here is that users who can’t opt in to reducing animation won’t get the animation, where previously they got it whether they wanted it or not. Not very accessible!

The great news is that this approach extends to use within the <picture> element for animated content, as opposed to CSS-housed decoration. So, building on code from a Brad Frost blog post:

<picture>
<source srcset="animated.gif" media="(prefers-reduced-motion: no-preference)"></source>
<img srcset="static.jpg" alt="Description of the image" />
</picture>

I know we might be depriving some users of our lovely animations, but if we can’t be sure a user won’t have a bad experience with motion, we should be serving up static content.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.