使用 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 上做出貢獻。 試試看，讓我知道它是怎麼回事！