Improving Inclusivity with Accessible Animations

by Nathanael Adam

Animations are really nice. They capture attention and can improve user retention and business branding. However, did you know they can also harm people? This article will show how animations can harm people and how to create safe animations for your apps.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data.

Happy debugging! Try using OpenReplay today.

Have you ever struggled to read text on a website before because the text contrast relative to the background is too low? Or have you ever made a mistake while typing a password and then needed to erase the entire password because the input field didn't have the show password option, so you did not know where the mistake was?

For simplicity, this article will use websites as examples but most of the things mentioned here also work for mobile apps and other platforms.

If you have experienced any of the above examples, you are not alone; they are examples of accessibility failures. Proper color contrast makes your website accessible to people in brightly lit environments or with color blindness. The show password option makes password fields accessible to people who might make mistakes while typing, such as people with motor impairment, people with one arm, or just people who are typing while in a rush or distracted.

When some think of accessibility, they think of aria labels, semantic HTML, etc., and they are correct. Accessibility is all that and much more. Accessibility involves making the web easy and delightful for everyone, whether they are impaired (physically or cognitively) or live in areas with poor network connections.

Accessibility demands that everyone should be able to access the Internet regardless of their physical, mental, or financial condition. When you attempt to implement accessibility principles in your website, you're playing your part in leveling the playing field for everyone.

So, how does animation come into play for accessibility?

The rationale behind accessible animations

Remember when I mentioned earlier that accessibility means making the web easy and delightful for everyone? Well, some people neither find certain animations delightful nor some websites easy to use for some reason. Two of the most prominent are Vestibular disorders and photophobia.

Vestibular disorders: Your inner ear helps you maintain balance by sending synchronized signals to your brain. The brain processes these signals and interprets them to keep your body balanced. Damage to the inner ear can cause imbalance, dizziness, and sometimes vertigo. Sometimes, these signals can be disrupted, and either real or imagined motion can trigger the side effects of vestibular disorders. Some studies estimate the number of people aged 40 or older suffering from this at 69 million in the USA alone.

Photophobia: Usually, the word "phobia "means fear of something, but photophobia means sensitivity to light. People with this condition are very sensitive to bright light, and the cause could be genetic or some form of brain or eye damage. The result of this sensitivity is pain, especially when exposed to light, flashing lights, or light patterns. For some, it could be so severe that they can get epileptic attacks from exposure to these light patterns.

These disorders aren't exaggerated; they are actual problems experienced by millions of people. There's an organization created to make the web more accessible called the Web Content Accessibility Guidelines or WCAG. Take a look at what they say about vestibular disorders in this article- "The impact of animation on people with vestibular disorders can be quite severe. Triggered reactions include nausea, migraine headaches, and potentially needing bed rest to recover." 

Put yourself in the shoes of someone trying to surf the web. Because of a seemingly harmless motion animation, like a parallax effect or a horizontal scroll trigger, you develop a migraine and/or dizziness with vertigo and end up needing bed rest! I'm pretty sure you would not be happy, but you'd do your best to avoid the website that triggered those symptoms.

What about people with photophobia? Certain animations could trigger epileptic attacks, this article mentions some causes of epileptic attacks in people, and one cause was flashing images on computer screens or flashing color contrasts.

This lends credence to the fact that certain animations can cause genuine issues for people, and sometimes, the issues are severe enough to warrant medical attention.

So, how do you make your animations accessible for people without ripping out all the animations and building something bland?

Guidelines regarding accessible animation

Fortunately, the WCAG has done a wonderful job laying out guidelines and techniques to improve your animation's accessibility. Let's look at some guidelines set out in the WCAG, then we'll discuss them and see some examples showing them.

Some guidelines set out by the WCAG are: 

• Provide a control for users to turn off non-essential animations from user interaction (WCAG 2.2.2). 
• Give users the option to turn off all animations (WCAG 2.3).
• Ensure no content flashes more than three times in a one-second period (WCAG 2.3.1).
• Avoid using unnecessary animations (WCAG 2.3.3).
• Use the CSS prefers-reduced-motion feature.

Make your animations accessible

You might read some of the WCAG guidelines and not completely understand how they work, but worry not. In this section, we'll discuss each guideline along with a practical example to help visualize it.

Some of the examples used contain motion or rapid flashing. The more dangerous ones are in an external code pen, so if you have vestibular disorder or photophobia, please proceed with caution.

Avoid using unnecessary animations (WCAG 2.3.3)

Animations can enhance user experience and create memorable experiences for users. However, animations should have a purpose that goes beyond mere aesthetics. For example, animations can direct users to call-to-action buttons, transition between content to avoid abrupt visual feedback, or subtly improve user experience.

However, certain animations, especially those that involve motion, such as parallax effects and locomotive scrolls, may pose challenges for people with vestibular disorders. They could induce dizziness, nausea, or vertigo as mentioned in WCAG 2.3.3.

It begs the question if implementing an animation that could have severe effects on your users is necessary.

So, how do you fix this? Ditch any unnecessary animation that involves motion and go for more accessible alternatives. For example, if you use a scroll trigger, consider replacing it with a carousel. That way, your users would still see the content but without potentially getting a migraine or worse.

Provide a way for users to pause certain animations (WCAG 2.2.2)

