Providing an Accessible User Experience with Animation

Providing an Accessible User Experience with Animation

Using animation on the web is a great way to bring a unique flair to your design and maybe add a bit of delight to your user experience. Well designed animations are informative; they let the user know something has taken place or are used to guide the user to a new task which needs attention. Ideally, animations would be useful, predictable, and consistent.

On the other hand, poor use of animations might be distracting, taking attention away from the current task, or perhaps leave someone feeling queasy and disoriented.

And by the way, when we mention "animation" we're basically including anything that moves on the screen; .gif images, video, carousels, and any page elements which moves on any type of mouse or keyboard interaction.

Animation and accessibility

How might adding animations to a website, app, or even an operating system, have a negative impact on those with a disability? Here are a couple of ways:

  • When it comes to someone with a cognitive impairment, setting in place a highly animated scene or activity upon completing an action, or having other moving pieces on the screen such as an auto-playing video or advertisement can be very distracting. So much so they may feel the need to start the task over again.
  • For folks who are susceptible to motion sickness or Vestibular issues, some animation can lead to feelings of nausea or vertigo.

What makes up a "poor" animation experience

Everyone will have a different reaction, or perhaps no reaction at all, to a piece of animation. For those who do experience a negative reaction, how do we avoid creating such an experience?

Here are a few points to consider when creating animations:

  • Size of movement. Small or compact animations, like a loading spinner, are helpful. However, if there's something moving from one side of the screen to another, especially critical pieces of content, this can be problematic. Keep animations small and purposeful.
  • Direction and speed. Parallax effects and scroll jacking, which tend to involve foreground and background elements moving at different speeds, or objects moving in different directions than expected, can cause issues. Allow the user to scroll at their own pace.
  • Distance. For animations which seem to span large lengths of space, although only the size of a computer screen, can sometimes trigger a negative experience. Again, it's best to keep animations small and compact in order to avoid a negative user experience. Refrain from animating long lengths of content.
  • Flashing. Avoid strobing or flashing content which can be detrimental for anyone who is susceptible to seizures. If such content is required, lower the flashing content to no more than three times in any one second period.

How to ensure accessible animation

Let's look at a few ways to create an accessible and inclusive experience through the use of animation:

  • Design subtle animations. Using animations in a way that is subtle and used as a means to guide the user can be very helpful. Try to minimize animations which alter default speed, movement, and control that users are accustomed to. For example, when adding an item to a shopping cart, there could be an animation to highlight this activity as complete. Another example might be when submitting a dynamic form, animate an error or success message to draw the users attention to this area.
  • Animations should be easily understood and predictable. In keeping with the "subtle" theme, animation should ideally be used in a way that people can understand the meaning behind the animation. An example of which; the classic loading spinner. This helps to inform the user that progress is being made and a background process is being run. It basically conveys the message, "Please be patient while we process your data."
  • Design a "no animation" state. It is possible for people to "turn-off" animations at an operating system level. For example, the macOS Accessibility settings feature the "Reduce motion" option. We'll chat about this in more detail shortly.
  • Allow animations to be paused. If there are background videos, carousel sliders, or even animated GIF images on the screen, provide a means for these types of content to be paused. Build the pause control into each element, but if there are many different animations to be halted, consider designing and implementing a global, "Pause all animations" control. Your users who are susceptible to motion sickness will thank you.

Animation is something that can be unexpected, and when it's there, we typically don't have a whole lot of control over the experience. How can we ensure when animation is in use that we also create an accessible experience?

The prefers-reduced-motion media query

One tool in the developer toolbox we can utilize is the prefers-reduced-motion CSS media query. This media query allows developers the opportunity to create a "no animation" (or less animation, depending on your needs) state for user interfaces.

In order to give the choice of experiencing animations for our users, macOS, iOS, and Windows feature a setting to remove animation all together called "Reduce motion." When this setting is enabled within the operating system settings, code within the prefers-reduced-motion media query will fire, allowing for that "no animation" state.

First, let's review how to enable this "Reduce motion" setting in macOS:

  1. Settings
  2. Accessibility
  3. Display
  4. Activate the "Reduce motion" checkbox

And within Windows 10:

  1. Settings
  2. Search, "Advanced system settings"
  3. Performance Settings
  4. Deactivate the "Animate controls and elements inside windows" checkbox

With this set, any code within the prefers-reduced-motion media query will execute.

Coding a "no animation" state

When we want to remove or disable a piece of animation in a website, we can add the CSS to a prefers-reduced-motion query.

For example, if there was a transition set on all button elements to animate the background-color property on :hover and :focus, the CSS might look like:

button {
  background-color: Crimson;
  color: White;
  transition: background-color 0.25s;
}

button:focus,
button:hover {
  background-color: FireBrick;
}

And if, for example, the end user didn't want to wait the .25 seconds for the transition to complete for some reason, we could provide a "no animation" state by utilizing the prefers-reduced-motion media query:

@media (prefers-reduced-motion) {
  button {
    transition: none;
  }
}

And that's it! By including this bit of CSS, any transition animations set on the button selector will be removed when the user has selected the "Reduce motion" option in their operating system settings.

Browser support

As of this writing, Safari, Chrome, and Firefox support this media query with other browsers and trailing behind. However, let's not let this prevent us from future-proofing our code. People in the future who require and rely on this setting will thank you.

By using the prefers-reduced-motion media query, we're allowing our users to remove all animations which they may find distracting or jarring. Remember, the key here is to provide a usable and comfortable user experience in order for people to enjoy, return to, and share the content we create.

WCAG success criteria

This comes back to 2.3.3 Animation from Interactions which states:

"Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed."

Resources:

Back to blog