AutoVOを使用したmacOSでのスクリーンリーダーテストの自動化

あなたが私のようなアクセシビリティオタクである場合、または支援技術に興味がある場合は、Auto-VOを掘り下げてください。 Auto-VOは、macOSのVoiceOverスクリーンリーダーを使用してWebコンテンツを自動テストするためのノードモジュールおよびCLIです。

Auto VOを作成したのは、開発者、PM、およびQAが、スクリーンリーダーの使用方法を学ぶという脅迫的な要因なしに、実際の支援技術を使用して繰り返し可能な自動テストをより迅速に実行できるようにするためです。

さあ行こう！

まず、実際の動作を見てみましょう。次に、その動作について詳しく説明します。 smashingmagazine.comでauto-voを実行して、すべての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つの見出しレベル1と、その後の順序付けられた階層を含むアウトラインを確認する必要があります。 代わりに、レベル1、レベル2、および誤ったレベル4のミッシュマッシュが少し見られます。これは、スクリーンリーダーのユーザーがページをナビゲートするエクスペリエンスに影響を与えるため、注意が必要です。

この種の分析がはるかに簡単になるため、スクリーンリーダーをテキストとして出力することは素晴らしいことです。

いくつかの背景

VoiceOverは、macOSのスクリーンリーダーです。 スクリーンリーダーを使用すると、アプリケーションのコンテンツを読み上げたり、コンテンツを操作したりできます。 つまり、視力の弱い人や目の見えない人は、理論的にはWebコンテンツを含むコンテンツにアクセスできます。 ただし、実際には、Web上のランディングページの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は、シェルスクリプトと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への投稿を歓迎します。 試してみて、どうなるか教えてください！