アクセシビリティ監査のためのスクリーンリーダーテストガイド

WCAG 2.1準拠のためのスクリーンリーダーテストの実践ガイド。VoiceOver、NVDA、JAWSのテスト手順、一般的なコマンド、何を聞くべきかをカバー。

Component Audits

詳細な説明

アクセシビリティのためのスクリーンリーダーテスト

スクリーンリーダーテストは、ウェブサイトが視覚障害のあるユーザーに機能することを確認する最も効果的な方法です。自動ツールは多くの問題をキャッチしますが、体験が実際にどのように聞こえ、感じられるかはスクリーンリーダーテストだけが明らかにします。

テストすべきスクリーンリーダー

スクリーンリーダー プラットフォーム 使用率
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(見出し、リンク、ランドマークをブラウズ)

テスト項目

  1. ページ構造 — 見出しでナビゲート(NVDAではHキー)。見出し階層が意味をなすか確認。

  2. リンクとボタン — リンクでナビゲート(NVDAではKキー)。リンクテキストが説明的か確認。

  3. 画像 — 情報的画像の代替テキストが読み上げられ、装飾的画像がスキップされることを確認。

  4. フォーム — 各フィールドにナビゲート。ラベルが通知され、必須ステータスが示され、エラーが通知されることを確認。

  5. 動的コンテンツ — AJAX更新、通知、エラーメッセージをトリガー。ライブリージョン経由で通知されることを確認。

  6. ランドマーク — ランドマークでナビゲート(NVDAではDキー)。main、nav、banner、contentinfoリージョンの存在を確認。

  7. テーブル — テーブルセルをナビゲート。列と行のヘッダーが正しく通知されることを確認。

スクリーンリーダーテストでのみ見つかる一般的な問題

  • 要素に視覚的にフォーカスがあるが、スクリーンリーダーが間違った内容を通知
  • 意味のある可視テキストをオーバーライドするARIAラベル
  • 頻繁すぎる、またはまったく通知しないライブリージョン
  • 線形にナビゲートすると混乱するカスタムウィジェット

ユースケース

スクリーンリーダーテストはメジャーリリースごとに少なくとも1回実行すべきです。アクセシビリティスペシャリストはスクリーンリーダーを主要なテストツールとして使用します。スクリーンリーダーテストが初めてのチームは、macOSのVoiceOver(ビルトインでインストール不要)から始めて、最も重要なユーザーフローをテストしてください。

試してみる — Accessibility Audit Checklist

Perceivable

0%(0/20 tested)
0 pass0 fail

Operable

0%(0/17 tested)
0 pass0 fail

Understandable

0%(0/10 tested)
0 pass0 fail

Robust

0%(0/3 tested)
0 pass0 fail
Level A:0/30 pass
Level AA:0/19 pass
Level AAA:0/1 pass

50 criteria shown · Click the status badge to cycle through Pass / Fail / N/A / Untested

Perceivable

Operable

Understandable

Robust

フルツールを開く