Skip to main content

Reducing motion

Posted in Accessibility, Design and Development

There has never been a lot of animation on my website, and that was a very deliberate decision. Accessibility is very high on my list of priorities when designing and developing a website, and motion and balance (vestibular) disorders—permanent or temporary—mean that animation can be very uncomfortable for some people.

That said, I do have some animation on my website. No parallax scrolling or items flying into view as you scroll down the page; certainly not! But I’ve taken steps to reduce it by:

  1. Removing animation entirely where it didn’t really serve any purpose or add any character, for example links used to have a very slight animation to smooth the colour change on hover
  2. Stopping animation completely when someone has their operating system set to reduce motion (on a Mac it’s in System Preferences → Accessibility → Display → Reduce motion)

There are only a handful of moving parts left on my site, now that number 1 has been taken care of:

  • The underscore on the logo blinks every couple of seconds, to make it look like a cursor
  • When opening and closing the navigation on mobile screens two things happen:
    1. The three lines in the icon animate to form a cross
    2. The navigation menu is revealed smoothly
  • Upon focus, the search button grows to fill the whole navigation bar, covering the navigation items

The prefers-reduced-motion media query allows us to prevent those animations. As an example, here’s the SCSS to show how I disabled the animation for the underscore/cursor in my logo:

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

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

prefers-reduced-motion was introduced to Safari in 2017 and has pretty good support across browsers.

My advice would be to be conservative with your use of motion on your website, but, where you do use it, be sure to offer a reduced or zero motion alternative for those who ask.

Subscribe

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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. XHTML syntax is still worth using

    A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.

  2. Booleans in ARIA

    HTML booleans are bit quirky but, as if just to complicate things, booleans in ARIA work slightly differently. It’s worth knowing how and why.