Non-interactive animations such as Graphics Interchange Format (GIFs) or auto-playing carousels could pose a problem; for example, they might be difficult to read or follow for some users. If you have something like that on your website, a great way to make it accessible is to give your users the ability to pause them. 

An example of this is the animated carousel below, taken from Apple's website.

This auto-playing carousel could be difficult for certain people to follow, which is why Apple has given users control over this animation. Now, they can pause the content and follow at their own pace.

This approach aligns with the advice given in WCAG 2.2.2 "Pausing and resuming where the user left off is best for users who want to pause to read content and works best when the content is not associated with a real-time event or status". The carousel ticks these boxes: It lets users pause content, and the content isn't real-time, so users miss nothing by pausing it.

If your content involves real-time updates, like a stock exchange website, you can give users the ability to pause the content on the screen while having a reload button so they can reload the stock data.

So, if you have non-interactive animations, why not give your users the ability to pause them? That way, you'll be working in accordance with the WCAG guidelines and your website will be more accessible.

Give users the option to turn off all non-essential animations

You can go further than the previous technique and have a universal button that disables all animated content. Now, your users don't need to pause every single animation just to follow certain content; by toggling the Disable Animations button, the site becomes static, and they can follow.

An example is the GIF below.

Some users have no issues with blinking and scrolling content, but others may find it hard to follow. By clicking the Disable Animations button, the site instantly becomes more accessible as the animations are disabled and the site becomes static.

Ensure no content flashes more than three times in a one-second period

Flashing lights or animations could be very dangerous to certain people; some observe that flashing lights and certain light patterns can trigger seizures and epileptic attacks in people.

An example of flashing animation that breaks this rule is in this codepen. Do not open the link if you have photosensitivity, as it contains rapidly flashing lights.

So how do you fix this? In the WCAG Technique G19, the technique to make this better is to ensure your flashes do not happen three times within a second. This codepen is an example of an animation that passes that criterion. Now, instead of multiple colors flashing rapidly, each color takes at least a second to display and transition to the next.

Use the CSS prefers-reduced-motion feature

Some users have settings set to reduce motion in their browsers or operating systems. You can use the prefers-reduced-motion media query to detect this preference and tone down certain animations. 

So how do you use it? You can use it by simply inserting code into the prefers-reduced-motion media query. Now, suppose a user has reduced motion settings enabled in their browser or operating system and uses your website. In that case, the code you've written in the media query runs, and your animation is either slowed down or stopped.

@media (prefers-reduced-motion) {
  /*your code here*/
}

Let's change one of the previous examples to show this.

You can try it out yourself if you follow the steps below.

First, Create a new HTML file and paste the code below into it.

<!-- index.html -->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <li>
        <p>Home</p>
      </li>
      <li>
        <p>About</p>
      </li>
      <li>
        <p>Contact Us</p>
      </li>
    </nav>
    <div class="container">
      <p class="marquee-text">This is a marquee text!</p>
      <p class="animated-text">This text fades.</p>
    </div>
  </body>
</html>

Next, create a style.css file and paste the CSS below into it.

body {
  background-color: black;
}
.container {
  padding: 20px;
}
nav {
  display: flex;
  gap: 50px;
  align-items: center;
  padding-left: 20px;
}
p {
  color: white;
}
.marquee-text {
  width: 60%;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee-animation 4s linear infinite;
}
.animated-text {
  font-size: 1.5rem;
  animation: text-animation 1s ease-in-out infinite alternate;
  opacity: 0;
  color: white;
}

@keyframes marquee-animation {
 0% {
    transform: translateX(0);
 }

 100% {
    transform: translateX(-100%);
 }
}

@keyframes text-animation {
 from {
    opacity: 0;
 }

 to {
    opacity: 1;
 }
}

@media (prefers-reduced-motion) {
  .marquee-text,
  .animated-text {
    animation: none;
    opacity: 1;
 }
}

The animated image below is the result of the code block above. It's a simple page with two different animations: a fading animation and a marquee text animation. These animations will run properly on a device with no reduced motion settings but behave differently when you enable the prefers-reduced-motion setting later on.

You can simulate the prefers-reduced-motion setting on various devices if you follow the user preferences in the MDN documentation. However, this example will use the Chrome browser.

To simulate the prefers-reduced-motionpreference in Chrome, follow these steps:

1. Open Chrome DevTools using Ctrl+Shift+i on Windows.
   

2. Next, use Ctrl+Shift+p to open the command menu.
   

3. Now, if you type "prefers" in the command input, you'll see "Emulate CSS prefers-reduced-motion: reduce",
   

4. if you select it, it runs the code in the prefers-reduced-motion media query, and the animation stops.
   

Keep in mind that this media query does not replace all the other tips mentioned in this article, not all users will have this setting enabled. So implement this together with the other tips mentioned in this article to create accessible websites for all.

Conclusion and Further Resources

Animations can breathe life into a website and improve user experience, but if not done with others in mind, it could become a source of pain and discomfort. To accommodate everyone, use the tips in this article to make your animations more accessible.

If you're interested in learning more about vestibular disorders and improving your animation's accessibility, check out these articles:

• The Web Content Accessibility Guidelines for motion interactions.
• Valhead's article for designing safer web animation for motion sensitivity.
• Facundo Corradini's personal experience with vestibular disorders.
• Aurora Hailey's article talks about the importance of animation and when to use it.