无障碍测试是什么
无障碍（Accessibility，常缩写 a11y）测试验证界面能否被辅助技术使用：屏幕阅读器读出正确语义、只用键盘能走完所有流程、低视力用户能看清内容。判据来自 W3C 的 WCAG 指南，核心是 POUR 四原则：可感知、可操作、可理解、健壮。它既是行业法规与采购合同的常见硬性要求，也是通用质量问题——视障、色觉障碍、临时受伤（如骨折）用户都会被同一批缺陷挡住。
基本信息
| 依据标准 | WCAG 2.2，等级 A / AA / AAA，多数团队以 AA 为验收线 |
|---|---|
| 适用平台 | Web 页面、移动 App（VoiceOver / TalkBack）、桌面客户端 |
| 检查维度 | 语义结构、键盘可达、焦点管理、对比度、表单标签、动态内容播报 |
| 常用工具 | axe-core / axe DevTools、Lighthouse、WAVE、NVDA、JAWS、VoiceOver |
| 成本特点 | 自动扫描便宜且可进 CI，人工与读屏走查贵但不可替代 |
典型使用场景
- 上线前基线扫描：在 CI 中跑 axe 规则集，拦截图片缺 alt、对比度不足等确定性违规
- 关键流程键盘走查：不碰鼠标走完注册、下单、支付，检查焦点顺序与可见焦点框
- 读屏可用性验证：用 NVDA 或 VoiceOver 走主流程，确认控件名称、状态播报可理解
- 改版回归：组件库升级或换主题色后重跑扫描，防止语义与对比度被改坏
- 合规评估：对照 WCAG AA 出报告，作为交付或监管的证明材料
- 缺陷修复验证：修完同时回归自动规则与原有走查脚本，确认没有引入新违规
CI 内自动扫描
CI 内自动扫描
// 在端到端测试里接入 @axe-core/playwright
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa']) // 只启用 A/AA 规则，减少噪声
.analyze();
// violations 为空才算通过，非空时打印违规规则与命中节点数
if (results.violations.length) console.table(results.violations.map(v => ({ id: v.id, count: v.nodes.length })));
// 命令行快速扫描：npx axe https://example.com --exit （违规时退出码非 0）常见缺陷与检查方式
| 缺陷 | 典型表现 | 检查方式 |
|---|---|---|
| 图片无替代文本 | 图标按钮、信息图读屏读不出含义 | 自动扫描加读屏抽查 |
| 对比度不足 | 浅灰文字配白底，低视力读不清 | 对比度工具逐个状态检查 |
| 键盘不可达 | 下拉、弹窗、自定义控件只能用鼠标 | Tab / Shift+Tab 全流程走查 |
| 焦点管理缺失 | 弹窗打开后焦点仍在背景，Esc 关不掉 | 键盘走查弹窗开关与返回位置 |
| 表单错误无提示 | 提交失败只变红框，读屏不知道错在哪 | 检查错误文案与字段的语义关联 |
对比度阈值：AA 级正文 4.5:1、大号文本 3:1；AAA 级分别是 7:1 与 4.5:1。检查时连同悬停、禁用、深色模式、空数据等状态一起看，只测默认态容易漏。
axe-core 能稳定覆盖的规则只占 WCAG 条目的一部分，把扫描零违规当作无障碍达标的全部证据属于过度承诺；键盘与读屏走查要作为独立验收项保留。