SuperAPI AI 工具集

anchor-smooth-scroll

前端与建站

查看项目

更新于 10-16 05:25

技能介绍

用途

该技能用于审查前端页面中与「提供即时锚点滚动选项」相关的实现,属于无障碍(accessibility)检查规则。它针对的是页面内锚点导航(same-page navigation)的滚动行为,目标是避免平滑滚动动画对特定用户群体造成不适。

主要能力

  • 检查点击锚点链接时,在 prefers-reduced-motion 生效的情况下,平滑滚动是否被禁用。
  • 检查是否仅在 prefers-reduced-motion 媒体查询内使用 CSS scroll-behavior: smooth。
  • 检查锚点导航在键盘和屏幕阅读器下是否正常工作。
  • 检查键盘用户触发锚点跳转后,焦点是否移动到锚点目标位置。
  • 审查已渲染的 HTML、交互组件或设计系统模式,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互。
  • 说明如何通过浏览器无障碍工具或辅助技术验证修复效果。

使用方式

该技能以规则检查的形式使用,包含 Check、Fix、Explain、Code Review 等环节:

  • Check:点击锚点链接(页面内导航),验证在 prefers-reduced-motion 设置下平滑滚动是否被禁用;确认锚点导航在键盘和屏幕阅读器下工作正常。
  • Fix:仅在 prefers-reduced-motion 媒体查询检查内使用 scroll-behavior: smooth;将即时滚动作为默认或 reduced-motion 降级方案;确保焦点移动到锚点目标。
  • Explain:解释动画滚动过渡为何会对前庭功能障碍用户造成晕动症和方向感混乱,以及为何即时导航在无障碍方面通常更可取。
  • Code Review:审查影响该规则的已渲染标记和交互状态,标记违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何用浏览器无障碍工具或辅助技术验证修复。

完整实现细节、代码示例和框架相关指导见 references/rule.md。规则页面:https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll

适用场景

适用于审查已渲染的 HTML、交互组件或设计系统模式中与锚点滚动相关的无障碍实现,尤其是涉及页面内导航、平滑滚动动画和 reduced-motion 偏好处理的场景。

限制

资料未提供该技能的具体安装命令、支持的框架清单、运行环境要求或收费信息,这些内容暂未提供。