设计可访问动画时：用 reduced-motion 与…

在 UI 动画、过渡和自动播放内容中，为运动敏感、前庭障碍、认知障碍和屏幕阅读器用户提供可禁用、可替代、可预测的动效设计。

适用场景

解决思路

1. Squash and Stretch：提供 reduced-motion 替代方案，用静态状态变化替代弹性运动。
2. Squash and Stretch：将拉伸失真控制在 <10%。
3. Squash and Stretch：为 prefers-reduced-motion 提供即时状态切换。
4. Anticipation：通过 ARIA live regions 宣布即将发生的变化。
5. Anticipation：为视觉预期提供等效音频提示。
6. Staging：将运动分层与 color contrast、size 和 ARIA landmarks 结合。
7. Staging：让焦点管理跟随视觉分层。
8. Staging：不要让运动分层成为重要性的唯一指示。
9. Straight Ahead vs Pose to Pose：功能型动画默认使用 pose to pose。
10. Straight Ahead vs Pose to Pose：将 straight ahead 仅保留给可关闭的装饰性内容。
11. Follow Through and Overlapping Action：在 reduced-motion 模式下减少或移除 follow-through。
12. Follow Through and Overlapping Action：把关键信息放在主动画中，不要只放在次级动画中。
13. Slow In and Slow Out：使用 easing，但将时长保持短，200-300ms。
14. Slow In and Slow Out：在 reduced-motion 模式下用 crossfade 替代位置动画。
15. Arc：在 reduced-motion 模式下，用直接过渡或简单 fade 替代弧形路径。
16. Secondary Action：在 reduced-motion 模式下优先移除次级动作。
17. Secondary Action：关键信息绝不能只存在于次级动作中。
18. Secondary Action：让装饰性运动可控制。
19. Timing：大多数 UI 动画使用 200-500ms。
20. Timing：避免超过 5 秒且无用户控制的运动。
21. Timing：为自动播放内容提供 pause、stop、hide。
22. Exaggeration：在可访问模式下最小化或不使用夸张。
23. Exaggeration：用单个稳定关键帧替代 overshoot。
24. Solid Drawing：让元素从一致的原点移动。
25. Solid Drawing：在动画过程中保持空间关系。
26. Appeal：先为 reduced-motion 设计，再用动画增强。
27. Appeal：通过 color、typography、layout 体现吸引力，而不只靠 animation。
28. 满足 WCAG 2.2.2：对移动内容提供 pause、stop、hide。
29. 满足 WCAG 2.3.1：确保内容闪烁不超过每秒 3 次。
30. 满足 WCAG 2.3.3：确保来自交互的动画可以被禁用。
31. 使用 CSS 媒体查询实现 reduced-motion 全局降级：@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
32. 使用屏幕阅读器测试，因为动画时序会影响公告。
33. 为仅靠动画传达的信息提供替代内容。
34. 为所有自动播放动画提供用户控制。
35. 为设计系统记录前庭风险等级。

适用边界 · 注意事项

• 不适用于完全不包含动画、过渡或自动播放内容的静态界面。
• 不适用于必须依赖高频闪烁或不可禁用动画传达关键信息，且无法提供替代内容或用户控制的场景；这类设计应先重做。