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

1. •Respect prefers-reduced-motion - Always check and honor
2. •No autoplay animation - Let users trigger motion
3. •Keep focus visible - Never animate focus indicator away
4. •Announce changes - Use ARIA live regions for dynamic content
5. •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;