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.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form 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. Opening links in a new tab or window is better avoided

    A link to an external source opening in a new tab or window is something that appears innocuous but really isn’t as straightforward it seems.

  2. First impressions of iOS 14

    After 24 hours using iOS 14, I’ve found some of the new features unexpectedly useful. Here are my first impressions.