无障碍审计
概述
确保每个人都能感知、操作和理解界面：仅使用键盘、使用屏幕阅读器、缩放浏览以及低视力情况下。在产生问题的组件中修复问题，使修复应用于所有使用这些组件的地方。
方法
- 自动扫描（如果有URL可用）：
npx @axe-core/cli <url>或 Lighthouse 无障碍检查。自动化工具能发现大约三分之一的问题；将结果视为起点。 - 代码审查：对照以下清单检查组件：表单、按钮、链接、图片、模态框、菜单、标签页、表格、自定义小部件。
- 键盘测试：用 Tab 键遍历所有可交互元素。焦点必须可见、顺序合理、没有不可达元素、没有焦点陷阱，Escape 关闭覆盖层，焦点返回触发元素。
- 屏幕阅读器语义：每个控件都有角色、可访问名称及其状态（展开、选中、勾选、无效）。
- 报告：遵循以下输出契约，映射至 WCAG 2.2 AA。
检查清单
| 领域 | 要求（WCAG） |
|---|---|
| 图片 | 信息性图片具有有意义的 alt；装饰性图片使用 alt=""（1.1.1） |
| 对比度 | 文本 4.5:1，大文本和UI组件 3:1（1.4.3, 1.4.11） |
| 颜色 | 信息不单独通过颜色传达（1.4.1） |
| 结构 | 一个 h1，有序的标题层级，地标（header, nav, main, footer），列表作为列表（1.3.1） |
| 表单 | 每个输入有 <label>；错误在文本中命名并通过 aria-describedby 链接；必填字段标记（1.3.1, 3.3.1, 3.3.2） |
| 控件 | 动作为 <button>，导航为 <a href>；没有可点击的 div 而不带 role、tabindex 和键盘处理器（2.1.1, 4.1.2） |
| 焦点 | 可见焦点指示器；绝不使用 outline: none 而不提供替代方案（2.4.7） |
| 模态框和菜单 | 焦点移入，打开时被困住，Escape 关闭，焦点返回（2.1.2, 2.4.3） |
| 名称 | 仅图标的按钮具有 aria-label；链接文本在上下文外能理解（2.4.4, 4.1.2） |
| 动效 | 尊重 prefers-reduced-motion；没有自动播放超过5秒且无暂停的动效（2.2.2, 2.3.3） |
| 缩放和重排 | 在200%缩放和320px宽度下可用，无水平滚动条（1.4.4, 1.4.10） |
| 触控目标 | 触控目标至少 24×24 px（2.5.8） |
| 语言 | 设置 <html lang>（3.1.1） |
ARIA 规则：优先使用原生 HTML 元素。仅在无原生元素合适时添加 ARIA，然后实现该模式的完整键盘行为。
输出契约
### [严重 | 中等 | 一般 | 轻微] 标题 — WCAG <准则>
- 位置：组件和文件:行号（以及相关URL）
- 受影响用户：键盘用户、屏幕阅读器用户、低视力用户等
- 修复：修正的标记或CSS
严重 = 阻止某些用户完成任务（例如无法通过键盘提交表单）。最后以 通过检查 和 需要手动测试（需要实际屏幕阅读器会话的项目）结束。
常见错误
- 使用
div或span加onClick代替<button>。 - 仅用占位符文本作为标签。
aria-label与可见文本矛盾。- 添加
role="button"但未处理 Enter 和 Space 键。 - 仅凭自动化扫描声称 WCAG 合规。