ux-accessibility-audit

无障碍审计技能

此技能的工作方式（请先阅读）

这是一项评估型技能——它会依据标准（WCAG）审查现有成果，而不是生成 UI。标记问题是安全的，因此此技能会自动运行；它既可由生成型技能作为验证步骤调用，也可直接调用。

此技能负责本仓库中的无障碍问题。生成型技能会将问题交由它处理（例如 ux-login-signup、ux-pricing），而启发式审计（ux-heuristics-audit）会有意将对比度／键盘／屏幕阅读器的具体问题交由此技能处理，以免重复审查。调用此技能时，请完整执行无障碍审查；不要假定其他技能已经覆盖了这些问题。

严格遵循范围。 直接调用此技能（用户指定了此审计）时，只审查此关注点——不要纳入同级审计。只有当协调器（ux-design-review）或生成型技能依据 docs/orchestration-policy.md 调用此技能时，它才会与其他审查视角并行；此时它属于B 级——可选（如果正在使用设计系统，则缩小为仅审查其使用方式）。明确指定的范围始终优先。

---

此技能与默认行为的不同之处

默认情况下，无障碍反馈往往不够全面且含糊——只指出几个明显问题（“添加替代文本”“检查对比度”），却没有标准、严重程度或系统性审查。此技能会确保做到以下四点：

1. 每项发现都注明其违反的 WCAG 准则及等级——而不是给出含糊的建议。
2. 每项发现都标注严重程度，依据问题对访问造成的阻碍程度进行判断——以便确定处理优先级。
3. 每项发现都提供具体的修复方案——明确指出标记或设计需要如何更改。
4. 审计系统全面——覆盖下方的六个类别，确保能发现那些不那么明显的问题（焦点顺序、标题层级、表格语义、动效等）。

---

WCAG 基础

POUR 原则——每项审计内容都对应以下四项原则之一：

• 可感知——内容必须能通过至少一种感官（视觉、听觉等）获取
• 可操作——所有交互都必须在不使用鼠标的情况下正常运行（键盘、开关、语音）
• 可理解——内容和 UI 必须清晰且符合预期
• 健壮——内容必须能在不同浏览器、设备和辅助技术中正常使用

合规等级：

• A 级——最低要求；缺失这些要求会造成完全的障碍（例如没有替代文本、无法使用键盘访问）。
• AA 级——大多数组织必须达到的法律标准；所有审计的默认目标。
• AAA 级——进阶目标；仅在能带来较高价值时选择性采用。

默认审计目标：WCAG 2.1 AA 级。

---

审计清单

逐一检查每个类别——漏掉实际问题的主要原因就是审查不完整。每项违规都要标明WCAG 准则、严重程度（见下方模型）和修复方案。

1. 颜色与对比度

检查项	要求	备注
正文与背景	≥ 4.5:1（AA）／7:1（AAA）	适用于 UI 中的所有文本：按钮、标签、卡片、导航
大号文本（≥ 18pt 或 ≥ 14pt 粗体）	≥ 3:1
图标（信息性或交互式）	≥ 3:1	装饰性图标除外
输入框边框与周围背景	≥ 3:1	包括焦点指示器
图片上的文本	文本与其背后的图片区域之间 ≥ 4.5:1	必要时使用半透明叠层
选中状态	与普通文本相同的比例
禁用元素	不受对比度规则约束	但仍须能识别出其处于非激活状态
Logo 文本	不受约束	但保持对比度仍是良好做法
仅用颜色区分	❌ 绝不可	始终搭配图标、图案、标签或文本
强烈对比（纯黑对白色）	不建议	使用 #333 搭配 #F8F8F8——对比度高于 AA 标准，同时减轻眼部疲劳

不要只依赖颜色：错误状态需要图标和文本，而不只是红色。图表需要图案或标签，而不只是颜色。

---

2. 排版与文本

检查项	要求
正文字号	≥ 16px
行长	45–75 个字符（包括空格）
文本对齐	遵循阅读方向（LTR → 左对齐；RTL → 右对齐）
标题在视觉上清晰醒目	字号更大、字重更粗或颜色与正文不同
每页一个 <h1>	仅用于页面标题
标题层级	不跳过层级（h1 → h2 → h3，不能 h1 → h3）
语义化标题标签	使用 <h1>–<h6>，不要使用经过样式化的 <div> 或 <p>
语言	使用通俗易懂的语言，阅读水平适合中等教育阶段
惯用语与修辞手法	避免使用，以免让屏幕阅读器用户和非母语者感到困惑
字体	字形易于区分（0 与 O、1 与 l 与 I）；x 高度较大

