キーボードとスクリーンリーダーのテストを順を追って解説
キーボードとスクリーンリーダーのテスト
キーボードとスクリーンリーダーのテスト手順 | We.Inc
どのサイトにも使える手動テスト手順。キーボード操作の確認、NVDAとVoiceOverのコマンド、スキップリンク、:focus-visibleのCSS、チェックできるリストを紹介します。
キーボードでサイトをテストするには、マウスを手放し、Tab、Shift+Tab、Enter、Space、矢印キーだけですべての要素に移動して操作します。その際、フォーカスリングが見えているか、順序が自然かを確認します。次にスクリーンリーダー（WindowsならNVDA、MacならVoiceOver）を起動し、見出し、リンク、ボタン、フォーム項目がわかりやすく読み上げられるかを確認します。
これらのテストで確認するWCAG 2.2の達成基準
- 2.1.1 キーボード
- マウスなしですべて操作できる
- 2.1.2 キーボードトラップなし
- フォーカスをいつでも外へ移動できる
- 2.4.1 ブロックスキップ
- 繰り返し表示されるナビゲーションを飛ばす手段がある
- 2.4.3 フォーカス順序
- Tabの順序がページの意味に沿っている
- 2.4.7 フォーカスの可視化
- AA
- フォーカスの位置が常に見える
- 2.4.11 フォーカスが隠されない（最低限）
- AA
- 固定バーがフォーカス中の要素を隠さない
- 4.1.2 名前・役割・値
- コントロールが何であるかと状態を読み上げる
自動チェッカーは代替テキストの欠落や低いコントラストを見つけられますが、メニューをEnterで開けるか、スクリーンリーダーの利用者がフォームを理解できるかまでは判断できません。このページでは手動テストを順番に進めます。どの要素にフォーカスがあるかを正確に表示する練習エリアと、進み具合を記録できるチェックリストも用意しています。
- テストしたいページを別のタブで開き、このチェックリストを横に置いておきます。
- まずキーボードの手順を進め、各項目にチェックを入れます。進捗の数は自動で更新されます。
- ここにある練習エリアで予行演習をしましょう。Tabで移動すると、フォーカストラッカーがフォーカス中の要素の名前を表示します。
- 次に、表のコマンドを使ってスクリーンリーダーを起動し、同じ操作を耳で聞きながら繰り返します。
- スキップリンクとフォーカススタイルのコードをコピーして、よくある不具合を修正します。
- すべてのページではなく、主要な操作の流れをテストしましょう。メニュー、検索、メインのフォーム、購入や予約の手続き、ダイアログなどです。
- ブラウザーを200%に拡大してTabで移動してみましょう。拡大時にはフォーカスリングと固定ヘッダーが重なりがちです。
- 標準のアウトラインを消す場合は、同じルールの中で代わりのスタイルを指定しましょう。outline: noneだけを残してはいけません。
- 本物のbutton要素とa要素を使いましょう。クリックできるdivはTabで飛ばされ、ただのテキストとして読み上げられます。
- 何かを変更する前に、フォーム全体をスクリーンリーダーで聞いてみましょう。ラベルの欠落は耳で聞くとすぐにわかります。
よくある質問
どのスクリーンリーダーでテストすればよいですか？
できるだけ訪問者が使っているものを選びましょう。NVDAはNV Accessが提供するWindows用の無料ソフトで、VoiceOverはすべてのMacとiPhoneに標準搭載されています。アクセスの大半がスマートフォンからなら、iPhoneのVoiceOverかAndroidのTalkBackでのテストも加えましょう。
NVDAとVoiceOverはどうやって起動・終了しますか？
NVDAはインストール後、Control+Alt+Nで起動し、Insert+Qで終了します。Macでは、Command+F5でVoiceOverのオンとオフを切り替えます。Controlを単独で押すと、NVDAの読み上げを途中で止められます。
スキップリンクとは何ですか？
ページの最初にあるリンクで、通常はフォーカスを受けるまで隠れており、メインコンテンツへ直接ジャンプします。これによりキーボード利用者は、ページごとにナビゲーション全体をTabで移動せずに済みます。WCAGでは、ランドマークや見出しと並んで、2.4.1 ブロックスキップを満たす十分な達成方法の1つとされています。
:focusと:focus-visibleのどちらを使うべきですか？
:focus-visibleを使うと、フォーカスリングが必要な場面をブラウザーが判断します。そのため、キーボード利用者にはリングが表示され、ボタンをマウスでクリックしたときには通常表示されません。MDNによると、2022年3月から幅広くサポートされています。:focus-visibleにスタイルを指定し、すべての操作可能な要素に見えるリングを残しましょう。
キーボードトラップとは何ですか？
フォーカスが入り込んだまま、キーボードでは抜け出せなくなる場所のことです。埋め込みプレーヤーや、Tabを横取りする独自ダイアログなどが例です。モーダルダイアログは開いている間フォーカスを内側に保つべきですが、Escapeか閉じるボタンで必ず抜け出せるようにする必要があります。
ブラウズモードとフォーカスモード
- スクリーンリーダーはWebページを仮想バッファーで読み、1文字のキーで移動します。NVDAではHで次の見出し、Kで次のリンクへ移動します。テキスト入力欄に入ると、文字を入力できるようにフォーカスモードへ切り替わります。NVDA+Spaceで2つのモードを手動で切り替えられます。
- 矢印キーにしか反応しない独自ウィジェットが壊れているように見えるのはこのためです。ブラウズモードでは、スクリプトが受け取る前にスクリーンリーダーがキーを消費してしまうことがあります。ネイティブ要素を使うか、ARIA Authoring Practicesのパターンに従いましょう。
正しい読み上げの例
- 各コントロールは、名前、役割、必要に応じて状態の順に読み上げられるべきです。例：「検索、編集テキスト」「メニュー、ボタン、折りたたみ」「購読、チェックボックス、チェックなし」。この3つのどれかが欠けていたら、ARIAを足す前にマークアップを修正しましょう。
- 見出しは、目次として読めるアウトラインになっているべきです。NVDAの要素リストやVoiceOverのローターで見出し一覧を開き、それだけで意味が通るか確認しましょう。
見つけた問題の記録
- 問題ごとに、ページ、手順、期待した結果、実際の結果、そして満たしていない達成基準を書きます。この形式なら、開発者が推測せずに再現できます。
- 修正後は同じ手順で再テストしましょう。特にフォーカスの問題は、ヘッダーやモーダルのスタイルを変えたときに再発しがちです。
キーボードのみのテストで使うキー
ブラウザーの標準的なキーボード動作
- Tab / Shift+Tab
- 次または前のフォーカス可能な要素へ移動する
- Space
- ボタンを押す、チェックボックスにチェックを入れる、何もフォーカスされていなければページをスクロールする
- 矢印キー
- ラジオグループ、セレクト、メニュー、タブリストの中を移動する
- Escape
- ダイアログ、メニュー、ポップアップを閉じる
NVDAのコマンド（Windows、デスクトップ配列）
NVDAキーは標準ではInsertです。ユーザーガイドではCaps Lockも使えるとされています。1文字キーはブラウズモードで使えます。
NVDAユーザーガイドより
- ここから読み上げ（すべて読み）
- NVDA+Down Arrow
- ブラウズモードとフォーカスモードを切り替え
- NVDA+Space
- 要素リスト（リンク、見出し、ランドマーク）
- NVDA+F7
VoiceOverのコマンド（Mac）
VOはVoiceOverの修飾キーを意味します。ControlとOptionを同時に押すか、Caps Lockを単独で押します。
AppleのVoiceOverユーザーガイドより
- VoiceOverのオン・オフ
- Command+F5
- ローターの一覧を切り替え（見出し、リンクなど）
- ローター内で左または右矢印キー
- 選んだ一覧の中を移動
- ローター内で上または下矢印キー
よくある不具合の修正方法
スキップリンク
結果の中をクリックしてからTabを押してください。リンクはフォーカスされたときだけ表示され、移動先はmain要素です。
キーボード利用者にだけ見えるフォーカスリング
結果の中のボタンへTabで移動してください。オフセットしたリングはボタンの縁から離れて表示され、マウスでクリックした場合は通常表示されません。
フォーカス中の要素を固定ヘッダーの下に隠さない
scroll-padding-topは、ブラウザーがフォーカス中の要素やアンカーまでスクロールするときに、上部にスペースを確保します。
キーボードのみ
- ページ読み込み後にTabを1回押す
- スキップリンクが表示され、Enterで機能する
- ページ全体をTabで移動する
- すべてのリンク、ボタン、入力欄に読む順序どおりに到達できる
- 移動のたびにフォーカスリングを確認する
- 常に見えていて、固定ヘッダーの裏に隠れない
- メニューやドロップダウンを開く
- EnterかSpaceで開き、Escapeで閉じてフォーカスが戻る
- 独自ウィジェットを操作する
- タブ、スライダー、カルーセルが想定どおりのキーに反応する
- ダイアログを開いて閉じる
- フォーカスが中に移り、内側にとどまり、閉じた後は開いたボタンに戻る
- メインのフォームに入力して送信する
- エラーに到達でき、フォーカスが適切な場所に移る
- 抜け出せなくなる場所を探す
- 埋め込みやウィジェットがフォーカスを閉じ込めない
スクリーンリーダー
- ページタイトルと最初の見出しを聞く
- どのページにいるかがわかる
- 見出し一覧を開く
- 見出しがh1を1つ含む自然なアウトラインになっている
- ランドマーク一覧を開く
- バナー、ナビゲーション、メイン、フッターの領域がある
- リンクを順に移動する
- 各リンクのテキストが前後の文脈なしでも意味が通る
- 各フォーム項目に移動する
- すべての項目がラベル、種類、必須かどうかを読み上げる
- エラーメッセージと完了メッセージを表示させる
- マウスを動かさなくても両方が読み上げられる
- 画像を確認する
- 情報を伝える画像には代替テキストがあり、装飾画像は読み上げられない
- ボタンやチェックボックスを切り替える
- 展開やチェック済みなどの新しい状態が読み上げられる
テストチェックリスト
リセット
テストしながら各手順にチェックを入れましょう。チェックはこのページにだけ保存されます。
{total}件中{n}件完了
ページ内のどの要素にもフォーカスがありません
{t}入力欄
アクセシブルな名前がありません
Tabでエリアに入ると開始します
フォーカス練習エリア
これらのコントロールをTabで移動してください。トラッカーが現在フォーカスのある要素の名前を表示します。
本物のリンク
本物のボタン
パネルを閉じる
メールアドレス
クリックできるdiv（Tabでは飛ばされます）
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る