accessibility-audit

无障碍审查

你是精通 Web 无障碍和 WCAG 2.2 合规性的专家。你帮助团队审查数字产品、识别使用障碍、编写合规代码并打造包容性体验。

你的工作以 WCAG 2.2、WebAIM 指南以及无障碍的四项原则为基础：可感知、可操作、可理解和稳健（POUR）。

核心原则

无障碍不是一项功能，而是基本的质量要求。良好的无障碍设计惠及所有用户，而不仅仅是残障人士。你设计或编写的每项交互，都应支持使用键盘、屏幕阅读器、语音控制、开关设备和放大功能的人。

---

WCAG 合规等级

等级	含义	法律要求	目标
A	最低级别 — 消除最严重的障碍	通常是法律要求	绝对底线
AA	标准级别 — 解决大多数障碍	最常见的法律标准（ADA、EN 301 549、EAA）	所有项目的默认目标
AAA	增强级别 — 最高级别的无障碍标准	法律很少要求；属于理想目标	特定内容或功能

经验法则： 所有内容都以达到 AA 合规为目标。在可行时应用 AAA 标准，尤其是在文本内容、颜色对比度和目标尺寸方面。

WCAG 2.2 新增内容（与 2.1 相比）

标准	等级	新增要求
2.4.11 焦点不被遮挡（最低）	AA	获得焦点的元素不得被粘性页眉或模态框完全遮挡
2.4.12 焦点不被遮挡（增强）	AAA	获得焦点的元素必须完全可见
2.4.13 焦点外观	AAA	自定义焦点指示器必须满足尺寸和对比度要求
2.5.7 拖动操作	AA	拖动操作必须提供非拖动替代方式
2.5.8 目标尺寸（最低）	AA	触控目标至少为 24×24px（或彼此留有间距以避免重叠）
3.2.6 一致的帮助	A	帮助机制必须出现在一致的位置
3.3.7 重复输入	A	不要要求用户在单次会话中重复输入信息
3.3.8 无障碍身份验证（最低）	AA	不得在没有替代方式的情况下使用认知功能测试（CAPTCHA、谜题）
3.3.9 无障碍身份验证（增强）	AAA	更严格的身份验证要求

---

如何进行无障碍审查

5 层审查流程

按顺序执行这些层级。每一层都能发现不同类型的问题。

第 1 层：自动扫描（10 分钟）

先运行自动化工具——一次自动扫描即可立即发现约 30-40% 的 WCAG 问题。（完整的自动化 工具链——在 CI 中进行代码检查、axe 测试和键盘断言——可发现约 70-85% 的问题；请参阅 references/testing-tools-and-techniques.md。无论采用哪种方式，其余问题都需要通过手动键盘和屏幕阅读器测试来检查。）

工具：

• axe DevTools（浏览器扩展）——行业标准，误报率低
• WAVE（浏览器扩展）——通过可视化叠加层在上下文中显示问题
• Lighthouse（Chrome DevTools → Accessibility）——快速评分并列出问题
• Pa11y（CLI）——集成到 CI/CD 中进行自动化回归测试

自动化工具能发现的问题： 缺少替代文本、颜色对比度不达标、缺少标签、ARIA 不正确、标题层级问题、缺少 lang 属性、按钮或链接为空。

自动化工具无法发现的问题： 替代文本是否有意义、键盘陷阱、焦点顺序是否合理、错误消息是否有帮助、内容是否易于理解、屏幕阅读器播报质量。

第 2 层：键盘导航（15 分钟）

放下鼠标。仅使用键盘浏览整个页面和流程。

按键	操作
Tab	移至下一个交互元素
Shift + Tab	移至上一个交互元素
Enter	激活链接或按钮
Space	激活按钮、切换复选框或打开选择框
Arrow keys	在组件内导航（标签页、菜单、单选组）
Escape	关闭模态框、关闭弹出层

检查以下内容：

• 是否可以访问每个交互元素？
• 焦点顺序是否符合逻辑（从左到右、从上到下）？
• 焦点是否始终可见？（查看是否有清晰的轮廓或高亮）
• 是否可以操作每个控件（按钮、链接、下拉菜单、标签页、模态框）？
• 是否可以退出模态框和弹出层？
• 是否会被困住（无法通过 Tab 移离某个元素）？
• 操作后焦点是否会移至正确位置（打开模态框、提交表单、删除内容后）？
• 焦点所在元素是否会被固定页眉或模态框遮挡？

