Should Designers Hit Pause on Animation?

Back to blog

Should Designers Hit Pause on Animation?

Posted September 27, 2022

AudioEye

Posted September 27, 2022

A stop-motion illustration of a purple accessibility icon rolling into frame from left to right
A stop-motion illustration of a purple accessibility icon rolling into frame from left to right

Ready to see AudioEye in action?

Watch Demo

Adding animation to your website might spark joy, but is it good for accessibility? Check out some do’s and don’ts for accessible animations.

You know the children’s book If You Give a Mouse a Cookie?

Well, if you give most designers an inch of white space, they’re liable to fill it with something animated. What better way to highlight a key feature, explain a difficult concept, or simply add a moment of joy than a quick animation?

Unfortunately, even the best designers can sometimes forget about accessibility in the pursuit of ever more creative and engaging designs.

I’ve certainly been guilty of overdoing animation. Adding a transitional animation or looping graphic can feel like a fun way to show you care about a website — and that blood, sweat, and (developer) tears went into the final product.

But at the end of the day, our top priority is to create designs that work for everyone. Or at least, it should be.

Looking to audit your website for problematic animations? Try scanning it for accessibility.

What Can Go Wrong With Animations?

Designers have long been on the frontier of the internet, looking for new ways to grab people’s attention and keep them engaged.

With a little bit of motion, we can help create websites that feel like virtual worlds to explore — similar to a VR experience. But unlike VR, these animations cannot be turned off. And that can be problematic for accessibility.

For people with disabilities, animation can make for a distracting, uncomfortable, or outright intolerable experience. In fact, the Web Content Accessibility Guidelines (WCAG) — the de facto international standard for digital accessibility — include a number of success criteria related to the use of animation.

To help you create designs that work for everyone, let’s go over some best practices for accessible animations.

Examples of animation good and bad, including a flashing pop-up ad, play and pause buttons, and an eye and accessibility icon with wavy lines

1. Ask if Animation Is Essential to the Design or Product

If you’re trying to decide when, where, and how to use animation, the first question you ask should always be “Is it necessary?”

Because we know animation can disrupt — or even damage — the user experience for people with disabilities, it’s important to use it with discretion.

When I’m debating whether or not to animate an illustration or element, I apply the following standard:

  • If it’s to show progress on a page or draw attention to something specific, it’s probably necessary.
  • If it’s purely aesthetic, I should start looking for another solution.

This is a simplified way of accounting for WCAG Success Criterion 2.2.3: Animation from Interactions, which requires some way for users to disable non-essential animation. But it’s also an easy way to help you use animation with intention — and not just for aesthetic appeal.

2. Avoid Flickering and Intense Motion

JUST STOP IT.

It’s not even about aesthetics (although I’m not sure why anyone thinks an intrusive, flashing element is the best way to connect with customers). It’s about safety.

One of the unintended consequences of flashing lights and certain patterns is that they can cause seizures. According to WCAG Success Criterion 2.3.3, some users experience distraction or nausea from animated content:

“For example, if scrolling a page causes elements to move — other than the essential movement associated with scrolling — it can trigger vestibular disorders. Vestibular (inner ear) disorder reactions include dizziness, nausea, and headaches.”

WCAG Guideline 2.3 is intended to minimize this risk by requiring designers and developers to avoid the types of flash that are more likely to cause seizures. There are two success criteria for this criteria: 

At minimum, you should include a trigger warning and a play-pause option for any element that flickers or moves across the screen too fast.

A web browser that shows an animated loading screen, next to play and pause icons

3. Have an On/Off Option

Content that moves, blinks, or scrolls can be distracting, especially for people with attention deficit disorders.

For this reason, WCAG Success Criterion 2.2.2: Pause, Stop, Hide requires that users have some way to pause, stop, or hide content like this — unless that movement is essential to the content itself.

According to the World Wide Web Consortium (W3C), some examples of essential animation include:

  • A loading animation that instructs the user to wait while the video or file loads.
  • A full-page advertisement that must be viewed before users can access free content on the site.
  • A stock ticker with “pause” and “restart” buttons. Pausing the ticker causes it to pause on the currently displayed stock. Restarting causes it to resume from the stopped point.

Click here to see a full list of animations the W3C considers essential.

Prioritizing Accessibility In Your Designs

Recently, our team was testing different ways to animate illustrations on a webpage and discovered LottieFiles — a looping SVG animation that can be easily generated in After Effects. This seemed like a wonderful alternative to heavier GIF files that can bog down load times, but we couldn’t find a way to let users pause the animation.

With that in mind, we made the best decision for accessibility and removed the animations while we researched other ways to enable play-pause functionality.

Once you start to prioritize accessibility in your designs, you’ll run into scenarios like this all the time. My sincere hope is that you’ll make the right choice for accessibility every time — even if you need to explore other ways to grab people’s attention or spark a moment of joy.

Want to get more tips on designing for accessibility? Check out our Ultimate Guide to Accessible Web Design.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading