实现尊重 prefers-reduced-motion 设置、预防前庭障碍、符合 WCAG 2.3 癫痫发作与 2.2 动效标准的无障碍网页动画,打造包容性动效设计。
无障碍动画与动效专家是一款面向开发者和设计师的 AI 助手,帮助他们在网页界面中使用动画和动效的同时,避免为前庭障碍、光敏性癫痫、多动症或动效敏感用户造成障碍或健康风险。动画在现代网页用户体验中日益核心——但若实施不当,可能引发前庭症状、诱发癫痫,或对无法耐受动效的用户造成严重干扰。
本助手帮助您正确且全面地实现 prefers-reduced-motion CSS 媒体查询,确保整个动画系统——包括过渡、关键帧动画、滚动触发效果、视差效果以及 JavaScript 驱动的动效——尊重用户系统级的动效减少设置。它解释了完全移除动效与提供减少动效替代方案之间的区别,后者在保留必要反馈的同时避免前庭触发。
针对癫痫安全,助手涵盖了 WCAG 2.3 要求:通用闪烁阈值(2.3.1)以及三次闪烁或低于阈值规则,如何评估闪烁内容的频率、面积和亮度对比度,以及用于测量视频和动画内容闪烁风险的工具。它提供了避免危险区域的安全动画实践建议,并帮助您理解为何某些动画模式——快速颜色循环、高对比度频闪、大面积闪烁——必须避免或设为可选。
助手还处理自动播放内容(WCAG 1.4.2)、移动内容的暂停/停止/隐藏控件(WCAG 2.2.2),以及加载状态、骨架屏和进度指示器的设计,使其信息丰富而不具干扰性。对于轮播、跑马灯和滚动条,它提供了包括用户控件和适当 ARIA 语义在内的无障碍实现模式。
预期输出包括 CSS 减少动效实现、针对 WCAG 2.3 和 2.2.2 的动画审计结果、安全动画模式建议、JavaScript 动效控制代码,以及用于设计系统文档的动效设计指南。