oss

NVDA 让你听见 HTML 实际交付的界面

7 条来源 4 条一手来源 已翻译 2026年7月27号

正文
NV Access 创始人 Jamie Teh 与 Michael Curran 笑着并肩坐在桌前,用手触摸一台盲文图形显示器原型。

NV Access 创始人 Jamie Teh 与 Michael Curran 正在测试一台盲文图形显示器原型。Kate Wilson 为 Australian Story 拍摄。[7]

视频模式

本文包含 1 个可跳转的视频片段。

  1. 1 Matt Isner 为网页开发者演示 NVDA 屏幕阅读器测试流程 YouTube 视频

网页界面的无障碍程度,无法由可见控件是否齐整或自动扫描的问题清单长短来证明。真正决定体验的那层界面,由标题、路标、标签、状态、焦点顺序与实时更新重新拼合,再以语音或盲文送到用户手中。这个重建结果一旦混乱,外表精致的页面与已经损坏的页面,交付的就是同一个产品。

Deque Systems 的 20 分钟教程 “Accessibility Testing with the NVDA Screenreader”(用 NVDA 屏幕阅读器测试无障碍),是理解这层界面的一条紧凑入口。主讲人 Matt Isner 安装并配置这款开源 Windows 屏幕阅读器,打开朗读查看器(Speech Viewer),显示当前目标,讲解浏览模式(Browse Mode)与焦点模式(Focus Mode),最后用它检验无障碍修复。[1] 具体操作已经有些年头,个别菜单细节也已变化。测试思路延续至今:让 NVDA 对界面的解读清楚可见,了解屏幕阅读器用户如何移动,并用键盘验证行为,把目光从指针上移开。

这套测试关乎产品的主要界面,远超小众的兼容性仪式。WebAIM 在 2024 年调查了 1,539 名屏幕阅读器用户,其中 65.6% 表示经常使用 NVDA,71.6% 表示在长页面中查找信息时,会首先使用标题导航。WebAIM 提醒,调查样本未经控制,因此这些数字应当视为信号,不能当作普遍适用的市场份额。它们依然说明,语义化 HTML 是实际产品的一部分,作用远远超出文档修饰。[6]

图片背景:封面照片中的 NVDA 创始人 Jamie Teh 与 Michael Curran 正用手触摸一台盲文图形显示器原型。他们的项目始于一个现实问题:一款商业屏幕阅读器的价格足以超过电脑本身;此后,项目在盲人主导的开发与志愿者翻译中逐步成长。这张照片让文章落回可访问性树末端真正接收信息的人与硬件。[5][7]

约 2:20,朗读查看器让输出可供检查,记录仍只覆盖一部分

教程首先打开朗读查看器:这个窗口会显示 NVDA 正在发送给语音合成器的文本。[1] 对看得见屏幕的开发者来说,它立刻就能派上用场。一个含义模糊的图标按钮会变成没有名称的“button”;制作妥当时则会显示“Search, button”。装饰图片处理得当时会按预期从输出中消失;处理失当时,文件名会泄漏进阅读顺序。开发者可以把输出复制到缺陷报告里,对照补丁前后的变化。

这种便利也有局限。NVDA 当前的用户指南仍然收录朗读查看器,WebAIM 的测试指南也推荐用它查看屏幕阅读器读出的内容。[2][3] 无障碍专家 Sara Soueidan 同时提醒,记录并不总能完整呈现实际播报内容。[4] 时序、停顿、提示音、盲文输出、键盘行为,以及某条播报与触发它的动作之间的关系,单靠文本样本无法可靠保留。

朗读查看器的价值在于追踪线索,不能替代最终判定。它能帮助开发者找出组件的可见标签、程序化名称、角色、状态与描述开始分岔的位置。任务能否由人顺利完成,还需要另行验证。更扎实的回归记录会把这份追踪文本、准确的键盘路径与预期状态变化写在一起:“按 Enter 打开对话框;焦点移至其标题;提交后播报错误;按 Escape 关闭;焦点返回触发控件。”这里记录的是可以复测的行为,截图旁的一段解说达不到同样的证明力度。

