この記事は WAIC（ウェブアクセシビリティ基盤委員会） の公式見解ではなく、nishimotz の個人的なオススメであることをお断りしておきます。
WAIC が公開している as_testリポジトリ （ASテスト）では、ウェブコンテンツのアクセシビリティ実装を検証するためのテストファイルを作っています。私はこの「アクセシビリティ・サポーテッド」に関するワーキンググループの主査をやっています。
本来 AS テストは、技術的な検証と報告のためのものですが、この記事では、アクセシビリティチェックをしたいスクリーンリーダー初心者の方に向けて、 NVDA の操作の練習に使いやすいと思うものを紹介します。
テストそのものは他のスクリーンリーダー、例えば macOS / iOS の VoiceOver の学習にも使えると思います。
ブラウズモード
スクリーンリーダー NVDA でウェブページを読むときに重要なのは NVDA の「ブラウズモード」です。（ナレーターではスキャンモードに相当します）
ブラウズモードではいろいろな機能が使えますが、公式ドキュメントに明確に書かれていないにもかかわらず重要なのが「上矢印キー」と「下矢印キー」です。
上下矢印キーだけでウェブコンテンツの中を移動して読むことができます。このとき、どこを読んでいるのか、何を読んでいるのか、わかりやすくするためには NVDA の「ビジュアルハイライト」と「スピーチビューアー」を使うとよいでしょう。
以下、ブラウズモードの下矢印と上矢印だけで試せて、すこしずつ「1文字ナビゲーション」や「要素リスト」を試せる課題です。
後半には NVDA のその他の機能や設定を試せたり、フォーカスモードの切り替えを試せる課題があります。
ブラウズモードでしか使えない NVDA の機能がある一方、フォーカスモードにしなければできないブラウザ操作もあります。
テストケース10選
テストの一覧 で公開しているものから、私が独断で選んだ10個は以下です。
- 0011-01 見出し
- 見出しジャンプ、要素リスト
- 0024-01 ナビゲーション
- ランドマーク
- 0026-02 メイン
- ランドマーク
- 0010-01 テーブル開始
- コンテンツがテーブルで終わっているので、テーブルの終了は読み上げません
- 0009-01 画像
- 画像しかないです
- 0006-01 リンク
- リンクしかないです
- 0014-01 順序リスト
- ちなみに 0014-02 順序なしリスト
- 0016-01 ページ言語
- 0005-01 ページタイトル
- NVDA+Tが使えます
- 0012-01 入力フィールド
- 画面レイアウト NVDA+V や、フォーカスモード切替 NVDA+スペース、あるいは、自動フォーカスモードの効果も確認できます
テストの正式なタイトルを改変してわかりやすくしています。
また、いきなりテストコードに遷移するので、説明はテストの一覧から当該テストコードの記事をご確認ください。
「え？これだけ」みたいな短いコンテンツも多いのですが、スクリーンリーダーの操作に自信がない人には、迷うことが少なくて、よいのではないかと思います。
もしも講習会の環境でネットワークに接続できない場合は、GitHub の前述のリポジトリからファイルをダウンロードして使うとよいでしょう。
物足りない場合は
物足りない場合にお使いいただける教材はいろいろあります。
例えば freee Accessibility Training をお試しください。
私も以前すこし制作をお手伝いしましたが、良い例・悪い例の比較を通して、実装の違いが読み上げにどう影響するかを学ぶことができます。
この記事は、あるお客様の「NVDA でアクセシビリティチェック」講習会のために調査した内容に基づいて執筆しました。