关于 compliance-mapping
帮助设计团队将设计决策对应到无障碍标准的技能，适用于设计评审和审计准备。它提供 WCAG 2.2 AA 及相关法律框架的映射，便于在实现前发现潜在不符合项。
主要功能
- 01将视觉设计决策映射到 WCAG
- 02将交互决策映射到 WCAG
- 03将内容结构决策映射到 WCAG
- 04将动画与时限决策映射到 WCAG
- 05提供设计检查与审计准备方法
适用场景
- 01设计定稿前检查相关 WCAG 标准
- 02评审设计并标记潜在符合性问题
- 03制定产品专用的预审计清单
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/compliance-mapping确认已加载。
详细介绍
合规映射
将设计决策映射到具体的无障碍标准，让团队清楚了解当前状况——哪些方面已覆盖、哪些尚未覆盖，以及哪些存在风险。
设计师为何需要了解
合规映射通常被视为工程审计任务。但大多数符合性问题都源于编写代码之前做出的设计决策。了解自己的决策会影响哪些标准的设计师，能够防患于未然，而不是等问题出现后才发现。
主要标准
WCAG 2.2 AA 级
全球基准。大多数法律都引用该标准。
- A 级：最低要求（29 项标准）
- AA 级：标准目标（额外 20 项标准）
- AAA 级：理想目标（额外 28 项标准）
大多数组织以 AA 级为目标。即使 AAA 级中的部分标准并非强制要求，也值得采用（尤其是认知无障碍标准）。
法律框架
- ADA（美国）： 要求数字服务具备无障碍性，法院引用 WCAG 2.1 AA
- EAA（欧盟）：《欧洲无障碍法案》，于 2025 年 6 月生效，引用与 WCAG 2.1 AA 一致的 EN 301 549
- Section 508（美国政府）： 引用 WCAG 2.0 AA，预计将进行更新
- EN 301 549（欧盟）： EAA 背后的技术标准，与 WCAG 2.1 AA 一致，并对软件、硬件和文档提出额外要求
设计决策与 WCAG 的映射
色彩与视觉设计
| 设计决策 | WCAG 标准 |
|---|---|
| 文本对比度 | 1.4.3 对比度（最低）AA |
| 非文本对比度 | 1.4.11 非文本对比度 AA |
| 不单独依靠颜色传达信息 | 1.4.1 颜色的使用 A |
| 文本可放大至 200% | 1.4.4 调整文本大小 AA |
| 缩放时内容重新排布 | 1.4.10 重新排布 AA |
| 覆盖文本间距 | 1.4.12 文本间距 AA |
交互设计
| 设计决策 | WCAG 标准 |
|---|---|
| 可通过键盘操作 | 2.1.1 键盘 A |
| 无键盘陷阱 | 2.1.2 无键盘陷阱 A |
| 焦点可见 | 2.4.7 焦点可见 AA |
| 焦点顺序合理 | 2.4.3 焦点顺序 A |
| 触控目标尺寸 | 2.5.8 目标尺寸（最低）AA |
| 不仅限于运动输入 | 2.5.4 运动触发 A |
| 手势操作的替代方式 | 2.5.1 指针手势 A |
内容与结构
| 设计决策 | WCAG 标准 |
|---|---|
| 页面标题 | 2.4.2 页面标题 A |
| 标题层级 | 1.3.1 信息与关系 A |
| 链接用途明确 | 2.4.4 链接用途（上下文）A |
| 设置页面语言 | 3.1.1 页面语言 A |
| 导航保持一致 | 3.2.3 一致的导航 AA |
| 错误识别 | 3.3.1 错误识别 A |
| 输入项带有标签 | 3.3.2 标签或说明 A |
动画与计时
| 设计决策 | WCAG 标准 |
|---|---|
| 可暂停／停止／隐藏动画 | 2.2.2 暂停、停止、隐藏 A |
| 无闪烁内容 | 2.3.1 三次闪烁 A |
| 可调整计时 | 2.2.1 可调整计时 A |
| 交互触发的动画 | 2.3.3 交互触发的动画 AAA |
如何使用
设计期间
确定设计决策之前，先检查它会影响哪些 WCAG 标准。这样可以在修复成本最低的阶段发现问题。
评审期间
根据相关标准表检查设计。标记所有可能导致不符合标准的决策。
准备审计时
使用映射表创建适用于自己产品的审计前检查清单。这样审计人员就能准确了解哪些决策对应哪些标准。
评估问题
- 团队能否将关键设计决策映射到 WCAG 标准？
- 是否存在会导致不符合标准的设计决策？
- 团队是否了解哪些法律框架适用于其产品？
- 是否有流程在实施前根据标准检查设计？
评论
支持 Markdown