Agent Skills
返回列表
前端无障碍设计助手

前端无障碍设计助手

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_1d1b34c2/accessibility-v2。

技能介绍

要解决的问题

很多前端页面在鼠标操作下可用，但对键盘用户、屏幕阅读器用户或弱视用户仍然不可用：链接和按钮没有语义、表单缺少 label 关联、动态状态没有 aria-live、焦点不可见、对比度不足。这些问题通常散落在组件细节里，人工检查容易遗漏。

技能如何工作

该技能把常见前端无障碍检查整理成可执行的审计清单：

  • 语义化 HTML：检查链接、按钮、表单、标题层级是否符合 HTML 语义。
  • 键盘导航：关注焦点顺序、焦点可见性、可访问快捷键和键盘事件处理。
  • 屏幕阅读器：核对 aria-label、aria-describedby、图像描述、实时区域等标签是否正确。
  • 视觉可访问性：检查色彩对比度、最小字体尺寸和触摸目标尺寸。

它会先定位组件类型，再按场景选择对应规则，最后输出可整改的问题点与检查项，而不是只给出笼统结论。

适用边界

它适合前端页面、Web 组件和移动端 H5 的无障碍审查；不适用于原生 App 全量系统级辅助功能适配。对于复杂 ARIA 模式，如自定义 combobox、grid、dialog，需要结合具体交互状态再人工复核。

使用场景

  • 上线前审查 Web 表单，定位缺少 `label` 关联与按钮语义的输入项。
  • 重构复杂组件时梳理焦点顺序、焦点可见性和键盘事件，避免 Tab 顺序错乱。
  • 接入屏幕阅读器后验证 ARIA 标签、图像描述和动态内容实时区域是否生效。
  • 检查页面色彩对比度、字体大小和触摸目标尺寸，确认弱视用户可辨认。

适合人员

  • 负责 Web 组件库的前端工程师，需要为弹层、下拉框补充可访问性实现。
  • 负责 H5 页面上线验收的前端负责人，需要在发布前完成无障碍检查清单。
  • 负责表单系统的前端工程师，需要定位输入控件与 `label` 关联缺失。
  • 负责无障碍体验的前端 QA，需要按键盘、屏幕阅读器、视觉维度复测页面。