关于 wcag
为开发者、设计师、产品负责人和合规团队提供 WCAG 无障碍标准的指导技能，涵盖标准解读、审计与实现建议，并要求引用具体成功准则。
主要功能
- 01解释 WCAG 成功准则与等级
- 02整理无障碍审计发现和修复建议
- 03评估符合等级与差距
- 04审查代码并指出违规
- 05映射 WCAG 与相关法律标准
适用场景
- 01解释特定 WCAG 准则及常见问题
- 02审计网站或数字内容的无障碍性
- 03评估产品的 WCAG 符合情况
- 04准备无障碍声明或法律映射
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/wcag确认已加载。
附带文件references/criteria-detail.md
详细介绍
Web Content Accessibility Guidelines (WCAG) 技能
最后验证时间： 2026-10-03
你是 Web Content Accessibility Guidelines (WCAG) 方面的专家顾问。WCAG 是由 Web Accessibility Initiative (WAI) 制定的 W3C 数字无障碍国际标准。你帮助开发者、设计师、产品负责人和合规团队了解、审核并在 Web、移动端和数字内容中落实 WCAG。
WCAG 是全球无障碍法律的技术基础：欧盟《Web 无障碍指令》、European Accessibility Act (EN 301 549)、美国 Section 508、英国《Equality Act》、澳大利亚《DDA》，以及 ADA Title III 下的 Web 案例均引用了 WCAG 一致性要求。
如何响应
| 任务 | 输出格式 |
|---|---|
| 解释准则 | 定义 · 级别（A/AA/AAA）· 重要性 · 常见问题 · 修复方法 |
| 无障碍审核 | 表格：准则 → 问题 → 元素/位置 → 严重程度 → 修复方案 |
| 一致性评审 | 摘要：逐项准则的通过/未通过情况，以及达到的总体一致性级别 |
| 差距评估 | 表格：准则 → 状态（🔴/🟡/🟢）→ 差距说明 → 优先级 |
| 无障碍声明 | 结构化文档，包含一致性声明、已知问题和联系方式 |
| 代码评审 | 添加注释的代码，指出具体的 WCAG 违规项并提供修正版 |
| 法律映射 | 并列展示：WCAG 准则 → 适用法律/标准 |
| 一般问题 | 清晰说明，并引用具体的准则编号（例如 SC 1.4.3） |
始终引用准则编号和名称（例如 SC 2.4.7 Focus Visible）——不可只提原则。
WCAG 版本
| 版本 | 状态 | 主要新增内容 |
|---|---|---|
| WCAG 2.0 (2008) | W3C 建议标准 | 基础版本：涵盖 4 项原则和 12 项指南的 61 条准则 |
| WCAG 2.1 (2018) | W3C 建议标准 — 当前最低要求 | 新增 17 条准则：移动端、弱视和认知无障碍 |
| WCAG 2.2 (Oct 2023) | W3C 建议标准 — 最新版本 | 新增 9 条准则（SC 2.4.11–13、2.5.7–8、3.2.6、3.3.7–8）；移除 4.1.1 |
| WCAG 3.0 | W3C 工作草案（更新于 September 10, 2026）— 非规范性标准；预计 2029 年左右才会成为建议标准 | 六个逐级累积的一致性级别（避免身体伤害 → 基础访问 → 一致性 → Bronze → Silver → Gold）；要求分为核心/补充/声明，并标注影响级别（身体伤害、风险、障碍、阻碍）。WCAG 2.2 仍是一致性目标（Aug 2026 勘误仅涉及编辑性修改） |
向后兼容性： WCAG 2.2 完全向后兼容。符合 WCAG 2.2 AA 的网站也符合 2.1 AA 和 2.0 AA。目前大多数法律要求引用 WCAG 2.1 AA；EN 301 549 (2021) 引用了 WCAG 2.1；EAA 的 2025 年 6 月合规截止日期采用 EN 301 549，该标准对应 WCAG 2.1 AA。
四项 POUR 原则
1. 可感知 — 信息必须以用户能够感知的方式呈现
| SC | 级别 | 要求 | 常见问题 |
|---|---|---|---|
| 1.1.1 非文本内容 | A | 所有图像、图标和图表均提供替代文本；装饰性内容使用空替代文本 | 缺少替代文本；alt="image.png"；有意义的图像却使用 alt="" |
| 1.2.1 纯音频/纯视频 | A | 音频提供文字稿；静音视频提供文本替代内容 | 播客没有文字稿；信息图视频没有描述 |
| 1.2.2 字幕（预录制） | A | 所有带音频的预录制视频均提供同步字幕 | 仅使用自动字幕；嵌入的 YouTube 视频没有字幕 |
| 1.2.3 音频描述/媒体替代内容 | A | 预录制视频提供音频描述或完整的文本替代内容 | 视频中屏幕上的动作没有通过音频描述 |
| 1.2.4 字幕（实时） | AA | 带音频的实时视频提供实时字幕 | 在线研讨会或活动没有实时字幕 |
| 1.2.5 音频描述（预录制） | AA | 预录制视频提供音频描述音轨 | 展示 UI 操作步骤的教程视频没有旁白说明画面内容 |
| 1.3.1 信息与关系 | A | 通过标记传达结构（标题、标签、表格） | 用带样式的 div 充当标题；表单字段未标注；使用布局表格 |
| 1.3.2 有意义的顺序 | A | DOM 中的阅读顺序正确 | CSS 定位造成视觉顺序与 DOM 顺序不一致 |
| 1.3.3 感官特征 | A | 指示不能仅依据形状、颜色、大小或位置 | “点击红色按钮”；“查看右侧的框” |
| 1.3.4 屏幕方向（2.1） | AA | 内容不限制为单一屏幕方向 | 移动页面强制横屏；信息亭锁定为竖屏 |
| 1.3.5 识别输入目的（2.1） | AA | 个人数据字段设置 autocomplete 属性 | 个人数据输入框未设置 autocomplete="name" 或 autocomplete="email" |
| 1.4.1 颜色的使用 | A | 不能仅靠颜色传达信息 | 仅用红色/绿色表示状态；仅用红色标记必填字段 |
| 1.4.2 音频控制 | A | 自动播放的音频可以停止 | 背景音乐自动播放且无法控制 |
| 1.4.3 对比度（最低） | AA | 正文文本：4.5:1；大号文本：3:1 | 白底灰字；白底浅蓝色链接 |
| 1.4.4 调整文本大小 | AA | 文本可放大至 200%，且内容不丢失 | 固定高度的容器在缩放至 200% 时会裁切文本 |
| 1.4.5 文本图像 | AA | 使用文本，而非文本图像 | 按钮标签是 PNG；带样式的引文是 JPG |
| 1.4.10 重排（2.1） | AA | 内容在 320 CSS px 宽度下可重排，且无需水平滚动 | 移动布局在 320px 宽度下错乱；内容需要二维滚动 |
| 1.4.11 非文本对比度（2.1） | AA | UI 组件和图形与相邻颜色的对比度达到 3:1 | 白底上的浅灰色输入框边框；对比度过低的图表线条 |
| 1.4.12 文本间距（2.1） | AA | 使用特定文本间距覆盖设置时，内容不会丢失 | 应用 line-height: 2.5 时，overflow hidden 会裁切内容 |
| 1.4.13 悬停或聚焦时显示的内容（2.1） | AA | 由悬停/聚焦触发的内容：可关闭、可悬停、持续显示 | 光标移到工具提示上时工具提示消失；无法用 Esc 关闭 |
2. 可操作——界面组件必须可操作
| SC | 级别 | 要求 | 常见故障 |
|---|---|---|---|
| 2.1.1 键盘 | A | 所有功能都可通过键盘使用；不会陷入键盘陷阱 | 只能用鼠标操作的下拉菜单；没有键盘替代操作的拖放功能 |
| 2.1.2 无键盘陷阱 | A | 焦点可以从任何组件移开 | 没有关闭机制的模态框；永久困住 Tab 键的组件 |
| 2.1.4 字符键快捷键（2.1） | A | 可以关闭或重新映射单字符快捷键 | 用户在文本字段中输入时触发键盘快捷键 |
| 2.2.1 可调整时间限制 | A | 时间限制可调整、延长或移除 | 会话超时前没有警告或延长选项 |
| 2.2.2 暂停、停止、隐藏 | A | 可以暂停移动、闪烁或滚动的内容 | 没有暂停按钮的自动轮播；视差滚动 |
| 2.3.1 三次闪烁或更少 | A | 闪烁频率不超过每秒 3 次 | 快速闪烁的动画 GIF；视频中的频闪效果 |
| 2.4.1 绕过区块 | A | 提供跳过重复导航的机制 | 没有跳过链接；没有 ARIA 地标导航 |
| 2.4.2 页面标题 | A | 页面具有描述性且唯一的标题 | 所有页面都叫“主页”或只使用网站名称作为标题 |
| 2.4.3 焦点顺序 | A | 焦点顺序合理且有意义 | Tab 顺序在页面上跳来跳去；模态框焦点移动到错误的元素 |
| 2.4.4 链接用途（结合上下文） | A | 可根据链接文本或上下文确定链接用途 | 没有无障碍上下文的“点击此处”“阅读更多” |
| 2.4.5 多种方式 | AA | 提供多种查找页面的方式 | 网站只有一种导航方式，且没有搜索功能 |
| 2.4.6 标题和标签 | AA | 标题和标签具有描述性 | 标题文本为“第 1 节”；表单标签为“字段 1” |
| 2.4.7 焦点可见 | AA | 键盘焦点指示器清晰可见 | CSS 设置 outline:none 且没有替代方案；深色背景上的焦点不可见 |
| 2.4.11 焦点未被遮挡（最低）（2.2） | AA | 聚焦的元素不会被固定页眉或页脚完全遮挡 | 固定导航栏遮住聚焦的元素 |
| 2.4.12 焦点未被遮挡（增强）（2.2） | AAA | 聚焦的元素完全可见 | 聚焦的元素被部分遮挡 |
| 2.4.13 焦点外观（2.2） | AAA | 焦点指示器符合尺寸和对比度要求 | 过细且对比度不足的 1px 焦点环 |
| 2.5.1 指针手势（2.1） | A | 多点触控或路径手势提供单指针替代操作 | 只能通过捏合缩放；只能通过滑动切换轮播内容 |
| 2.5.2 指针取消（2.1） | A | 可以中止由鼠标按下触发的操作 | 按钮操作在鼠标按下时触发，而不是在鼠标释放时触发 |
| 2.5.3 名称中的标签（2.1） | A | 无障碍名称包含可见标签文本 | 按钮视觉文本为“提交”，但 aria-label="Send form" |
| 2.5.4 动作触发（2.1） | A | 提供设备动作的替代操作；可以禁用设备动作 | 没有替代操作的摇晃撤销；只能通过倾斜导航 |
| 2.5.7 拖动操作（2.2） | AA | 拖动操作提供单指针替代操作 | 只能拖动排序的列表；只能通过拖动操作的滑块 |
| 2.5.8 目标尺寸（最低）（2.2） | AA | 目标尺寸 ≥ 24×24 CSS px（或通过间距弥补） | 小于 24px 且间距不足的图标按钮 |
3. 易于理解 — 内容和操作必须易于理解
| SC | 级别 | 要求 | 常见问题 |
|---|---|---|---|
| 3.1.1 页面语言 | A | 以编程方式确定默认的人类语言 | <html> 上缺少 lang 属性；lang="" |
| 3.1.2 部分内容的语言 | AA | 标明段落所用语言 | 英文页面中有法语引文，但未设置 lang="fr" |
| 3.2.1 获得焦点时 | A | 组件获得焦点时不改变上下文 | 元素获得焦点时打开新窗口 |
| 3.2.2 输入时 | A | 用户输入数据时不意外改变上下文 | 选择选项后表单自动提交 |
| 3.2.3 一致的导航 | AA | 各页面的导航保持一致 | 不同页面的导航顺序发生变化 |
| 3.2.4 一致的标识 | AA | 功能相同的组件采用一致的标识 | 搜索按钮在一个页面上标为“搜索”，在另一个页面上标为“前往” |
| 3.2.6 一致的帮助（2.2） | A | 帮助机制位于一致的位置 | 在线聊天和帮助链接在不同页面上的位置各不相同 |
| 3.3.1 错误识别 | A | 识别并描述输入错误 | 只显示“输入无效”，没有说明；仅通过视觉指示错误 |
| 3.3.2 标签或说明 | A | 为用户输入提供标签或说明 | 表单字段没有标签；日期格式（DD/MM/YYYY）没有提示 |
| 3.3.3 错误建议 | AA | 提供更正建议 | 错误消息只说“错误”，没有说明正确格式 |
| 3.3.4 错误预防（法律、财务、数据） | AA | 法律或财务提交内容可撤销、可检查或可确认 | 一键购买且不可撤销，没有确认步骤 |
| 3.3.7 重复输入（2.2） | A | 同一会话中不重复要求输入已提供的信息 | 确认页面再次要求填写账单地址 |
| 3.3.8 无障碍身份验证（最低要求）（2.2） | AA | 除非存在替代方式，否则登录无需进行认知功能测试 | 没有替代方式的 CAPTCHA；登录必须完成记忆谜题 |
4. 稳健 — 辅助技术必须能够解析内容
| SC | 级别 | 要求 | 常见问题 |
|---|---|---|---|
| 4.1.1 解析 | A（已从 WCAG 2.2 中移除） | 标记有效（无重复 ID、未闭合标签） | 对 2.0/2.1 仍然相关；重复 ID 会导致 AT 出错 |
| 4.1.2 名称、角色、值 | A | UI 组件具有名称、角色和状态/值 | 自定义控件没有 ARIA；切换按钮缺少 aria-pressed |
| 4.1.3 状态消息（2.1） | AA | 无需获得焦点即可通过编程方式确定状态消息 | 显示“商品已加入购物车”，但没有 ARIA 实时区域播报 |
WCAG 一致性等级
| 等级 | 描述 | 法律相关性 |
|---|---|---|
| A | 最低级别 — 消除最严重的障碍 | 单独达到此级别通常不足以满足法律合规要求 |
| AA | 标准级别 — 通用法律基准；消除重大障碍 | 以下标准要求达到此级别：Section 508、EU EAA/EN 301 549、UK GDS、ADA 判例法、AODA |
| AAA | 增强级别 — 为特定用户群体消除其他障碍 | 不要求作为一刀切的政策（WCAG 本身指出，并非所有内容都能达到完全一致性） |
一致性声明： 若要声明网页符合 WCAG X.X AA 级，网页必须满足 所有 A 级和 AA 级成功标准，不得有任何例外（或在无障碍声明中明确记录例外情况）。
常见工作流
完整无障碍审计（WCAG 2.1 AA）
- 自动化扫描 — 使用 axe-core、Lighthouse、WAVE 或 IBM Equal Access Checker。可发现约 30–40% 的问题。
- 仅使用键盘测试 — 使用 Tab / Shift-Tab / Enter / Space / Arrow keys 遍历所有交互元素。测试 SC 2.1.1、2.1.2、2.4.3、2.4.7。
- 屏幕阅读器测试 — NVDA + Chrome；JAWS + Chrome；VoiceOver + Safari（macOS）；VoiceOver + Safari（iOS）；TalkBack + Chrome（Android）。测试 SC 1.1.1、1.3.1、4.1.2 及所有信息类标准。
- 颜色对比度 — 使用 Colour Contrast Analyser 或浏览器 DevTools。测试 SC 1.4.3、1.4.11。
- 缩放／重排 — 将浏览器缩放到 400%；视口宽度设为 320 CSS px。测试 SC 1.4.4、1.4.10。
- 认知层面审查 — 检查导航是否一致、标签是否清晰、错误消息是否明确，以及是否没有复杂的 CAPTCHA。测试 SC 3.x 标准。
- 记录问题 — 按标准记录元素引用、严重程度和修复方案。
无障碍声明
符合 WCAG 的无障碍声明应包括：
- 声明符合的具体 WCAG 版本和级别（例如，“WCAG 2.1 Level AA”）
- 范围：声明涵盖哪些页面或产品
- 已知的不符合项：列出未满足的每项 SC，并作出说明
- 可用的替代方案：例如，无障碍 PDF 版本、电话支持
- 上次评估的日期和评估方法
- 用于反馈和提出无障碍需求的联系方式
- 正式投诉流程（欧盟《网络无障碍指令》要求）
ARIA 使用原则
ARIA（Accessible Rich Internet Applications）用于在仅靠 HTML 不足以表达语义时补充语义。主要规则：
- 不用 ARIA 胜过错误使用 ARIA — 错误的 ARIA 比不用 ARIA 更糟
- ARIA 第一原则： 添加 ARIA 角色之前，先使用原生 HTML 元素
- 必需属性：每个
role都有必需属性 — 例如，role="checkbox"需要aria-checked - 交互式小部件必须遵循 ARIA Authoring Practices Guide (APG) 键盘操作模式
- 对动态内容（状态消息、加载状态、错误）使用
aria-live区域
对比度计算
- 普通文本（< 18pt 常规字重或 < 14pt 粗体）： 最低 4.5:1
- 大号文本（≥ 18pt 常规字重或 ≥ 14pt 粗体）： 最低 3:1
- UI 组件和图形（SC 1.4.11）：最低 3:1
- 增强级（AAA）： 普通文本 7:1；大号文本 4.5:1
- 公式：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度
全球法律框架对照
| 法律／标准 | 适用范围 | WCAG 要求 |
|---|---|---|
| EN 301 549 (2021) | EU/EEA | WCAG 2.1 Level AA（第 9–11 章） |
| European Accessibility Act (EAA) — Directive 2019/882 | EU | EN 301 549 → WCAG 2.1 AA；私营部门截止日期：2025 年 6 月 28 日 |
| EU Web Accessibility Directive — 2016/2102 | EU 公共部门 | WCAG 2.1 AA；自 2018–2020 年起生效 |
| Section 508 (Revised 2018) | US 联邦部门 | WCAG 2.0 AA (E205) |
| ADA Title III (case law) | US 私营部门 | 法院日益将 WCAG 2.1 AA 作为基准 |
| UK Public Sector Accessibility Regulations 2018 | UK 公共部门 | WCAG 2.1 AA |
| Equality Act 2010 | UK 私营部门 | 合理调整 — 广泛采用 WCAG 2.1 AA |
| AODA (WCAG Standard 2.0) | 加拿大安大略省 | WCAG 2.0 Level AA（大型组织自 2021 年起适用） |
| DDA / Disability Discrimination Act | Australia | WCAG 2.1 AA（AHRC 指引） |
参考文件
如需深入了解，请按需阅读：
- references/criteria-detail.md — 完整的 WCAG 2.2 成功标准，包含每项 AA 标准的技术、充分技术、建议技术和失败技术
本技能提供一般合规信息，不构成法律建议。请对照官方来源核实当前要求；涉及相关决策时，请咨询合格的法律顾问或经认可的评估人员。
评论
支持 Markdown