accessibility-compliance作者 Seth Hobson

Accessibility Compliance Skill.

Claude Code 和 Codex 的设计审查 skill：符合 WCAG 2.2 的界面，支持移动无障碍访问和辅助技术。

Design Review & Accessibility
UI 代码

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

2026-09-14 从上游文件读取的前言和章节标题 · 完整 2,402 字符

01 功能说明

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

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

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

以 skill 自身的术语

该 skill 用于实现符合 WCAG 2.2 的界面，并支持移动端可访问性与辅助技术。它引导 Agent 完成语义化 HTML、ARIA 模式、键盘导航、焦点管理、屏幕阅读器兼容以及动态内容播报。该 skill 涵盖 iOS VoiceOver、Android TalkBack 以及桌面屏幕阅读器（NVDA、JAWS）。

它强调优先使用原生元素而非自定义 ARIA，尊重 prefers-reduced-motion、prefers-contrast 等用户偏好，并使用自动化工具（axe DevTools、WAVE、Lighthouse）与真实辅助技术进行测试。该 skill 覆盖常见违规问题，包括缺少替代文本、对比度不足、键盘陷阱以及表单输入缺少标签。

它产出什么

符合 WCAG 2.2 的界面：规范的 ARIA 模式、焦点管理与屏幕阅读器支持

查看示例提示词 ↗

工作方式

01
设计键盘优先的交互
确保所有交互组件无需鼠标即可使用，先建立键盘导航，再添加指针事件。

02 找到适合场景

何时使用 accessibility-compliance Skill

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

适合场景

为 Web 应用或网站实现 WCAG 2.2 AA 或 AAA 合规
构建可与 VoiceOver、NVDA、JAWS 或 TalkBack 配合使用的屏幕阅读器无障碍界面
为交互组件添加键盘导航与焦点管理
开展无障碍审计并修复现有界面中的违规问题
在界面中支持减少动态效果与高对比度用户偏好

03 Skill 内部

accessibility-compliance Skill 为设计审查带来什么

SKILL.md 指示 Claude Code 或 Codex 执行的 2 项操作，按文件自身的章节顺序。

最佳实践
尽可能优先使用原生元素而非 ARIA；在用户测试中包含残障人士；设计无需鼠标即可操作的交互
测试工具
axe DevTools、WAVE、Lighthouse；VoiceOver（macOS/iOS）、NVDA/JAWS（Windows）、TalkBack（Android）；NoCoffee（视觉）、Silktide（各类残障）

04 投入使用

在 Claude Code 或 Codex 中安装 accessibility-compliance

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

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

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

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

skills CLI 的通用形式，对应 plugins/ui-design/skills/accessibility-compliance/SKILL.md；仓库可能记录自己的路径。

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

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

Starter prompt

Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

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

检查首次结果

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

在 macOS 或 iOS 上用 VoiceOver 手动测试，验证屏幕阅读器的朗读与导航
使用 NoCoffee 等视觉模拟器与 Silktide 等残障模拟器测试各类障碍场景

在 OpenDesign 中通过其 SKILL.md 链接导入 accessibility-compliance：Plugins → Add → Skill → Import from link，然后在顶栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

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

Author: Seth Hobson
Repository: github.com/wshobson/agents 分支 main
Skill 文件: plugins/ui-design/skills/accessibility-compliance/SKILL.md 验证时已记录内容校验和；提交 4236bb9
License: MIT 来自 LICENSE。
仓库星标数: 39,635 GitHub 快照拍摄于 2026-09-14，针对整个 wshobson/agents 仓库，该仓库在此目录中包含 18 个 skills。不是 accessibility-compliance 的评分或使用次数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

何时使用此 skillWCAG 合规、屏幕阅读器、键盘导航、焦点管理、表单、移动端无障碍、审计
详细模式与完整示例当顶层指导不足时，指向 references/details.md 获取模式文档
最佳实践八条核心规则：语义化 HTML、真实用户测试、键盘优先、焦点样式、文字替代方案、缩放、实时区域、用户偏好
常见问题缺少替代文本、对比度不足、键盘陷阱、输入未加标签、自动播放、劣质自定义控件、跳转链接、焦点顺序
测试工具自动化工具（axe、WAVE、Lighthouse）、手动屏幕阅读器（VoiceOver、NVDA、JAWS、TalkBack）、模拟器（NoCoffee、Silktide）

Skill 自身的描述

"实现符合 WCAG 2.2 的界面，包含移动端可访问性、包容性设计模式和辅助技术支持。在审查可访问性、实现 ARIA 模式、为屏幕阅读器构建或确保包容性用户体验时使用。"

来自 SKILL.md 的前置元数据描述。完整文件约 2,402 字符。在 GitHub 上阅读完整文件。

Accessibility Compliance

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

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

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance