使用 Auto VO 在 macOS 上自动化屏幕阅读器测试

如果您像我一样是可访问性的书呆子，或者只是对辅助技术感到好奇，那么您会选择 Auto-VO。 Auto-VO 是一个节点模块和 CLI，用于在 macOS 上使用 VoiceOver 屏幕阅读器自动测试 Web 内容。

我创建 Auto VO 是为了让开发人员、PM 和 QA 更容易使用真正的辅助技术更快地执行可重复的自动化测试，而无需担心学习如何使用屏幕阅读器。

我们走吧！

首先，让我们看看它的实际效果，然后我将更详细地了解它是如何工作的。 这是在 smasmingmagazine.com 上运行的auto-vo CLI，以获取所有 VoiceOver 输出为文本。

 $ auto-vo --url https://smashingmagazine.com --limit 200 > output.txt $ cat output.txt link Jump to all topics link Jump to list of all articles link image Smashing Magazine list 6 items link Articles link Guides 2 of 6 link Books 3 of 6 link Workshops 4 of 6 link Membership 5 of 6 More menu pop up collapsed button 6 of 6 end of list end of navigation ...(truncated)

看起来像是一个合理的页面结构：我们有跳过导航链接、结构良好的列表和语义导航。 做得好！ 让我们再深入一点。 标题结构如何？

 $ cat output.txt | grep heading heading level 2 link A Complete Guide To Accessibility Tooling heading level 2 link Spinning Up Multiple WordPress Sites Locally With DevKinsta heading level 2 link Smashing Podcast Episode 39 With Addy Osmani: Image Optimization heading level 2 2 items A SMASHING GUIDE TO Accessible Front-End Components heading level 2 2 items A SMASHING GUIDE TO CSS Generators & Tools heading level 2 2 items A SMASHING GUIDE TO Front-End Performance 2021 heading level 4 LATEST POSTS heading level 1 link When CSS Isn't Enough: JavaScript Requirements For Accessible Components heading level 1 link Web Design Done Well: Making Use Of Audio heading level 1 link Useful Front-End Boilerplates And Starter Kits heading level 1 link Three Front-End Auditing Tools I Discovered Recently heading level 1 link Meet :has, A Native CSS Parent Selector (And More) heading level 1 link From AVIF to WebP: A New Smashing Book By Addy Osmani

唔！ 我们的标题层次结构有些奇怪。 我们应该看到一个大纲，其中有一个一级标题和一个有序的层次结构。 相反，我们看到了 1 级、2 级和错误 4 级的混杂。这需要注意，因为它会影响屏幕阅读器用户浏览页面的体验。

将屏幕阅读器输出为文本非常棒，因为这种分析变得更加容易。

一些背景

VoiceOver 是 macOS 上的屏幕阅读器。 屏幕阅读器让人们可以大声朗读应用程序内容，并与内容进行交互。 这意味着弱视或盲人理论上可以访问内容，包括网络内容。 但在实践中，网络上 98% 的登录页面都有明显的错误，可以通过自动化测试和审查来捕获。

那里有许多自动化测试和审查工具，包括用于自动化代码审查的 AccessLint.com（披露：我构建了 AccessLint）和 Axe，这是自动化的常用工具。 这些工具很重要且有用，但它们只是图片的一部分。 手动测试同样或可能更重要，但它也更耗时并且可能令人生畏。

您可能已经听过“只需打开屏幕阅读器并聆听”的指导，让您了解盲人体验。 我认为这是误导。 屏幕阅读器是复杂的应用程序，可能需要数月或数年才能掌握，而且一开始会让人不知所措。 随意使用它来模拟盲人体验可能会导致您为盲人感到难过，或者更糟糕的是，尝试以错误的方式“修复”体验。

我看到人们在启用 VoiceOver 时感到恐慌，不知道如何将其关闭。 Auto-VO 为您管理屏幕阅读器的生命周期。 它可以自动启动、控制和关闭 VoiceOver，因此您不必这样做。 与其尝试听和跟上，不如将输出作为文本返回，然后您可以阅读、评估和捕获这些文本，以供以后作为错误中的参考或自动快照。

用法

警告

目前，由于需要为 VoiceOver 启用 AppleScript，这可能需要自定义配置 CI 构建机器才能运行。

场景 1：QA 和验收

假设我（开发人员）有一个带有蓝线注释的设计 - 设计人员在其中添加了对可访问名称和角色等内容的描述。 一旦我构建了该功能并在 Chrome 或 Firefox 开发工具中查看了标记，我想将结果输出到一个文本文件，以便当我将该功能标记为完成时，我的 PM 可以将屏幕阅读器输出与设计规范进行比较. 我可以使用 auto-vo CLI 执行此操作并将结果输出到文件或终端。 我们在文章前面看到了一个例子：

 $ auto-vo --url https://smashingmagazine.com --limit 100

场景 2：测试驱动开发

在这里，我再次作为开发人员，使用蓝线注释设计构建我的功能。 我想测试驱动内容，这样我就不必事后重构标记以匹配设计。 我可以使用导入到我喜欢的测试运行器（例如 Mocha）中的 auto-vo 节点模块来做到这一点。

 $ npm install --save-dev auto-vo import { run } from 'auto-vo'; import { expect } from 'chai'; describe('loading example.com', async () => { it('returns announcements', async () => { const options = { url: 'https://www.example.com', limit: 10, until: 'Example' }; const announcements = await run(options); expect(announcements).to.include.members(['Example Domain web content']); }).timeout(5000); });

引擎盖下

Auto-VO 结合使用 shell 脚本和 AppleScript 来驱动 VoiceOver。 在深入研究 VoiceOver 应用程序时，我遇到了一个支持从命令行启动 VoiceOver 的 CLI。

 /System/Library/CoreServices/VoiceOver.app/Contents/MacOS/VoiceOverStarter

然后，一系列 JavaScript 可执行文件管理 AppleScript 指令以导航和捕获 VoiceOver 公告。 例如，此脚本从屏幕阅读器公告中获取最后一个短语：

 function run() { const voiceOver = Application('VoiceOver'); return voiceOver.lastPhrase.content(); }

结束时

我很想听听您对auto-vo的体验，并欢迎在 GitHub 上做出贡献。 试试看，让我知道它是怎么回事！