スキル自身の言葉で
macOS、Windows、iOS、Androidの各プラットフォームでVoiceOver、NVDA、JAWS、TalkBack、Narratorといったスクリーンリーダーを使用してWebアプリケーションをテストします。実際のスクリーンリーダーを用いたハンズオンテストにより、スクリーンリーダーとの互換性を検証し、支援技術に関する問題をデバッグし、適切なARIA実装を確認します。
ナビゲーション、フォーム、動的コンテンツのアナウンス、フォーカス管理、モーダルダイアログを対象とします。プラットフォーム固有のコマンド、テストチェックリスト、一般的なアクセシビリティパターンのコード例を提供します。異なるスクリーンリーダーモード（ブラウズ、フォーカス、アプリケーション）でのテストを重視し、ARIAを補助的な強化として用いたセマンティックHTMLを優先します。
生成されるもの
- ページ読み込み、ナビゲーション、リンク、フォーム、動的コンテンツ、テーブルを対象とするVoiceOverテストチェックリスト
- 初期読み込み、ランドマーク、見出し、フォーム、インタラクティブ要素、動的コンテンツについての段階的な手順を示すNVDAテストスクリプト
- ラベルのないボタン、通知されない動的コンテンツ、フォームエラーなど、よくある問題に対するアクセシブルなパターンと修正方法を示す HTML コード例
- モーダルダイアログ、フォーカストラップ、タブインターフェースのキーボードナビゲーションを含むフォーカス管理用のJavaScriptコード
仕組み
- 01プラットフォームごとに主要なスクリーンリーダーでテストする
Windows上のFirefoxでNVDA（使用率31%）、macOSおよびiOS上のSafariでVoiceOver（使用率15%）、ChromeでJAWS（使用率40%）、AndroidでTalkBack（使用率10%）、EdgeでNarrator（使用率4%）を使用します。
- 02スクリーンリーダー固有のコマンドでナビゲートする
VoiceOverの要素ナビゲーションにはVO+右矢印、NVDAの見出しジャンプにはH、JAWSのリンク一覧にはInsert+F7、TalkBackのスクロールには2本指スワイプといったコマンドを実行します。
- 03ブラウズモードとフォーカスモードでテストする
コンテンツを読むためのブラウズモードとフォームコントロールを操作するためのフォーカスモードの間で、スクリーンリーダーが正しく切り替わることを確認し、モードのアナウンスに注意します。
- 04セマンティック構造とARIAを検証する
見出しがローターや要素リストから発見可能であること、ランドマークが適切にラベル付けされていること、ライブリージョンが更新をアナウンスすること、dialog、tab、progressbarなどのロールが正しく実装されていることを確認します。
- 05フォーカス管理とキーボード操作を確認する
フォーム送信後にフォーカスがエラーに移動すること、モーダルがフォーカスを正しくトラップし閉じたときにフォーカスを返すこと、タブインターフェースが矢印キー、Home、Endに応答することを確認します。
- 06動的コンテンツのアナウンスをテストする
コンテンツの更新をトリガーし、role="status"とaria-live="polite"が現在の発話の後に変更をアナウンスすること、role="alert"が即座に割り込むことを確認します。