Animations
| Severity | Critical |
|---|---|
| Accessibility Principle | Operable |
| Affected users | Cognitive |
| Success criterion | 2.3.3 |
Some people are sensitive to motion — animations can cause dizziness, nausea, or distraction for users with vestibular disorders, attention differences, or epilepsy. React Native exposes a system-level "Reduce Motion" setting that lets users opt out of non-essential animations. Your app should respect it.
Expectations
- When: The user enables the Reduce Motion option
- Then: Non essential1 animations should be disabled
- When: An animation plays
- Then: The Screen Reader does not announce the animation itself — only content changes triggered by the animation are announced, if accessibility events are correctly wired
- When: An animation plays
- Then: Animations do not affect voice command recognition — elements remain targetable by their labels during and after animation
Example
- GIFs and Videos: Autoplay should be disabled to prevent unexpected distractions and potential issues for users with certain disabilities
- Navigation Motion: Any motion involved in navigation should be disabled
- Interaction-Triggered Motion: Should be disabled, unless essential1
Best Practices
Always check the Reduce Motion setting before animating
Use AMA's useAnimationDuration hook or the platform's AccessibilityInfo.isReduceMotionEnabled to check the user's preference before starting an animation.
import { useAnimationDuration } from '@react-native-ama/animations';
const duration = useAnimationDuration({ duration: 300 });
// Returns 0 when Reduce Motion is enabled, 300 otherwise
Disable autoplay for GIFs and videos
Autoplay motion can startle users and cause harm for those with vestibular disorders or photosensitive epilepsy. Always start paused and give users explicit control to play.
Keep essential animations, cut decorative ones
An animation is essential only if removing it would fundamentally change what the user understands or can do1. Decorative transitions, loading spinners, and bounce effects should all be disabled under Reduce Motion.
Use AMA components where possible
AMA's AnimatedContainer and related hooks handle the Reduce Motion check automatically. Prefer them over building custom animations that require manual isReduceMotionEnabled checks.