Accessibility Issues
Make animations inclusive using Disney's principles thoughtfully.
Problem Indicators
- Motion sickness complaints
- Vestibular disorder triggers
- Screen reader confusion
- Cognitive overload
- Seizure risk (flashing)
- Keyboard focus lost during animation
Diagnosis by Principle
Squash and Stretch
Issue: Excessive distortion causes disorientation Fix: Reduce or eliminate squash/stretch for users with prefers-reduced-motion. Use opacity changes instead.
Secondary Action
Issue: Too many moving elements Fix: Limit to one animated element at a time. Secondary actions should be subtle or removed.
Exaggeration
Issue: Dramatic motion triggers vestibular responses Fix: Reduce scale, rotation, and position changes. Keep movements small and predictable.
Timing
Issue: Animations too fast or too slow Fix: Provide consistent, predictable timing. Avoid sudden speed changes.
Arcs
Issue: Curved motion paths cause tracking difficulty Fix: Use linear motion for essential UI. Save arcs for optional decorative elements.
Quick Fixes
- Respect
prefers-reduced-motion- Always check and honor - No autoplay animation - Let users trigger motion
- Keep focus visible - Never animate focus indicator away
- Announce changes - Use ARIA live regions for dynamic content
- Provide pause controls - For any looping animation
Troubleshooting Checklist
- Does animation respect
prefers-reduced-motion? - Is there a way to pause/stop animations?
- Are state changes announced to screen readers?
- Does keyboard focus remain visible and logical?
- Is flash rate under 3 per second?
- Can users complete tasks without animation?
- Are animations triggered by user action (not autoplay)?
- Test with screen reader enabled
Code Pattern
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}// Check preference in JS
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;