---

3. 表单

检查项	要求
键盘访问	每个字段、下拉菜单、复选框、单选框和按钮都可通过 Tab / Shift+Tab / Enter / 方向键导航
焦点指示器	每个获得焦点的元素都要清晰可见 — 不要移除浏览器默认样式，除非提供替代样式
布局	优先采用单列布局；多列会增加认知负担，并让屏幕阅读器用户感到困惑
输入框边界	使用可见边框或背景 — 不要使用无边框输入框
标签	放在字段外，不要只用占位符；最小字号为 16px；对比度为 4.5:1
占位符文本	仅作补充 — 输入内容后会消失，因此不能作为唯一标签
自动补全	为姓名、电子邮件、电话、地址和付款信息实现自动补全（HTML autocomplete 属性）
错误状态	使用多种提示：图标 + 粗边框 + 针对字段的消息。不要仅依赖颜色
错误位置	放在出错字段旁边 + 使用 aria-describedby 将字段与错误信息关联
错误摘要	提交失败时显示在表单顶部，并提供指向每个出错字段的锚点链接
身份验证	不要使用基于文本的 CAPTCHA — 使用魔法链接、OTP、通行密钥或生物识别。密码字段支持粘贴
移动设备单手操作	将 CTA 放在下方中间区域；避免只将按钮放在右侧边缘

---

4. 链接与导航

检查项	要求
链接标签	描述明确、具体 — 使用“下载定价指南”，而不是“点击这里”或“了解更多”
在新窗口打开的链接	在链接文本或 aria-label 中提醒用户：“在新标签页中打开”
文件链接	标明类型和大小：“年度报告（PDF，2.5 MB）”
将原始 URL 作为链接文本	❌ 绝不使用 — 屏幕阅读器会逐字符朗读
链接辨识度	同时使用下划线和颜色（不能只用颜色）
焦点状态	每个链接和交互元素都要有清晰、醒目的焦点环
href 属性	所有 <a> 标签都必须有该属性 — 带有点击处理程序的 <div> 不是链接
语气与风格	链接文本应符合产品的语气，但始终优先保证清晰易懂
帮助链接	放置位置保持一致（页脚、页眉工具导航或固定的帮助图标）

---

5. 图像与多媒体

检查项	要求
信息性图像	使用 alt 属性提供有意义的描述
装饰性图像	使用 alt=""（空值）— 告知屏幕阅读器跳过该图像
包含文本的图像	替代文本 = 图像中的准确文本
自动播放	❌ 默认禁用 — 必须由用户主动开始播放
媒体控件	播放/暂停/停止/倒回/音量/静音/字幕 — 支持键盘操作，并具有足够的尺寸和对比度
视频字幕	所有带音频的预录视频都必须提供字幕
音频文本稿	所有纯音频内容都必须提供文本稿
闪烁内容	❌ 不得出现频率超过 3 Hz 的闪烁内容，也不得出现任何频率的红色闪烁
动画（GIF、SVG、CSS）	明暗条纹对不超过 5 组；提供暂停/停止方式
图标	搭配文本标签；信息性图标需要 aria-label 或 title
滑动手势	同时支持两个方向，或提供可替代的点击目标

---

6. 表格与列表

检查项	要求
数据表格	使用 <table> 元素——绝不将表格用于布局
表格标题	紧跟在 <table> 开始标签之后放置 <caption>
表头单元格	使用带有 scope="col" 或 scope="row" 的 <th>——绝不留空
复杂表格	避免合并单元格和多级表头；必要时拆分为更简单的表格
单元格宽度	使用 % 而不是 px——以便浏览器重新排版；绝不手动设置单元格高度
列表	适当使用 <ul>、<ol> 或 <dl>——不要使用带样式的 <div> 行
无序列表	用于项目顺序无关紧要的情况
有序列表	用于顺序步骤、排名和说明
描述列表	使用 <dl> / <dt> / <dd> 编写术语表、常见问题和键值元数据

---

严重程度评级

根据每个问题对访问的阻碍程度以及不符合的 WCAG 级别进行评级：

