跳转到使用指南
accessibility-review作者 Anthropic

Accessibility Review Skill.

Claude Code 和 Codex 的设计审查 skill:对设计或页面进行 WCAG 2.1 AA 审计,检查对比度、键盘操作、触控目标。

  • Design Review & Accessibility
  • 审查报告
anthropics/knowledge-work-plugins · design/skills/accessibility-review/SKILL.mdSKILL.md
--- name: accessibility-review description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff. --- ## Usage ## Testing Approach ## Output ## Accessibility Audit: [Design/Page Name] ## If Connectors Available ## Tips
正文和章节标题读取自 2026-09-14 的上游文件 · 完整 4,248 字符

01 功能说明

accessibility-review Skill 在 Claude Code 和 Codex 中做什么

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

一套面向设计稿或页面的 WCAG 2.1 AA 审计流程,由“audit accessibility”或“check a11y”这类说法触发,并以 Figma URL、页面 URL 或文字描述作为参数。

它内置一份精简速查表,把十一项标准归入可感知(Perceivable)、可操作(Operable)、可理解(Understandable)、健壮(Robust)四类,涵盖正文文本 4.5:1 对比度、大字号文本与 UI 组件 3:1 对比度、键盘可访问性、可见焦点以及 44x44 CSS 像素的触控目标;此外还有八个常见问题和一套五步测试方法,第一步是自动化扫描,可发现约 30% 的问题。审计结果汇总为格式固定的 markdown 报告,包含严重程度统计、按原则分列的问题表、对比度、键盘与屏幕阅读器章节,以及按优先级排序的修复建议。

它产出什么

  • 一份 Markdown 无障碍审查报告,标题为设计或页面名称,并标注 WCAG 2.1 AA 标准。
  • 问题部分拆分为可感知、可操作、可理解、健壮四张表,每张按问题、标准、严重程度、建议列出。
  • 独立成表的颜色对比度、键盘导航和屏幕阅读器表格,其中包含每个元素被播报出的名称。
  • 一份按优先级排序的修复清单,把阻断用户的关键修复与锦上添花的小改进分开。
查看示例提示词 ↗

工作方式

  1. 01
    传入要审计的对象

    该命令以 Figma URL、页面 URL 或文字描述作为参数,并审计这一目标。

  2. 02
    核对十一项 AA 标准

    速查表把标准归入可感知、可操作、可理解、健壮四类,每项都标注成功标准编号与阈值。

  3. 03
    跑完五轮测试

    依次为自动化扫描、纯键盘导航、屏幕阅读器测试、对比度核验和 200% 缩放。

  4. 04
    按固定的报告形态撰写

    一份 markdown 报告,含严重程度汇总、每条原则一张问题表,以及独立的对比度、键盘和屏幕阅读器表格。

  5. 05
    有连接器时就接上

    接入设计工具后,它会从 Figma 读取颜色值、字号和触控目标;接入项目跟踪工具后,它会为每条问题单独建单。

02 找到适合场景

何时使用 accessibility-review Skill

当工作是这类设计审查时,在 Claude Code 或 Codex 中使用 accessibility-review 技能。下面的适用场景和限制取自该技能自己的文件。

适合场景

  • 在交付前审查设计稿的颜色对比度、键盘导航、触控目标尺寸或屏幕阅读器表现。
  • 审计已完成的页面,前提是你能给它一个 URL。
  • 连接设计工具后,直接从 Figma 文件里读取颜色值、字号和触控目标尺寸。
  • 把审计变成可追踪的工作:为每条发现创建工单,并关联到已有的修复 epic。

了解边界

  • 把审计当成完整覆盖:自动化扫描会漏掉大部分问题,仍然需要真实的辅助技术测试。

需要提供的信息

  • 设计稿或页面引用本身它作为第一个参数代入审计指令。

03 Skill 内部

accessibility-review skill 为 Claude Code 和 Codex 制定的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 要求 UI 组件达到 3:1

    依据 1.4.11,UI 组件与图形需要至少 3:1 的非文本对比度。

  2. 强制 44x44 触控目标

    按 2.5.5 准则,触控目标至少为 44x44 CSS 像素。

  3. 让所有内容都能通过键盘访问

    所有功能都必须可用键盘操作(2.1.1),并有可见的焦点指示(2.4.7)。

  4. 以 200% 缩放判定通过或失败

    在 200% 缩放下测试布局,若发生破裂即标记。

  5. 每条发现都对应到具体准则

    发现表格的每一行都列出 WCAG 准则,并同时给出问题、严重程度和建议。

  6. 严重程度分为 Critical、Major 或 Minor

    每条发现都会标注三档严重程度之一,在建议列中以彩色标记显示。

  7. 从对比度和键盘开始

    该 skill 默认先检查对比度和键盘,因为它们能发现最常见、影响最大的问题。

04 投入使用

在 Claude Code 或 Codex 中安装 accessibility-review

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 accessibility-review 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

用于 design/skills/accessibility-review/SKILL.md 的通用 skills CLI 写法;该仓库可能记录了自己的路径。

为 Skill 提供第一个设计审查任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Audit accessibility for [Figma URL for the checkout flow] before we hand it to engineering. Start with contrast and keyboard access, and flag anything that would block a screen reader user as critical.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 仅用键盘浏览整页。
  • 用 VoiceOver 或 NVDA 测试,而不是只依赖审计。
  • 对照要求值核实实际的对比度。
  • 按顺序处理优先修复项,先解决阻塞性问题,再做打磨。

在 OpenDesign 中通过 accessibility-review 的 SKILL.md 链接导入:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Anthropic
Skill 文件
design/skills/accessibility-review/SKILL.md 验证时已记录内容校验和;提交 8f877b6
License
Apache-2.0 来自 LICENSE。
仓库星标数
24,012 GitHub 快照拍摄于 2026-09-14,针对整个 anthropics/knowledge-work-plugins 仓库,该仓库在此目录中包含 7 个 skills。这不是 accessibility-review 的评分或使用量。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 用法展示命令形式,以及参数如何被代入审计指令。
  2. WCAG 2.1 AA 快速参考十一个标准项,分列于可感知、可操作、可理解和健壮之下,并附有阈值。
  3. 常见问题八类反复出现的失效点,从对比度和表单标签到焦点陷阱与时间限制。
  4. 测试方法五轮检查:自动化扫描、键盘、屏幕阅读器、对比度、200% 缩放。
  5. 输出报告模板,包含严重程度汇总、原则表格、对比度行以及优先修复项。
  6. 如果连接了 Connectors连接设计工具或项目跟踪工具后会有哪些变化。
  7. 提示从对比度和键盘开始,用真实的辅助技术测试,按影响程度排优先级。
Skill 自身的描述
"对设计或页面运行 WCAG 2.1 AA 可访问性审查。使用「审查可访问性」、「检查 a11y」、「这个无障碍吗?」触发,或在交付前审查设计的颜色对比度、键盘导航、触摸目标大小或屏幕阅读器行为时使用。"

来自 SKILL.md 的 front-matter 描述。完整文件约 4,248 个字符。在 GitHub 上阅读完整文件。

Accessibility Review

在真实设计审查任务上运行 accessibility-review。

下载 OpenDesign,从其 SKILL.md 链接导入 accessibility-review,粘贴上面的提示词,在查看结果之前先阅读计划。

终端
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows