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;