严重程度	含义
严重	完全阻碍部分用户访问。通常属于 A 级失败——无法使用键盘访问、信息性图片缺少替代文本、缺少字幕或存在键盘陷阱。发布前修复。
主要	造成明显障碍；用户有时可以绕过问题，但不应被迫这样做。通常属于 AA 级失败——对比度低于 4.5:1、用占位符代替标签、仅通过颜色表示错误状态、缺少焦点指示器。
轻微	问题明显但影响较小，或属于最佳实践 / AAA 级改进——行长稍短、纯黑文本过于刺眼、标签不够理想但仍可用。

有疑问时，应根据对用户的影响评级（是否会阻碍任务，还是仅造成不便？），而不是根据修复难易程度。

---

审核输出格式

## Accessibility Audit — [Component / Screen Name]
Context: [platform · WCAG target (default AA) · design or code]

### Critical (blocks access entirely)
- [Issue]: [what's wrong] → [fix] — WCAG [X.X.X]

### Major (significant friction)
- [Issue]: [what's wrong] → [fix] — WCAG [X.X.X]

### Minor (best practice / AAA)
- [Issue]: [what's wrong] → [fix] — WCAG [X.X.X]

### Passed ✓
- [what's already working]

结尾始终用一行总结说明整体 WCAG AA 合规状态，并指出达到合规所需的主要修复项。

---

如何做好审核

1. 明确背景。 确定平台（Web / 移动端 / 原生）、目标级别（默认为 AA——只有在被要求时才审核 AAA），以及审核对象是设计还是运行中的代码（键盘顺序和 aria-* 等检查仅适用于代码）。
2. 覆盖全部六个类别。 相比默认评审，这项技能的价值在于完整性——不要只检查对比度和替代文本。
3. 按障碍评级，而非按工作量。 只需一行代码的 alt 修复也可能是严重问题。
4. 明确说明修复方法。 给出确切的更改方式（标记、属性、比例或设计调整），不要只说“让它更易访问”。
5. 说明工具的局限性。 自动扫描器只能发现约 30–40% 的问题——仍需手动审核焦点顺序、替代文本质量和阅读顺序。

---

推荐工具

自动扫描（可发现约 30–40% 的问题）：

• WAVE（浏览器扩展）——叠加显示视觉指示器，并注明违反的 WCAG 标准
• axe DevTools（Chrome 扩展）——准确且适合开发者；由 axe-core 驱动
• Google Lighthouse（Chrome DevTools → Lighthouse 标签页）——一次性检查无障碍性、SEO 和性能

设计中的对比度检查：

• Able（Figma 插件）——对比度检查器 + 色盲模拟器
• Stark（Figma / Sketch / Adobe XD）——对比度、视觉模拟器、焦点顺序和替代文本注释
• WCAG Color Contrast Checker（Chrome 扩展）——在浏览器中实时检查比例

屏幕阅读器测试：

• VoiceOver（macOS/iOS，内置）——使用 VO + arrow keys 导航
• NV Access / NVDA（Windows，免费）——使用最广泛的 Windows 屏幕阅读器

癫痫风险检测：

• PEAT（可下载）——分析视频 / 动画，检测可能诱发光敏性癫痫的因素
• Harding Test——面向广播 / 视频内容的在线付费服务

---

常见的应做与不应做模式

❌ 不应做	✅ 应做
仅用红色文本表示错误	红色边框 + 警告图标 + 描述性消息
<a>Click here</a>	<a>Download the onboarding guide (PDF, 1.2 MB)</a>
<img src="chart.png"> (无 alt)	<img src="chart.png" alt="Bar chart showing Q3 revenue by region">
为装饰性图片添加 alt 文本	<img src="bg-swoosh.svg" alt="">
纯白背景 #FFF 上使用纯黑色 #000	米白色背景 #F8F8F8 上使用深灰色 #333
仅使用占位符作为标签	在字段上方设置持久标签 + 可选占位符
从 <h1> 跳到 <h3>	始终按 <h1> → <h2> → <h3> 的顺序使用
用表格进行页面布局	使用 CSS Grid 或 Flexbox 进行布局；仅用 <table> 展示数据
自动播放视频	在顶部显示控件；由用户启动播放
图表图例仅依赖颜色区分	除颜色外，添加图案、形状或数据标签
只报告明显的问题	检查全部六个类别；按障碍程度评级；注明所依据的标准

---

来源课程（Uxcel）

• 无障碍简介
• 无障碍工具
• 色彩无障碍
• 文本无障碍
• 表单无障碍
• 链接无障碍
• 多媒体无障碍
• 表格与列表无障碍