accessibility-issues

无障碍问题

运用迪士尼原则，让动画更具包容性。

问题迹象

• 用户反映晕动症
• 触发前庭障碍
• 让屏幕阅读器感到困惑
• 造成认知超载
• 存在癫痫风险（闪烁）
• 动画过程中键盘焦点丢失

按原则诊断

挤压与拉伸

问题：过度变形会造成迷失方向
修复：对于启用了 prefers-reduced-motion 的用户，减少或取消挤压与拉伸效果。改用不透明度变化。

次要动作

问题：移动元素过多
修复：一次只显示一个动画元素。次要动作应尽量轻微或移除。

夸张

问题：大幅度运动会触发前庭反应
修复：减少缩放、旋转和位置变化。让动作幅度小且可预测。

时间

问题：动画过快或过慢
修复：采用一致、可预测的时长。避免突然改变速度。

弧线

问题：曲线运动路径会增加追踪难度
修复：关键 UI 使用线性运动。弧线仅用于可选的装饰元素。

快速修复

1. 遵循 prefers-reduced-motion - 始终检查并尊重这一设置
2. 不自动播放动画 - 让用户自行触发动作
3. 确保焦点清晰可见 - 绝不要让焦点指示器在动画中消失
4. 播报变化 - 对动态内容使用 ARIA 实时区域
5. 提供暂停控件 - 适用于所有循环动画

故障排查清单

• 动画是否遵循 prefers-reduced-motion？
• 是否可以暂停或停止动画？
• 状态变化是否会播报给屏幕阅读器？
• 键盘焦点是否始终可见且符合逻辑？
• 闪烁频率是否低于每秒 3 次？
• 用户能否在没有动画的情况下完成任务？
• 动画是否由用户操作触发（而非自动播放）？
• 启用屏幕阅读器进行测试

代码模式

@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;