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;