Back to Details

accessibility-issues

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
问题：过度变形导致用户迷失方向 修复：为开启
prefers-reduced-motion
的用户减少或取消挤压与拉伸效果，改用透明度变化替代。

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.
问题：曲线路径导致追踪困难 修复：核心UI使用线性运动，弧线仅用于可选装饰元素。

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
  1. 尊重
    prefers-reduced-motion
    设置     - 始终检查并遵循用户的该偏好
  2. 禁止自动播放动画 - 让用户触发动画
  3. 保持焦点可见 - 切勿将焦点指示器动画隐藏
  4. 主动通知变化 - 对动态内容使用ARIA实时区域
  5. 提供暂停控制 - 针对所有循环动画

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
  • 动画是否尊重
    prefers-reduced-motion
    设置？
  • 是否提供暂停/停止动画的方式？
  • 状态变化是否会向屏幕阅读器播报？
  • 键盘焦点是否保持可见且逻辑清晰？
  • 闪烁频率是否低于每秒3次？
  • 用户能否在无动画的情况下完成任务？
  • 动画是否由用户操作触发（而非自动播放）？
  • 已启用屏幕阅读器进行测试

Code Pattern

代码示例

css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
js
// Check preference in JS
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
js
// Check preference in JS
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;