mcpField
A
accessibility-audit

accessibility-audit

github.com/serkan-ozal测试与质量755 次安装33 周前更新
代码仓库

关于 accessibility-audit

面向处理网页的 Agent，提供无障碍审计流程，结合 ARIA 快照、AX 树分析、WCAG 检查清单和键盘导航测试发现问题。

主要功能

  1. 01生成 ARIA 快照
  2. 02按角色分析 AX 树
  3. 03检查遮挡与可见元素
  4. 04测试键盘导航
  5. 05提供 WCAG 检查清单

适用场景

  1. 01检查网页表单标签与按钮名称
  2. 02排查键盘焦点和导航问题
  3. 03审查 ARIA 角色及图像替代文本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill accessibility-audit

安装后在 Claude Code 中输入/accessibility-audit确认已加载。

详细介绍

无障碍审计技能

使用 ARIA 快照、AX 树分析和 WCAG 验证审计 Web 无障碍性。

使用时机

此技能会在以下情况下启用：

  • 用户询问无障碍性或 a11y
  • 用户提及 WCAG 合规性
  • 用户想检查屏幕阅读器兼容性
  • 用户需要审计 ARIA 角色和标签
  • 用户询问键盘导航

功能

ARIA 快照
browser-devtools-cli a11y take-aria-snapshot
browser-devtools-cli a11y take-aria-snapshot --selector ".main-content"
AX 树分析
browser-devtools-cli --json a11y take-ax-tree-snapshot
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link,textbox
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion
browser-devtools-cli --json a11y take-ax-tree-snapshot --only-visible
键盘导航测试
browser-devtools-cli interaction press-key --key "Tab"
browser-devtools-cli interaction press-key --key "Tab" --selector "body"
browser-devtools-cli interaction press-key --key "Enter"
browser-devtools-cli interaction press-key --key "Escape"

WCAG 检查清单

可感知性
  • 图片具有替代文本
  • 视频具有字幕
  • 颜色不是唯一的指示方式
  • 文本具有足够的对比度
可操作性
  • 所有功能都可通过键盘使用
  • 没有键盘陷阱
  • 提供跳过链接
  • 焦点可见
可理解性
  • 指定语言
  • 表单输入框具有标签
  • 错误消息清晰
  • 导航一致
稳健性
  • HTML 有效
  • 正确使用 ARIA
  • 可与辅助技术配合使用

审计工作流

SESSION="--session-id a11y-audit"

# 1. Navigate to page
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 2. Get ARIA snapshot (quick overview, returns refs e1,e2,...)
browser-devtools-cli $SESSION a11y take-aria-snapshot

# Optional: include custom clickable elements (div/span with cursor:pointer)
browser-devtools-cli $SESSION a11y take-aria-snapshot --cursor-interactive

# 3. Get detailed AX tree
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
  --roles button,link,textbox,checkbox,radio,combobox

# 4. Check for interactive elements with occlusion
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
  --roles button,link \
  --check-occlusion

# 5. Test keyboard navigation
browser-devtools-cli $SESSION interaction press-key --key "Tab"
browser-devtools-cli $SESSION content take-screenshot --name "first-focus"

# 6. Cleanup
browser-devtools-cli session delete a11y-audit

常见问题

缺少替代文本
# Check images in AX tree
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles image
缺少表单标签
# Check form elements
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles textbox,checkbox,radio,combobox
空按钮／链接
# Check for buttons and links with no accessible name
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link
隐藏但可聚焦的元素
# Check for visibility issues
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion

特定审计

标题层级
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles heading
表单无障碍性
browser-devtools-cli --json a11y take-ax-tree-snapshot \
  --roles textbox,checkbox,radio,combobox,button
导航元素
browser-devtools-cli --json a11y take-ax-tree-snapshot \
  --roles navigation,link,menu,menuitem
交互元素
browser-devtools-cli --json a11y take-ax-tree-snapshot \
  --roles button,link,tab,switch,slider

最佳实践

  1. 始终先使用 ARIA 快照，快速了解概况
  2. 使用 AX 树并检查遮挡情况，排查布局问题
  3. 按角色筛选，聚焦交互元素
  4. 检查可见和隐藏元素
  5. 报告前仅使用键盘进行测试
  6. 截图记录焦点状态
  7. 在不同视口尺寸下测试响应式 a11y

评论

支持 Markdown