アクセシビリティ監査のためのスクリーンリーダーテストガイド
WCAG 2.1準拠のためのスクリーンリーダーテストの実践ガイド。VoiceOver、NVDA、JAWSのテスト手順、一般的なコマンド、何を聞くべきかをカバー。
詳細な説明
アクセシビリティのためのスクリーンリーダーテスト
スクリーンリーダーテストは、ウェブサイトが視覚障害のあるユーザーに機能することを確認する最も効果的な方法です。自動ツールは多くの問題をキャッチしますが、体験が実際にどのように聞こえ、感じられるかはスクリーンリーダーテストだけが明らかにします。
テストすべきスクリーンリーダー
| スクリーンリーダー | プラットフォーム | 使用率 |
|---|---|---|
| NVDA | Windows | ~40% |
| JAWS | Windows | ~30% |
| VoiceOver | macOS/iOS | ~25% |
| TalkBack | Android | ~5% |
ほとんどのチームにとって、VoiceOver + Safari(macOS)とNVDA + Firefox(Windows)でのテストがスクリーンリーダーユーザーの大多数をカバーします。
基本的なVoiceOverコマンド(macOS)
- VOキー: Ctrl + Option(同時押し)
- VoiceOver開始/停止: Cmd + F5
- 次の要素にナビゲート: VO + 右矢印
- 前の要素にナビゲート: VO + 左矢印
- 要素を操作: VO + Space
- すべてのコンテンツを読み上げ: VO + A
- ローターを開く: VO + U(見出し、リンク、ランドマークをブラウズ)
テスト項目
ページ構造 — 見出しでナビゲート(NVDAではHキー)。見出し階層が意味をなすか確認。
リンクとボタン — リンクでナビゲート(NVDAではKキー)。リンクテキストが説明的か確認。
画像 — 情報的画像の代替テキストが読み上げられ、装飾的画像がスキップされることを確認。
フォーム — 各フィールドにナビゲート。ラベルが通知され、必須ステータスが示され、エラーが通知されることを確認。
動的コンテンツ — AJAX更新、通知、エラーメッセージをトリガー。ライブリージョン経由で通知されることを確認。
ランドマーク — ランドマークでナビゲート(NVDAではDキー)。main、nav、banner、contentinfoリージョンの存在を確認。
テーブル — テーブルセルをナビゲート。列と行のヘッダーが正しく通知されることを確認。
スクリーンリーダーテストでのみ見つかる一般的な問題
- 要素に視覚的にフォーカスがあるが、スクリーンリーダーが間違った内容を通知
- 意味のある可視テキストをオーバーライドするARIAラベル
- 頻繁すぎる、またはまったく通知しないライブリージョン
- 線形にナビゲートすると混乱するカスタムウィジェット
ユースケース
スクリーンリーダーテストはメジャーリリースごとに少なくとも1回実行すべきです。アクセシビリティスペシャリストはスクリーンリーダーを主要なテストツールとして使用します。スクリーンリーダーテストが初めてのチームは、macOSのVoiceOver(ビルトインでインストール不要)から始めて、最も重要なユーザーフローをテストしてください。
試してみる — Accessibility Audit Checklist
Perceivable
Operable
Understandable
Robust
50 criteria shown · Click the status badge to cycle through Pass / Fail / N/A / Untested