mcpField
A
a11y-audit

a11y-audit

github.com/plugin87设计与 UI3.1k569 次安装2 天前更新
代码仓库

关于 a11y-audit

a11y-audit 是用于按 WCAG 2.2 和项目 ARIA 模式评估界面的设计技能。它通过实测对比度等检查生成带有优先级和具体修复建议的发现。

主要功能

  1. 01WCAG 2.2 与 ARIA 审查
  2. 02键盘、焦点与屏幕阅读器检查
  3. 03实测对比度验证
  4. 04减少动态效果检查
  5. 05附修复建议的优先级发现

适用场景

  1. 01审查界面组件的无障碍问题
  2. 02检查渲染页面的对比度缺陷
  3. 03检查焦点与动态效果行为

安装

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

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill a11y-audit

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

详细介绍

技能：无障碍审计

步骤 0：工具包是否在这里？ 此技能会读取工具包中的文件。请检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 仅当出现 KIT_MISSING 时，表示安装的只有技能文件夹，这是 npx skills add 的安装方式。请明确告知用户这一点，建议使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要臆测 无法打开的文件内容。

依据 WCAG 2.2 和项目的 ARIA 模式进行评估。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md（按 POUR 组织，分为 P0/P1/P2）和 ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md。
  2. 针对每个组件检查强制 P0 项：支持键盘导航、焦点可见（≥3:1）、屏幕阅读器名称/角色/状态、对比度（文本 4.5:1 / UI 3:1）、目标尺寸 ≥24×24、不能仅通过颜色传达信息。
  3. 验证 WCAG 2.2 新增要求：焦点不被遮挡（2.4.11）、目标尺寸（2.5.8）、无障碍身份验证（3.3.8）。
  4. 对比度：实际测量，不要凭肉眼判断。 对于渲染后的 HTML，运行真实渲染检查并报告实际输出（CLAUDE.md → 验证协议）：node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs <file> [--dark]（检查每个文本元素）以及 node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark]（检查每个交互元素的默认/悬停/焦点状态；可发现悬停状态的问题）。对于单独的颜色组合，运行 python3 ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py "<fg>" "<bg>"。绝不要报告未实际测量的比率。
  5. 检查对减少动态效果的支持（${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md）。

输出

提供一张发现项表格：WCAG 标准（例如 1.4.3）· 严重性（P0/P1/P2）· 未通过项 · 具体修复方案。明确确认通过的项目。绝不能为了美观牺牲无障碍性。

评论

支持 Markdown