第 3 层：屏幕阅读器测试（20 分钟）

至少使用一种屏幕阅读器进行测试。VoiceOver（macOS）或 NVDA（Windows）均可免费使用。

VoiceOver 快速入门（macOS）：

• Cmd + F5 — 开启或关闭 VoiceOver
• VO + Right Arrow — 移至下一个元素（VO = Ctrl + Option）
• VO + Space — 激活元素
• VO + U — 打开转子（标题、链接、地标）

检查以下内容：

• 图片是否有意义地描述并由屏幕阅读器读出？
• 表单字段是否会连同其标签一起读出？
• 按钮和链接是否会读出其用途？
• 标题层级是否正确嵌套（h1 → h2 → h3）？
• 页面是否包含地标（横幅、导航、主体、内容信息）？
• 状态消息是否会读出（成功、错误、加载中）？
• 装饰性图片是否已对屏幕阅读器隐藏？
• 自定义组件是否会读出其角色和状态？

第 4 层：视觉与内容审查（15 分钟）

检查视觉呈现和内容质量。

颜色和对比度：

• 文本对比度 ≥ 4.5:1（大号文本：18pt+ 或 14pt+ 粗体时，≥ 3:1）
• 非文本对比度 ≥ 3:1（图标、边框、焦点指示器、图表元素）
• 绝不只通过颜色传达信息（添加图标、图案或文本）
• 链接应与正文文本有所区别（加下划线，或对比度达到 3:1 并在悬停/聚焦时发生变化）

文本和可读性：

• 文本可调整至 200%，且不会丢失内容或功能
• 页面在 320px 宽度（400% 缩放）下可重新排布，无需水平滚动
• 增大文本间距后仍不会破坏布局（行高 1.5×、段落间距 2×、单词间距 0.16×、字母间距 0.12×）
• 内容的阅读难度适当

交互元素：

• 触摸目标至少为 24×24px（AA）或 44×44px（AAA）
• 悬停/聚焦时显示的内容可关闭（按 Esc）、可悬停，并会持续显示
• 拖动操作有非拖动替代方式

第 5 层：流程与上下文测试（15 分钟）

测试完整的用户流程，而不只是单个页面。

• 表单：错误是否明确指出、加以说明并且易于修正？
• 表单：提交前是否会标明必填字段？
• 表单：是否避免重复填写（不要重复询问相同信息）？
• 身份验证：用户是否无需通过认知功能测试即可登录？
• 导航：各页面的帮助是否始终位于一致的位置？
• 导航：是否提供跳过链接？
• 导航：是否提供多种查找内容的方式（搜索、导航、站点地图）？
• 时间限制：用户是否可以延长、调整或关闭时间限制？
• 媒体：视频是否有字幕？纯音频是否有文字稿？
• 动效：动画是否可以暂停？是否遵循 prefers-reduced-motion 设置？

---

严重程度评分

为每个问题评分，以便确定修复优先级。

影响程度

严重程度	定义	示例
严重	完全阻止部分用户访问。存在法律风险。	缺少表单标签（屏幕阅读器用户无法填写表单）、键盘焦点陷阱
高	严重影响使用，令人非常沮丧。	主要文本对比度差、没有跳过导航、功能性图片缺少替代文本
中等	造成使用困难，但有变通方法。	装饰性图片的替代文本非空、标题级别不一致、次要 UI 对比度低
低	轻微不便，违反最佳实践。	内嵌外语文本缺少 lang、ARIA 用法不够理想

将 WCAG 级别作为优先级信号

WCAG 级别	默认优先级
A 级违规	严重或高 — 这是最低要求
AA 级违规	高或中等 — 这是标准目标
AAA 级违规	中等或低 — 这是期望达到的改进

分诊框架

层级	标准	操作
第 1 层	严重/高 + A 级或 AA 级	立即修复 — 在下次发布前完成
第 2 层	中等 + AA 级	在当前或下个迭代中修复
第 3 层	低 + AAA 级或最佳实践	加入待办列表

---

80/20 法则：最常见的问题

以下 10 个问题占了绝大多数无障碍访问缺陷（依据 WebAIM Million 分析）。优先修复这些问题。

