Animation

Accessibility in motion

Introduction

Motion and animation can dramatically improve the user experience of web interfaces by guiding users on their journey, bringing delight to static pages, and so much more. What’s equally important is that we ensure animation creates the best possible experience for every user, not just the seeing ones.

Motion should be used with intention to solve user problems and bring delight without disorienting users. Excessive motion can not only distract users but also increase page load times and cause accessibility issues. Intentional, subtle motion is key to improving user experiences and making motion accessible.

There are several different groups of people who cannot experience motion or need to avoid it: people with vestibular disorders, people who have low vision, people who use a screen reader, and people who are triggered by visual stimuli.

“The vestibular system includes the parts of the inner ear and brain that process the sensory information involved with controlling balance and eye movements. If disease or injury damages these processing areas, disorders of dizziness or balance can result.”

Common accessibility risks in motion design

• Not everyone can see animations, so it's important to provide alternative options.
• Fast motion can trigger dizziness, vertigo, and nausea in some individuals, particularly those with vestibular dysfunction.
• Quick and high-contrast animations, like flashing images, can trigger seizures in people with epilepsy.
• Excessive movement or the need to focus on multiple elements simultaneously (visuals, audio, text) can make it difficult for individuals with ADHD to stay focused and engaged.

When to use motion and when to avoid it

When designing animation and interaction, especially for websites, it can be tough to determine when motion should and shouldn't be used. When thinking about an animation, determine why it should be there.

• Does the animation give the user feedback or communicate functionality? Is movement essential for conveying meaning or information? If the answer to one or both is yes, go forth and animate.
• Is the motion decorative and meant to add a “Wow-factor” to your experience? Then it might be time to kill some darlings.

How to make motion accessible

• Keep motion design to a less than a third of the page, and the animation at the point of focus. This ensures that low vision users will not be overwhelmed by motion covering their screen or miss it outside of the part of the page they are zoomed in on.
• Avoid flashes and limit bounces to 3 times. Flashes and bounces can trigger epileptic seizures and be very disorienting for users with vestibular or sensory processing disorders. This is covered under WCAG, the Web Content Accessibility Guidelines.
• Avoid parallax scrolling and motion where the background and foreground move at different speeds. This affects people with vestibular disorders, as well as people who may be triggered by visual stimuli.
• Keep the duration short and the movement reasonable. UX motion typically does not last for more than 1 second, and even that is a little long. Animations other than UX motion can last longer, like an animated illustration. Using a shorter duration does not mean you should speed up the micro-interaction, but rather find a duration at which the speed feels natural for the size and movement of the object.
• Make sure motion does not hide or add elements in a place where screen readers or low vision people cannot find them. If you hide, add, or remove elements from the page, ensure that the code includes them in a way screen readers can still access the element and does not pull them out of context unless necessary.
• Design all elements of the page with and without motion, so users who prefer no motion can turn it off with a reduced motion setting. Make sure we are reducing cognitive load rather than increasing it.
• For videos, always include a pause button. This is also covered by WCAG.
• Provide a setting to turn off all motion on your website. While this may not be doable for larger sites, it is a recommendation from WCAG and may be an option for personal and smaller sites. Media queries can have nearly the same effect if that is not an option for you.

How to design accessible motion

Design

• Ensure good colour contrast.  Individuals with visual impairments and colour blindness have a harder time distinguishing shapes if they have low contrast. Make sure large text has a contrast of at least 3:1 with its background and give small text a contrast of over 4.5:1. (WCAG 1.4.3 contrast (minimum)) This also benefits those viewing the video in poor lighting conditions. Use tools like Color Oracle to check if your content is readable for people with colour blindness.
  
  

Animation

• Avoid elements that blink more than three times per second. (WCAG 2.3.1 Three Flashes or Below Threshold (Level A))
• Limit the number of moving elements and avoid overwhelming the viewer's focus area. This prevents the animation from becoming too distracting.
• Avoid a "parallax" effect, where the foreground and background move at different speeds, as this is a common cause of severe motion sickness with many users.
• Avoid swiping motions across the screen, like wipe transitions or big objects flying in, as they can cause motion sickness and nausea.
• Keep your animations small. Make sure movement covers a maximum of one-third of the screen area.  Large or full-screen motion design can disorient and cause nausea.
• Give the user enough time to register visual elements and read texts that might appear on the screen. Keep in mind that people with cognitive disabilities can be slow readers. (WCAG 2.2 Enough time)

Scripting

• Use clear and concise language. Keep your language at a B1-level difficulty and explain necessary words that exceed it. (WCAG 3.1.5 Reading level) You can check your text's difficulty with HemingwayApp or IshetB1?.
• Strike the right balance between descriptive narration and relying on visual elements.

Audio

• Background Noise: Ensure a clear distinction between foreground and background sound. Maintain a minimum of 20 decibels (approximately 4 times softer) difference between the voice-over and background music or sound, excluding short sound effects lasting 1 or 2 seconds.

Voice Over

• Speak clearly and calmly.
• Pause between topics or sections.
• If you choose not to explain every visual element in your voice-over to maintain the video's pace, leave enough time in between sentences for audio description to provide additional context.

The video format

A lot that can be done to make your video or animation more accessible to use:

• Textual Alternatives
• Transcriptions
• Captions
• Sign Language
• Player Functionality
• Avoiding Auto-play

References

• Accessible motion: why it’s essential and how to do it right by Medium
• Designing Safer Web Animation For Motion Sensitivity by Val Head
• How to Make Motion Design Accessible by Alik Brundrett
• Your Interactive Makes Me Sick By Eileen Webb
• Responsive Design for Motion by James Craig
• Making motion inclusive by Val Head
• What is Vestibular? by VERA
• Motion design by Webflow