Motion Accessibility

Motion accessibility ensures animations and transitions do not cause harm or disorientation for users with vestibular disorders, motion sensitivity, or seizure conditions. Accessible motion design respects user preferences and provides alternatives.

What Is Motion Accessibility

Motion in interfaces includes transitions, animations, parallax scrolling, auto-playing videos, and animated decorations. While motion can enhance user experience, it can cause physical symptoms for some users: dizziness, nausea, migraines, or in extreme cases, seizures.

Vestibular disorders affect the inner ear and balance system. Motion on screens can trigger symptoms for people with these conditions. Respecting the prefers-reduced-motion media query helps these users by providing motion-free alternatives.

WCAG addresses motion through multiple criteria: 2.2.2 (Pause, Stop, Hide) for auto-playing content, 2.3.1 (Three Flashes) for seizure-inducing patterns, and 2.3.3 (Animation from Interactions) for motion triggered by user actions.

How Motion Accessibility Works

The prefers-reduced-motion media query detects user system preferences. Users who have enabled reduced motion settings in their operating system indicate sensitivity to motion. CSS can respond by reducing or eliminating animations:

This approach keeps animations for users who want them while providing alternatives for those who do not.

Auto-playing animations need pause controls. Decorative animations, slideshows, and videos that play automatically should have visible controls to pause them. This satisfies WCAG 2.2.2.

Essential animations that provide necessary information should be simplified rather than removed entirely. A progress indicator might reduce complexity while still communicating progress. The user preference signals motion sensitivity, not opposition to all animation.

Flashing content poses seizure risks. Content flashing more than three times per second can trigger seizures in people with photosensitive epilepsy. WCAG 2.3.1 prohibits such flashing. Design systems should include guidelines preventing dangerous flash rates.

Key Considerations

• Implement prefers-reduced-motion media query for all animations
• Provide pause controls for auto-playing content
• Avoid content that flashes more than three times per second
• Reduce parallax and motion effects for reduced-motion users
• Consider animation purpose: essential feedback versus decoration
• Test interfaces with reduced motion preference enabled
• Document motion guidelines in design system documentation

Common Questions

What should reduced motion alternatives look like?

Reduced motion alternatives typically involve instant transitions rather than animated ones. Elements appear and disappear rather than sliding or fading. Scroll-based effects become static. The content and functionality remain identical; only the motion changes.

Some motion can be reduced rather than eliminated. A long fade can become a short fade. A bouncing animation can become a single subtle movement. The goal is accommodating sensitivity while maintaining usability cues.

Are all animations problematic for motion-sensitive users?

Not all animations trigger symptoms equally. Large-scale motion (parallax scrolling, elements moving across the screen) tends to be more problematic than subtle effects (color changes, small icon animations).

The prefers-reduced-motion query indicates user preference for caution. Reducing or eliminating most motion respects this preference. Users can override if specific animations do not bother them.

How do motion tokens work in design systems?

Motion tokens define animation properties (duration, easing, delay) as reusable values. For reduced motion, design systems can provide alternative token sets with zero or minimal durations:

Components reference motion tokens, automatically adapting to user preferences through token values.

Summary

Motion accessibility respects user preferences through the prefers-reduced-motion media query, provides pause controls for auto-playing content, and avoids dangerous flashing. Design systems encode these patterns into motion tokens and component behavior to ensure accessible motion throughout applications.