可访问性审计
第 1 步：识别输入内容
在检查任何内容之前，先确定实际提供的是什么：
- 截图或图片 - 仅进行截图范围内的审计（参见第 3 步）。
- URL - 如果可用，使用抓取工具获取页面，并将渲染后的 HTML 作为事实来源。如果页面截图也可用，则同时使用两者。如果没有可用的抓取工具，请要求用户粘贴页面的 HTML，而不是猜测标记。
- HTML、JSX 或其他标记/组件片段 - 直接将其作为事实来源读取。
- 其他任何内容（纯文字描述、没有导出图片的 Figma 链接、含糊的“检查我们的应用”） - 停止并请求提供截图、URL 或标记。不要猜测你看不见的用户界面。
如果提供了多种输入类型（例如 URL 加上某种状态的截图），则同时使用这两种，并在更广的范围内进行检查。
第 2 步：阅读检查清单
在评估任何内容之前，请阅读 references/wcag22-checklist.md。它列出了本次审计检查的全部 18 条成功标准，每行一条：SC 编号、名称、级别、是否仅凭截图即可验证，以及需要检查的内容。每次审计时都要重新阅读此文件，即使是同一会话中的第二次审计也要阅读，以免标准悄然从记忆中消失。
本次审计涵盖的标准
| SC | 名称 | 级别 |
|---|---|---|
| 1.1.1 | 非文本内容 | A |
| 1.3.1 | 信息和关系 | A |
| 1.4.3 | 对比度（最低） | AA |
| 1.4.4 | 调整文本大小 | AA |
| 1.4.10 | 自动换行 | AA |
| 1.4.11 | 非文本对比度 | AA |
| 2.1.1 | 键盘 | A |
| 2.1.2 | 无键盘陷阱 | A |
| 2.4.4 | 链接目的（在上下文中） | A |
| 2.4.6 | 标题和标签 | AA |
| 2.4.7 | 焦点可见 | AA |
| 2.4.11 | 焦点未被遮挡（最低）- WCAG 2.2 新增 | AA |
| 2.5.8 | 目标大小（最低）- WCAG 2.2 新增 | AA |
| 3.2.2 | 输入时 | A |
| 3.3.1 | 错误识别 | A |
| 3.3.2 | 标签或说明 | A |
| 3.3.8 | 可访问的身份验证（最低）- WCAG 2.2 新增 | AA |
| 4.1.2 | 名称、角色、值 | A |
有关每条标准需要检查的内容，请参阅 references/wcag22-checklist.md。
第 3 步：区分输入可以证明什么和不能证明什么
这是保持审计诚实的规则。永远不要对输入无法展示的标准声称通过或失败。
仅凭截图，你可以检查：
- 1.4.3 对比度（最低）- 测量渲染的文本和背景颜色。
- 1.4.11 非文本对比度 - 测量图标、边框和可见的焦点指示器。
- 2.4.6 标题和标签 - 确认标题和表单标签在视觉上存在，并在脱离上下文时仍有意义。
- 2.5.8 目标大小 - 在已知或声明视口缩放比例的情况下，测量可触摸元素的尺寸是否达到 24x24 CSS 像素的最小值。
- 3.3.2 标签或说明 - 确认在需要标签的输入框旁边存在可见的说明。
仅凭截图，你无法检查，且必须在“此输入无法验证”下列出：
- 1.1.1 非文本内容（替代文本存在于 DOM 中，而非像素中）。
- 1.3.1 信息和关系（语义结构）。
- 2.1.1 / 2.1.2 键盘行为和键盘陷阱。
- 2.4.4 链接目的（当依赖于程序化上下文时）。
- 2.4.7 / 2.4.11 焦点可见性，除非提供了焦点状态的截图。
- 3.2.2 输入时、3.3.1 错误识别、3.3.8 可访问的身份验证 - 所有这些都需要交互或流程，而非静态图像。
- 4.1.2 名称、角色、值（需要无障碍树）。
从 HTML、JSX 或抓取的页面中，直接对照标记检查所有 18 条标准：替代文本属性、标题和地标结构、标签关联、ARIA 角色和状态、tabindex 和焦点管理代码，以及任何可以解析以计算对比度的内联颜色值。如果未提供 CSS，则对比度和目标大小仍属于“无法验证”，除非给出了计算值。
第 4 步：指定严重程度
- P0 - 阻塞使用。 用户完全无法完成任务。主要操作缺少可访问名称、键盘陷阱、对比度极低导致文本无法阅读、表单控件完全没有标签。
- P1 - 降低使用体验。 任务可以完成但更困难。对比度低于 AA 阈值但仍可辨认、缺少可见的焦点指示器、目标小于 24x24 CSS 像素的最小值、模糊的链接文本（“点击此处”）且没有周围上下文。
- P2 - 轻微摩擦。 轻微混淆或低效。标题级别不一致、装饰性元素对比度低、多余的说明。
第 5 步：撰写每个发现
每个发现需要三个部分，按以下顺序：
- 观察 - 你实际看到或读到的内容，而不是推断。（“'提交'按钮在 #7A9CC6 背景上显示白色文本 (#FFFFFF)。”）
- 修复 - 具体而非泛泛。（“将背景加深至 #3D5A80 或以下，以达到 4.5:1 的白色文本对比度。”）
- 引用 -
WCAG 2.2 SC <编号>（<名称>，级别 <A/AA>）。
输出格式
请使用以下确切结构：
# 可访问性审计：<被审查内容的名称或 URL>
**输入类型：** 截图 | URL | HTML/JSX
**范围：** <实际检查内容的一句话描述>
## P0 - 阻塞使用
1. **<简短标题>**
- 观察：<事实>
- 修复：<具体修复>
- WCAG 2.2 SC <x.x.x>（<名称>，级别 <A/AA>）
## P1 - 降低使用体验
（相同结构）
## P2 - 轻微摩擦
（相同结构）
## 此输入无法验证
- <SC 编号和名称> - 需要 <HTML / URL / 键盘测试 / 焦点状态截图>
## 范围说明
这是针对 WCAG 2.2 的专家审查，不能替代与使用辅助技术的人员进行测试，也不能替代法律上的 ADA 或 Section 508 合规认证。
当某个严重程度部分没有发现时，请将其省略 - 不要在暗示存在问题的标题下填充“未发现问题”等内容。当输入是截图时，始终包含“此输入无法验证”部分；当审计覆盖了完整的 HTML/JSX/URL 时，写入“无 - 完整标记可用”以代替省略该部分。始终包含范围说明。
边界情况
- 单个截图包含多个屏幕或状态 - 在同一个报告中，在每个屏幕的
##子标题下分别审计，而不是跨屏幕合并发现。 - 照片、渐变色或视频背景上的文本 - 不要估计为通过。将不确定对比度的问题记录为 P1 发现，并建议针对文本颜色测试最差的像素区域。
- 没有可见内容的组件（空状态、加载骨架屏） - 记录下来，并询问是否提供有内容的状态，因为多个标准（标题、标签、链接目的）无法从空壳中判断。
- 带有内联样式或未解析 CSS 变量的 HTML/JSX - 将对比度和目标大小视为无法验证，而不是猜测计算值。
- “快速检查”或“只看大问题”的请求 - 仍然运行完整标准列表，但仅报告 P0 问题，并在范围行中注明 P1/P2 已检查但已从输出中抑制。
- 修复后对同一屏幕进行第二次审计 - 重新运行完整流程；不要假定先前的发现仍然有效。
需要避免的失败模式
- 不要虚构你没有从实际颜色计算出的对比度。
- 不要因为看起来没有明显错误就标记为标准“通过” - 如果没有检查，那就是“无法验证”，而不是“通过”。
- 不要引用你实际上没有检查过的 WCAG 成功标准。
- 不要为了报告读起来更好看而将 P0 发现降级为 P1。