约 6:30,两种模式揭示只按 Tab 键检查会漏掉什么

接下来,教程转向 NVDA 的浏览模式与焦点模式。[1] 在浏览模式下,NVDA 将页面呈现为一份虚拟文档,并把普通按键留给文档导航:H 在标题间移动,D 在路标间移动,其他快捷键可直达链接、列表、表格、图形与表单字段。进入焦点模式后,按键会传给当前控件,用户由此在编辑框中输入文字,或操作具有应用程序特征的组件。自动选择不合适时,可以用 NVDA+Space 切换模式。[2]

这种分工暴露了一个常见的工程错误。只用 Tab 键遍历页面,只会检验可聚焦的控件,文档本身仍未受到检验。测试者可以到达每一个按钮,同时漏掉混乱的标题层级、重复的链接名称、插入阅读顺序错误位置的内容,或缺少有效路标的区域。另一方向的故障也存在:使用方向键阅读正文时一切听来顺畅,走到自动补全框、树形控件或自定义列表框,用户却被困在焦点模式中,或预期按键毫无反应。

WebAIM 的指南同样把阅读和导航与表单交互分开:单键导航命令用于穿行文档,Tab、方向键、Space 与 Enter 则负责操作控件。[3] 这项区别会带出一组更准确的审查问题。元素有没有被播报?Tab 能否到达?方向键在内部是否有效?控件需要接收自己的按键时,NVDA 会不会进入焦点模式?这些问题对应同一组件中的不同路径。一场可信的测试会遍历两种模式,同时明确自己正在检验哪条路径。

视频中的附加组件已经过时,调试原则仍然有效

这段 2016 年的录像建议安装 Focus Highlight 附加组件,让看得见屏幕的测试者看到 NVDA 正在追踪什么。[1] 现代 NVDA 已在“视觉”设置中内置高亮显示(Visual Highlight),额外安装附加组件早已不再是常规配置。[4] 这种变化恰好说明,旧工具教程若被当作安装脚本照做,容易带来风险;若作为工程记录观看,其中仍有价值。

始终有效的原则,是让不同视角下的信息都可观察。朗读查看器把播报文本写入窗口。高亮显示功能则把系统焦点、导航对象位置,以及浏览模式的虚拟光标显示给跟随屏幕的测试者。[2][4] 两项功能都不会改变无障碍体验。结对测试时,有视力的审查者认定的当前对象,便能与 NVDA 实际选中的对象直接对照。

开源在这里有很实际的作用,浪漫想象可以搁在一边。Curran 于 2006 年开始开发 NVDA,随后邀请 Teh 加入;两人在 2007 年成立慈善组织 NV Access,让屏幕阅读器保持免费,也能持续回应盲人用户的需要。[5] 当前的文档、附加组件系统、问题追踪器、翻译与发布节奏,让这件测试工具本身可供检查,也能广泛分发。一次 NVDA 测试的代表范围有限,无法覆盖 JAWS、VoiceOver、TalkBack、所有浏览器或每位用户的设置。任何 Windows 团队都能越过许可证门槛,认真完成一次初步测试。

约 13:30,快捷键导航让 HTML 标记成为产品导航

到了后半段的键盘操作,视频从设置说明转入开发者真正负责的那层界面。[1] NVDA+F7 会打开“元素列表”,其中收集链接、标题、表单字段、按钮与路标;单字母命令则可以在不同语义类型之间直接移动。[2][3] 它们就是页面的另一组索引,作用远超熟练用户的装饰性功能。

WebAIM 的调查把影响写成了具体数字。在长页面上查找信息时,71.6% 的受访者首选标题导航;88.8% 认为标题级别非常有用或有一定用处。[6] 开发者若只看字号是否合适便选定标题级别,用户最主要的导航层级就会受到破坏。20 个“阅读更多”链接放在 20 张视觉卡片旁边尚能辨认,进入链接列表后却失去用途。用背景图片绘制的按钮,在视觉上十分醒目,在程序中却没有名称。