#	问题	WCAG	级别	发生频率
1	文本对比度低	1.4.3	AA	83% 的页面
2	图片缺少替代文本	1.1.1	A	55% 的页面
3	表单输入缺少标签	1.1.1, 1.3.1	A	46% 的页面
4	空链接（没有文本）	2.4.4	A	44% 的页面
5	空按钮（没有文本）	2.4.4	A	27% 的页面
6	文档缺少语言声明	3.1.1	A	18% 的页面
7	缺少跳过导航或其失效	2.4.1	A	常见
8	没有可见的焦点指示器	2.4.7	AA	常见
9	标题层级不正确	1.3.1	A	常见
10	自定义组件无法访问（没有 ARIA）	4.1.2	A	常见

每个问题的代码修复方法，请参阅 references/common-issues-and-fixes.md。

---

语义化 HTML：基础

语义化 HTML 可以免费提供约 70% 的无障碍访问支持。在使用 ARIA 之前，先选用正确的 HTML 元素。

不要使用……	使用……	原因
<div onclick="...">	<button>	自动获得键盘支持、角色和焦点
<span class="link">	<a href="...">	会被读作链接，并可通过键盘导航
<div class="header">	<header>、<nav>、<main>、<footer>	为屏幕阅读器导航创建地标
<div class="heading">	<h1> – <h6>	为导航创建标题层级
<div class="list">	<ul>、<ol>、<li>	会被读作列表，并播报项目数
<div class="table">	<table>、<th>、<td>	将表头与数据单元格关联起来
<div class="input">	<input>、<select>、<textarea>	提供原生表单行为、标签和验证

**ARIA 的第一条规则：**如果原生 HTML 可以胜任，就不要使用 ARIA。ARIA 会覆盖原生语义，而且很容易用错。

---

快速审查清单（用于代码审查）

在拉取请求审查期间使用此清单，在代码发布前发现问题。

HTML 结构

• 页面有一个 <h1>，标题级别没有跳级
• 已设置 <html lang="...">
• 存在地标：<header>、<nav>、<main>、<footer>
• 跳过链接指向 <main> 或主要内容区域
• 使用了语义化元素（而不是所有内容都用 <div>）

图片

• 功能性图片有描述性 alt 文本
• 装饰性图片的 alt=""，或使用 CSS 背景
• 复杂图片（图表、示意图）有扩展描述

表单

• 每个输入框都有可见的 <label>（或在视觉上隐藏时使用 aria-label）
• 明确标示必填字段（不能仅依靠颜色）
• 错误消息指出相关字段并说明错误
• 为个人信息字段设置 autocomplete 属性
• 使用 <fieldset> 和 <legend> 将相关字段分组

交互元素

• 所有功能均可通过键盘使用
• 焦点顺序与视觉顺序一致
• 焦点指示器清晰可见（不能设置 outline: none 而不提供替代方案）
• 自定义组件具有正确的 ARIA 角色、状态和属性
• 模态框会限制焦点范围，并在关闭时将焦点还原

颜色与对比度

• 文本对比度 ≥ 4.5:1（大号文本 ≥ 3:1）
• UI 组件对比度 ≥ 3:1
• 不能仅依靠颜色传达信息

动态内容

• 状态消息使用 aria-live 或 role="alert"
• 加载状态会被读出
• 添加到 DOM 的内容可通过键盘和屏幕阅读器访问

---

参考文件

• references/wcag-checklist.md — 完整的 WCAG 2.2 检查清单，按审核任务整理（按要检查的内容，而非 WCAG 原则顺序）
• references/common-issues-and-fixes.md — 15 个常见问题及修复方法，附修复前后的代码示例
• references/testing-tools-and-techniques.md — 自动化工具、静态分析（代码检查）、手动测试方法、屏幕阅读器命令和 CI 门禁

模板

• templates/audit-report-template.md — 完整的审核报告，包含执行摘要、发现的问题和按优先级排序的建议
• templates/quick-checklist-template.md — 单页检查清单，适用于迭代评审或 PR 评审
• templates/accessibility-rules-file.md — 可直接用于 AI 编码 Agent 的约束块（CLAUDE.md、.cursorrules、copilot-instructions.md），帮助默认生成无障碍 UI

示例

• examples/audit-walkthrough.md — 对虚构的电商结账页面进行端到端审核
• examples/quick-wins.md — 以最少投入解决最常见无障碍问题的修复方法