# Reduced Motion Strategies: Motion and Accessibility

> Learn how to design interfaces with animations and micro-interactions that respect users' preference for 'reduced motion' if they are sensitive to animations and visual nausea.

*Tags: ux, strategy, accessibility, a11y, animation*

---


> [!info] Quick Definition
> **Reduced Motion** is an accessibility preference that users can activate in their operating systems (Windows, macOS, iOS, Android). When activated, it tells applications to remove or simplify unnecessary animations (`prefers-reduced-motion`) to prevent nausea, dizziness, or distraction for people with vestibular disorders or ADHD.


## Why the Designer Should Manage Motion?

As designers, we love animations: zooms, parallax, bounces, and smooth transitions. However, for millions of people, these animations are not "pretty"; they are physically painful. Excessive movement can cause migraines, disorientation, and vestibular discomfort.

Designing for reduced motion doesn't mean removing the magic from your designs; it means being **polite** and offering a calm alternative to those who need it.

## The 2 Paths: Animation vs. Function

For your motion strategy to be accessible, you must distinguish between two types of animation:

### 1. Decorative Animations (What "can be removed")
These are effects that only have an aesthetic intent.
- **Example:** Parallax scroll effect or a background of moving stars.
- **Strategy:** If the user has "Reduced Motion" active, these animations **must be removed entirely** or replaced by a static image.

### 2. Functional Animations (What "should be softened")
These are those that help the user understand context (e.g., a modal that expands from the button that activated it).
- **Example:** A progressing loading bar or a appearing side drawer.
- **Strategy:** Instead of an aggressive sweep or zoom, use a **soft opacity transition (Fade-in)**. The brain catches the state change without the sensation of physical movement.

## It's Not All Dizziness: ADHD and Distraction

Reduced motion is also a vital tool for people with **ADHD (Attention Deficit Hyperactivity Disorder)**. Constant animations, infinite loops, or blinking elements capture their attention involuntarily, preventing them from focusing on your application's main task.

A responsible design allows the user to pause or disable any animated element that lasts more than 5 seconds.

## How to Implement Reduced Motion (Design and Code)

As a product designer, you should define the two states of your animations:

- **State with Motion (Default):** Zoom when opening the modal, 300ms duration.
- **State with Reduced Motion (Accessible):** Instant opening or a soft fundido (`opacity`), 150ms duration.

In code, developers use the CSS `prefers-reduced-motion` media query to detect user preference and apply the corresponding styles automatically.

## Checklist for Accessible Animations

- **Avoid Fast Blinking:** Never show anything that blinks more than 3 times per second to prevent photosensitive epilepsy seizures.
- **Offer Pause Controls:** Any image carousel or background video should have an easily accessible "Pause" button.
- **No Aggressive Zooms:** Zoom effects that cover large parts of the screen are those that cause the most dizziness. Change them to fades.
- **Do not use scroll as a trigger for complex animations:** Parallax scroll is motion accessibility's main enemy.

## Mentor's Tips

- **Design the "Fade" as a Safety Net:** If you don't have time to design two versions of every animation, a soft opacity transition (`opacity`) is usually safe for both normal and reduced modes.
- **The Duration Law:** Sometimes simply shortening an animation's duration (making it faster) reduces the time the eye has to process physical movement, mitigating dizziness.
- **Test Reduced Motion on your own mobile:** Activate the option in Accessibility settings and navigate through your favorite application. You will be surprised at how much the perception of the product changes.

## Useful Resources and Tools

- **W3C:** [Web Content Accessibility Guidelines (WCAG) - Motion](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)
- **MDN Web Docs:** [prefers-reduced-motion Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
- **A11y Project:** [Understanding Reduced Motion](https://www.a11yproject.com/posts/maintaining-user-intent-with-prefers-reduced-motion/)
- **Articles:** [Responsible Motion Design](https://uxdesign.cc/how-to-design-responsible-motion-9a3e8e3e8e3)
---
[[accessibility-tree]]
[[haptic-feedback-principles]]
[[functional-animation-principles]]
[[redlining-specifications]]


---

Source: https://www.fernandoux.com/en/wiki/strategy/reduced-motion-strategies/