无障碍测试：自动化与手动评估

无障碍测试：自动化与手动评估

无障碍测试是确保网站、应用程序能被包括残障人士在内的所有人正常使用的关键环节。它并非单一动作，而是由自动化工具扫描和人工手动评估共同构成的完整流程。本教程将带你从零开始，系统掌握这两种方法的实施流程、常用工具及最佳实践。

什么是无障碍测试？

无障碍测试的目的是发现并修复产品中违反《Web 内容无障碍指南》（WCAG）的问题，让视障、听障、运动障碍、认知障碍用户都能通过辅助技术（如屏幕阅读器、语音控制）顺畅操作。测试通常分为两类：

• 自动化测试：使用软件快速扫描代码，发现大约 30%-50% 的显性无障碍缺陷。
• 手动评估：由测试人员模拟用户行为或使用辅助技术，评估自动化无法覆盖的复杂交互和主观体验。

两者结合才能构建可靠的无障碍防线。

第一部分：自动化测试

自动化测试擅长捕获可编码的规则，例如缺失的替代文本、颜色对比度不足、HTML 结构错误等。它能帮助团队在开发阶段低成本地预防大量基础问题。

主流自动化测试工具

如何集成自动化测试

1. 浏览器即时检查

• 为 Chrome 或 Firefox 安装 axe DevTools 扩展。
• 打开待测页面，按 F12 打开开发者工具，进入 “axe DevTools” 标签页。
• 点击“扫描全部”，工具会列出所有违规项，并按严重级别分类。
• 每条问题都附有修复指导和受影响的 HTML 元素。

2. 命令行与 CI 集成（以 Pa11y 为例）

# 安装 Pa11y
npm install -g pa11y

# 检测单个页面并输出报告
pa11y https://example.com

将上述命令写入 package.json 的脚本，或集成到 GitHub Actions、Jenkins 等持续集成流程中，可实现每次代码提交时自动扫描关键页面。

3. 代码级集成（Web 端测试框架） 如果在使用 Jest、Cypress 等测试框架，可直接引入 axe-core 或 cypress-axe：

// Cypress 示例
import 'cypress-axe';
cy.injectAxe();
cy.checkA11y();

这样单元测试或端到端测试就能一并验证无障碍性。

自动化测试能发现什么？

• 图片缺少 alt 属性或为空
• 表单控件缺少关联的 label
• 按钮、链接缺少可分辨的文本
• 颜色对比度未达到 4.5:1 标准
• 标题层级跳跃（例如从 <h1> 直接跳到 <h3>）
• 缺少网页 lang 属性
• 重复的 ID 属性

自动化测试的局限

• 无法判断替代文本的质量（例如 alt="图片" 虽然通过检测却毫无意义）
• 无法评估键盘导航的可用性（焦点顺序是否逻辑正确、焦点指示器是否可见）
• 无法验证动态内容更新时 ARIA 通知的时效性
• 无法模拟真实用户的认知负荷和操作困难
• 对自定义组件的语义判断经常出错

因此，自动化测试只是第一道筛网，手动评估必须跟上。

第二部分：手动评估

手动评估旨在弥补自动化工具的盲区，覆盖需要人类判断的复杂场景。它要求测试者具有一定的同理心和辅助技术基本使用能力。

手动评估的核心维度

1. 键盘可达性

• 不用鼠标，仅使用 Tab, Shift + Tab, Enter, Space, 方向键完成所有任务。
• 验证焦点移动顺序是否符合视觉布局，是否存在“键盘陷阱”（焦点无法移出某个区域）。
• 检查所有可交互元素是否有可见的焦点指示器（outline 不能仅靠浏览器默认样式，需要高可见度）。

2. 屏幕阅读器兼容性 推荐组合：Windows 下 NVDA + Chrome，或 macOS 下 VoiceOver + Safari。

• 启动屏幕阅读器，闭上眼睛，仅靠听觉完成核心流程（如注册、搜索、购买）。
• 验证各元素的名称、角色、状态、值是否被正确朗读。
• 检查动态内容更新（如购物车数量变化、表单错误提示）是否通过 ARIA live 区域及时播报。
• 确认标题、地标（landmark）等导航结构是否合理划分。

3. 视觉与内容可读性

• 200% 缩放：将浏览器缩放至 200%，检查内容是否重叠、功能是否丢失。
• 高对比度模式：在 Windows 中开启高对比度主题，观察界面是否依然可辨认。
• 文本间距：应用自定义 CSS 增加字间距、行高、段落间距，确认内容不被截断。
• 色盲友好度：使用彩色滤镜模拟器（如 Chrome 的“渲染”工具）检查信息是否仅依赖颜色传递。

4. 表单与错误处理

• 每个输入框是否都有清晰可见的持久标签。
• 必填字段是否通过 aria-required 或标签文字明确说明。
• 实时校验的错误提示是否与出错控件关联（aria-describedby），并能被屏幕阅读器感知。
• 提交后若有错误，焦点是否自动移至第一条错误摘要。

5. 多媒体替代

• 视频是否有同步字幕或提供文字稿。
• 音频内容是否有完整文字稿。
• 纯音频或纯视频区域是否有描述视觉信息的音频描述，或者提供等效文本说明。

手动评估流程建议

创建一个可复现的测试清单，每次迭代都系统执行：

记录每个缺陷的具体表现、WCAG 条款号和重现步骤，方便开发修复。

第三部分：构建组合策略

仅仅依赖自动化或仅仅依赖手动都不足以建立可持续的无障碍实践。推荐分层递进：

• 开发阶段：IDE 插件 + 本地 axe 扫描 + 代码审查清单（人工快速核对）。
• 构建流水线：CI 中运行 Lighthouse CI 或 Pa11y，阻止严重度高的缺陷合并。
• 测试阶段：指派经过培训的 QA 人员执行完整的手动评估清单。
• 生产监控：使用定期的站点扫描工具（如 Siteimprove、Tenon 等）持续监督。

无障碍测试速查口诀

“自动找硬伤，手动验体验；
键盘须全通，读屏听觉验；
缩放触控强对比，语义状态不靠色；
表单报错及时联，多媒体件有替代。”

将上述原则融入迭代周期，你的产品就能从“技术上可访问”进化为“体验上包容”。

常用资源汇总

• Web 内容无障碍指南 (WCAG) 2.2
• axe-core 文档
• Accessibility Insights 下载
• 屏幕阅读器使用速查表（NVDA）
• 颜色对比度分析器（TPGi）
• HTML CodeSniffer，便捷的浏览器书签工具

无障碍测试没有终点，它是一种不断演进的文化。从今天起，先运行你的第一个自动化扫描，然后尝试用 Tab 键浏览自己的产品——你会立刻发现改进的机会。