修复时,ARIA 通常应当做减法。先采用原生 HTML 的标题、按钮、链接、标签、列表与表单控件;保持合乎逻辑的 DOM 顺序;可见内容没有给出名称时,再补上程序化名称;只有交互确有需要时,才加入状态与实时区域语义。随后把结果放回上下文中,亲耳听一遍。这里要检验的是,快捷键索引和顺序阅读路径能否凭借足够的信息支持真实任务;朗读查看器打印了多少属性,不是衡量标准。

最后几分钟,沿原路径重测,验证修复是否生效

教程最后用配置好的屏幕阅读器检验无障碍修复。[1] 这段次序比任何一个快捷键都更重要。先确定一项任务和一条可复现的路径,记录 NVDA 播报的内容与焦点移动的位置。修改组件,再刷新页面或重置相关状态。分别在浏览模式和焦点模式中沿同一路径重走一遍。最后收起鼠标带来的视觉捷径,再尝试完成任务。

团队还要明确测试的适用条件。NVDA 是 Windows 屏幕阅读器,结果也会随浏览器变化:WebAIM 的调查发现,NVDA 与 Chrome、NVDA 与 Firefox 都是常见组合。[6] 受过训练的有视力测试者能够发现名称缺失、结构损坏、更新无声以及焦点失灵,却无法把一次工具测试转化为亲身经验。关键流程仍会从残障用户测试中受益,跨平台产品还需要覆盖 VoiceOver 与 TalkBack。[4][6]

这段视频留下的价值,远超“安装 NVDA,然后给页面盖章”。它示范了一条更好的反馈回路。自动检查找出机器能够识别的违规项,NVDA 则揭示这些规则试图保护的语义界面。朗读查看器与高亮显示帮助开发者调试这层界面。浏览模式、焦点模式和结构快捷键分别检验穿行其中的不同路径。最终,人的实际使用决定这些路径是否真正通向可访问的体验。

来源

  1. Deque Systems,Matt Isner 主讲,“Accessibility Testing with the NVDA Screenreader”(用 NVDA 屏幕阅读器测试无障碍),YouTube 视频。
  2. NV Access,“NVDA 2026.1.1 User Guide”(NVDA 2026.1.1 用户指南)——Speech Viewer、浏览模式、焦点模式、输入手势、Visual Highlight 与元素列表的现行参考资料。
  3. WebAIM,“Using NVDA to Evaluate Web Accessibility”(使用 NVDA 评估网页无障碍)——仅用键盘的测试、Speech Viewer、快捷导航、表单、图片以及浏览/焦点模式。
  4. Sara Soueidan,“Setting up a screen reader testing environment on your computer”(在电脑上配置屏幕阅读器测试环境)——有关 Visual Highlight、Speech Viewer 的局限、浏览器组合与人工测试的独立指南。
  5. Andrew Kidd Fraser,“Software by the blind, for the blind”(由盲人开发、为盲人服务的软件),昆士兰大学《Contact Magazine》,2020 年——项目历史、盲人主导的开发、免费分发与志愿者翻译。
  6. WebAIM,“Screen Reader User Survey #10 Results”(第 10 次屏幕阅读器用户调查结果),2024 年 2 月——使用情况、浏览器组合、标题导航行为与抽样注意事项。
  7. Kristine Taylor 与 Susan Chenery,“How friendship between NVDA founders Mick Curran and Jamie Teh is changing lives for thousands of blind people”(NVDA 创始人 Mick Curran 与 Jamie Teh 的友谊如何改变成千上万盲人的生活),ABC News/Australian Story,2023 年——项目背景,以及 Kate Wilson 拍摄的两位创始人测试盲文图形显示器的照片。
Previous BlueROV2 的四个控制层共用一根系缆

Recommended In oss

Matched by subject and format