HTML Academy · 课时

使用屏幕阅读器进行测试

Q: 「使用屏幕阅读器进行测试」这节课中我会学到什么？

使用 VoiceOver 和 NVDA 验证 ARIA 实现 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 VoiceOver 和 NVDA 验证 ARIA 实现

使用屏幕阅读器进行测试 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

为什么要使用屏幕阅读器进行测试？

自动化工具只能发现 30% 到 40% 的无障碍问题。通过真实的屏幕阅读器测试，可以发现自动化检查遗漏的问题：

令人困惑的阅读顺序
没有帮助的 ARIA 播报
缺少焦点管理
令人困惑的交互模式

Mac 上的 VoiceOver

VoiceOver 已内置于 macOS 中——无需安装：

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

iOS 上的 VoiceOver

在 iPhone/iPad 上使用 VoiceOver 测试移动端屏幕阅读器体验：

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

Windows 上的 NVDA

NVDA 是一款免费的 Windows 开源屏幕阅读器：

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

屏幕阅读器测试清单

使用屏幕阅读器时需要验证的内容：

页面加载时会播报页面标题
标题会形成合理的导航结构
所有图片都有有意义的 alt 文本，或使用空 alt 文本
所有表单字段都有标签
按钮和链接都有描述性名称
模态框焦点陷阱运行正常
动态内容更新会被播报

常见的屏幕阅读器问题

自动化测试会遗漏的问题：

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

键盘优先测试

使用屏幕阅读器之前，先只测试键盘操作：

拔掉鼠标或触控板
仅使用 Tab 浏览整个页面
确认每个交互元素都可以访问
确认所有操作都可以通过键盘完成

自动化无障碍测试工具

使用自动化工具补充手动测试：

axe DevTools ——Chrome 扩展；准确性最高的自动化检查工具
WAVE ——wavebooth.com；在页面上显示可视化覆盖层
Lighthouse ——Chrome DevTools；用于性能和无障碍审计
pa11y ——CLI 工具；非常适合 CI/CD 流水线

ARIA 模式参考

W3C ARIA 编写实践指南（APG）提供了参考实现：

手风琴、警报、警报对话框
面包屑、按钮、轮播
复选框、组合框、对话框
披露、Feed、网格
列表框、菜单、菜单栏
选项卡、工具提示、树视图

网址：w3.org/WAI/ARIA/apg/

持续无障碍集成

将无障碍测试纳入您的工作流程：

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

测试总结

完整的无障碍测试策略：

设计——检查颜色对比度和触控目标大小
开发——进行键盘测试和自动化 axe 扫描
评审——进行屏幕阅读器测试（VoiceOver + NVDA）
CI/CD——在自动化流水线中运行 pa11y 或 axe
生产——运行 Lighthouse 并进行手动抽查

快速检查

自动化工具能够可靠地发现百分之多少的无障碍问题？

复习：屏幕阅读器测试

测试要点：

VoiceOver（Mac/iOS）和 NVDA（Windows）免费且不可或缺
先进行纯键盘测试，再加入屏幕阅读器测试
自动化工具：axe、WAVE、Lighthouse、pa11y
自动化测试只能发现约 30% 到 40% 的问题
参考 APG 模式以正确实现 ARIA

常见问题解答

「使用屏幕阅读器进行测试」课时是免费的吗？

是的 — 「使用屏幕阅读器进行测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「使用屏幕阅读器进行测试」这节课中我会学到什么？

使用 VoiceOver 和 NVDA 验证 ARIA 实现你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用屏幕阅读器进行测试」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

用于切换控件的 aria-expanded 和 aria-controls
aria-selected 与标签页模式
实时区域：aria-live、aria-atomic、aria-relevant
使用屏幕阅读器进行测试

← 返回 HTML Academy