Why we should make Motion Accessible Link to this headline

Picture this: You click on a website link, ready to read an article when a pop-up suddenly appears demanding your email. To top it off, another notification banner slides in, then vanishes before you can read it and an auto-playing video loops endlessly. For many users this is more than just annoying. It’s physically sickening.

It’s that disoriented feeling after an intense rollercoaster ride that some users experience with aggressive UI animations, except they can't get off the ride. Unlike a theme park, users don't choose to experience motion sickness from your interface.

Motion sickness occurs when there is a mismatch between your senses and what your body actually expects. If your vision does not align with the the signals of your inner ear — your built-in balance and direction guide — it can leave people feeling dizzy and nauseous. While excessive motion can affect anyone, certain conditions can make users particularly vulnerable:

• Vestibular disorders affect inner ear balance system and can make even subtle animations feel nauseating.
• Chronic migraines create heightened sensitivity to visual stimuli and movement.
• Cognitive differences including Anxiety Disorders, ADHD can make excessive motion overwhelming and distracting.

Then is it even worth adding animations at all then? Link to this headline

When done right, animations enhance the user experience by guiding, providing delightful feedback, and creating intuitive interactions. Creating accessible motion design isn't about rejecting animations entirely. It's about designing inclusive experiences that work for everyone while preserving what makes animations valuable.

Design Guidelines for Accessible Motion Link to this headline

1) Keep It Short and Smooth Link to this headline

Animations with clear functions should stay simple, easy, and understandable. For icon animations, Google Material Design recommends keeping functional at 100 milliseconds(ms) or 200ms and more important ones to 300ms.

Animation by Google Longer or more extensive animations are best reserved for high impact moments and can last a bit longer.

Animation by Duolingo

2) Don't Overload Link to this headline

While it's fun to create little animations and sprinkle them throughout a page, it's not necessarily the best practice for usability. Many small 'fun' animations can easily become too distracting and keep users from their core tasks.

Animations by Kevin Osborn

Not everything that can be animated should be animated. Since any kind of motion attracts attention, prioritize carefully. For example: While chatting with service support a notification animation can inform the customer that a new message has just been sent. Pair that with a sound and this can help ensure the message isn't missed, especially when users are multitasking or have their attention elsewhere. The key is to use animation with intention. When it’s used it sparingly, each use carries more weight and attracts attention where it matters most.

3) User Control: Allow Motion to Be Stopped or Adjusted Link to this headline

Automatic content like carousels, autoplaying videos, or animated backgrounds should always have an easily discoverable pause control. Users need the ability to stop motion that continues for more than 5 seconds, as prolonged movement can trigger various accessibility issues.

4) Respect the prefers-reduced-motion media query. Link to this headline

This system preference lets users indicate they want minimal motion. When this setting is enabled, adjust to non-animated or less animated versions for those who are easily affected by motion.

Only remove animations that you know can be vestibular triggers. Some purely decorative animations don't need alternatives if they're not problematic, such as animated color changes, opacity fades and non-motion effects.

5) Avoid or Reduce Multispeed & Multidirectional Animations: Link to this headline

Parallax Scrolling is when background and foreground elements move at different speeds than the users scrolling input. The expectation mismatch between the physical scrolling and visual feedback can confuse the brain and trigger motion sickness.

Animation by Hadaka

Animation on Firewatch

Like with parallax prolonged spinning and vortex motion can also lead to dizziness in users.

6) Keep Flashing and Bouncing animations to no more than 3 times per second. Link to this headline

Rapid flashing can trigger photosensitive epilepsy, which includes rapid color changes, strobing effects, or quick alternating patterns. If your experience requires motion avoid these flashing and bouncing animations. Alternatively give users control with options like pause buttons, or offer still image alternatives for those who need them.

Trigger warning: Bouncing & Color alternation

Animation by PsycheSun

7) Reduce File Size for Optimal Performance Link to this headline

Depending on the kind of animation, animation files can get very bloated and create unwanted challenges. When animations load slowly or just “pop up” out of sync with other content, they can appear jarring or never display at all, especially when they are designed as part of a timed sequence.

On top, unoptimized animations, changing frame rates and jittery animations can also cause motion sickness, especially for large-scale animations covering most of the screen. That is why virtual reality experiences can become nausea inducing if the frame refresh rate is too low, and why full-screen web animations or stuttering parallax scrolling can trigger similar discomfort on a smaller scale.

When information is conveyed through Motion Link to this headline

Consider a simple loading animation that transforms from a spinning circle to a checkmark. For sighted users, this motion sequence communicates a clear narrative: "processing → complete → success."

But what happens when that same interaction needs to work for someone using a screen reader, or someone who has motion disabled due to high motion sensitivity?

Information Hidden from Assistive Technology Link to this headline

This is exactly the challenge I encountered while creating an interactive Rive animation for my thesis research. Rive animations are powerful for creating engaging, responsive interfaces, however animation canvas, with all interactions and animated feedback, is essentially invisible to assistive technologies.

So I took up the mantle and created an interactive site using Rive animations that can be navigated by keyboard. Here are some key lessons for assistive tech accessibility in animations

Screen Readers are software programs that allow blind and low vision users to read text that is displayed on the computer screen with a speech synthesizer (text-to-speech) or braille display.

How to make Information Accessible Through Code Link to this headline

Screen Readers are software programs that allow blind and low vision users to read text that is displayed on the computer screen with a speech synthesizer (text-to-speech) or braille display.

• To start, use semantic HTML structure that screen readers can navigate. Make use of arial labels that are
• If motion removes or adds new information to the screen, like pop ups, error messages and quick announcements, add dynamic Aria Labels that announce changes happening on screen.

• Keep purely decorative elements hidden from screen readers using aria-hidden="true" . For example animations that are purely for fun can be hidden from the screen reader. Same for buttons with icons that already have a name.
• If information is not accessible create alternative solutions for screen readers. In my case, in the Rive animation some pop ups can only be discovered through hovering and clicking by mouse. I created additional buttons that are visually hidden from regular users and can be accessed by keyboard navigation. Here, make use of aria-labels that explains that the button opens a pop up (aria-haspopup) and what content it will show (aria-label=”More information on cats”).

Because Rive animations lack built‑in accessibility features, I added hidden buttons on the right side that screen readers can detect. Each button opens a pop‑up.

The more we implement the better it will get for everyone Link to this headline

Ever since I got in touch with accessibility, I learned that we take good web design for granted. While it's easy to pinpoint what goes wrong on a website, we tend to overlook the hidden and thoughtful design choices that make a design solid and outstanding—like providing alternative solutions for those who cannot access motion as easily or subtle animations that nudge and guide the user in the right direction.

But providing motion accessibility doesn't mean we're only accommodating disabilities. The reality is that accessibility exists on a spectrum, and our needs can shift at any moment. A user might enjoy parallax scrolling on their desktop but feel nauseous trying to navigate it on their phone during a bumpy commute. Someone recovering from a concussion might need motion-free browsing for weeks, then gradually return to enjoying subtle animations.

Fundamentally motion accessibility is about choice and control, and allowing people to explore your page on their own terms. When we create motion that's predictable, controllable, and inclusive, we're not limiting the experience. We're expanding it to work across the full spectrum of human needs and circumstances.