SuperAPI AI 工具集

reduced-motion

前端与建站

查看项目

更新于 10-16 05:29

技能介绍

用途

该技能用于在审查已渲染的 HTML、交互组件或设计系统模式时,检查其是否尊重用户的“减少动态效果”(reduced motion)偏好。动画可能触发前庭功能障碍、偏头痛和癫痫发作,尊重动态偏好可以让网站对数百万受影响的用户可用。

主要能力

  • 检查动画是否遵循 prefers-reduced-motion 媒体查询。
  • 检查内容是否每秒闪烁超过 3 次(存在癫痫发作风险)。
  • 检查视差(parallax)和滚动劫持(scrolljacking)效果是否提供替代方案。
  • 检查动画过多的页面是否在进入前显示动态警告。
  • 提供代码审查:审查影响“尊重减少动态偏好”的已渲染标记和交互状态,标出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何通过浏览器无障碍工具或辅助技术验证修复。

使用方式

快速参考:

  • 使用 prefers-reduced-motion 媒体查询禁用非必要动画。
  • 绝不让内容每秒闪烁超过 3 次(癫痫风险)。
  • 启用减少动态效果时,用不透明度/颜色过渡替代运动。
  • 提供用户控件以暂停或禁用动画。

修复方式:

  • 使用 @media (prefers-reduced-motion: reduce) 禁用动画。
  • 确保闪烁不超过每秒 3 次。
  • 避免静态文字背后的运动。
  • 为沉浸式体验提供动态警告。

完整实现细节、代码示例和框架特定指南见 references/rule.md。规则页面:https://frontendchecklist.io/rules/accessibility/reduced-motion

适用场景

适用于前端无障碍审查,尤其是涉及动画、过渡、视差滚动、滚动劫持和沉浸式体验的页面与组件。

限制

资料未提供具体的框架实现代码、安装命令或收费信息。