为何需要
视觉与前庭冲突会致晕(Bos et al., 2008)。WCAG 2.2 的2.3.3。像深色模式一样遵循系统设置。
实现
使用prefers-reduced-motion(MDN, n.d.)与技术C39,检查系统设置(Apple, n.d.)。
替换而非删除
动画传达连续性(Chang & Ungar, 1993),改用淡入淡出,保留微交互(web.dev, n.d.)。
常见问题
- 要关闭所有动画吗?
- 不,减少大幅运动并改为淡入淡出。
- 如何测试?
- 开启设置后浏览主要页面。
来源核查日期:2026-10-27
参考文献
- MDN Web Docs. (n.d.). prefers-reduced-motion. 读取系统设置的媒体查询。
- Apple. (n.d.). Motion. Human Interface Guidelines. iOS动效指南。
- web.dev. (n.d.). prefers-reduced-motion: Sometimes less movement is more. 替代效果示例。
- W3C. (n.d.). C39: Using the CSS prefers-reduced-motion query to prevent motion. WCAG Techniques. 官方技术。
- Bos, J. E., Bles, W., & Groen, E. L. (2008). A theory on visually induced motion sickness. Displays, 29(2), 47–57. https://doi.org/10.1016/j.displa.2007.09.002 视觉诱发晕动理论。
- Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of UIST '93 (pp. 45–55). ACM. https://doi.org/10.1145/168642.168647 动画传达连续性。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 2.3.3标准。
