NVDAを使ってWebアクセシビリティをテストする方法

このWebページは、アメリカのユタ州立大学にある非営利組織WebAIMに許諾をいただき、”Using NVDA to Evaluate Web Accessibility“という記事を日本語訳したものです。

この記事のコンテンツ

以下にあるリストは、このWebページの見出しです。このリストをNVDAでスキップするには、Hを押して次の見出しへ移動してください。

  1. イントロダクション
  2. まず最初に
  3. 読み上げ
  4. ナビゲーション
    1. クイックキー
    2. その他のナビゲーション用ショートカット
  5. 画像
  6. データテーブル
  7. フォーム
  8. 練習

イントロダクション

この記事は、NonVisual Desktop Access (NVDA)を使ったことのない方々がWebコンテンツを検証する際の基本的な操作方法を学ぶために、またNVDAを時折使う人の参考となるように書かれています。NonVisual Desktop Access (NVDA)は、マイクロソフトのWindows オペレーティング システム用の無償で使用できるオープンソースのスクリーンリーダーです。NVDAは、20か国語以上をサポートしており、インストールしなくても、USBドライブからあらゆるコンピュータ上で使用することができます。

スクリーンリーダーを用いてWebコンテンツのアクセシビリティを評価するのは重要なことですが、スクリーンリーダーは時折しか使わない人にとってはとても分かりづらいプログラムであることがあり、そのため多くの人たちは敬遠しがちです。しかし、必ずしもそうではありません。スクリーンリーダーは分かりづらい面もありますが、"パワーユーザー"ではなくても、Webコンテンツのアクセシビリティを検証することは可能です。

この記事を読むにあたっては、幾つかのことに留意してください。

  • この記事には、NVDAのショートカットの全てを網羅したリストはありません。この記事が提供するのは、NVDAの初心者ユーザーが知っておくべき必要不可欠なコマンドの一覧です。NVDAのキーボードショートカットに関するより総合的なリストは、WebAIMが作成したNVDA keyboard shortcutsを参照してください。さらに詳細なドキュメントは、NVDA User Guidesで提供されています。
  • もしあなたがスクリーンリーダーを使うのは初めてという場合は、このページとサンプルのページでより多くの時間（できれば数時間程度）をかけて、NVDAの操作に慣れることができるように計画してください。ほんの数分間使ってみた後にまだ困惑するようなことがあったとしても、あきらめないでください。そんなときは、読み上げ速度を落として、時間をかけるようにしましょう。
  • NVDAを操作する際、フルキーボードを使用したほうが通常は簡単です。もしノートパソコンのキーボードを使用したい場合は、異なるキーボード設定も利用可能ですが、この記事ではフルキーボードの使用を前提としています。

まず最初に

NVDAは、オープンソースのソフトウェアです。無償でNVDAをダウンロード（NVDA 日本語版をダウンロード）することができます（Windows版のみ）。NVDAは比較的新しいプロジェクトなので、一部の機能は基本的なものに留まっているものがあります。NVDAをダウンロードしてインストールすると、Ctrl + Alt + Nを押すことによって、プログラムを起動させることができます。

注記

NVDAキーは、デフォルトでは無変換キーに割り当てられていますが、NVDAを初めてインストールするときにCapsLockキーに変更することが可能です。NVDAキーの設定を後から変更したい場合は、Ctrl + NVDA + Kを押してください。

NVDAを操作している際には、以下のガイドラインに留意してください。

  • NVDAは、早くからWindowsやWindowsアプリケーションの操作をサポートしてきていますが、この記事ではWebコンテンツへのアクセスのみに焦点を絞っています。
  • NumLockがオフであることを確認してください。
  • おそらく、Mozilla FirefoxでNVDAを試すのがよいでしょう。たとえ、普段使用しているブラウザがFirefoxでなかったとしてもです。
  • 一般的にスクリーンリーダーのユーザーはマウスを使用しません。NVDAの操作に慣れてきたら、キーボードだけで操作するようにしてみてください。
  • NVDAを使用しているときでも、ブラウザのショートカットのほとんどは機能するはずです。
  • Webページを読み進めているとき、画面はスクロールしないかもしれません。そのため、画面には見えていないコンテンツをNVDAが読み上げるのを聞くことになることがあります。

読み上げ

コンテンツを、行、文、単語、文字などで区切って読み上げることのできるたくさんのキーボードショートカットがあります。以下にあるリストは、必要不可欠な読み上げのショートカットです。これらのショートカットを用いることによって、ほとんどのコンテンツをナビゲートすることができるはずです。

  • Numpad +：ページの先頭で読み上げを開始
  • NVDA + ↓：現在位置で読み上げを開始
  • Ctrl：読み上げを停止
  • NVDA + ↑ または Numpad 8：現在の行
  • Ctrl + ←/→ または Numpad 4/Numpad 6：前/次の単語
  • ↑ または Numpad 7：前の行
  • ↓ または Numpad 9：次の行
  • ←/→ または Numpad 1/Numpad 3：前/次の文字
  • F5/Ctrl + F5：ページの再読み込み（現在位置が分からなくなったとき、この操作によってもう一度やり直すことができます）
  • NVDA + Ctrl + ↑/↓：読み上げ速度の変更（早くする/遅くする）

画像

Webページにあるすべての画像には、代替テキストが必要です。もし画像に代替テキストがなければ、スクリーンリーダーはその画像を通常は無視しますが、どのように処理されるかは製品によって異なることがあります。

画像のサンプルと練習

データテーブル

Webにおいては、テーブルの用途には主に二つあります。レイアウトテーブルとデータテーブルです。NVDAでは、次のテーブルに移動するには、Tを押します。セル間を移動するには、Ctrl + Altを押したまま、↑/↓/←/→を使ってセルからセルへと移動します。

テーブルのサンプルと練習

フォーム

フォームは、Web上でデータのやり取りをするために用いられます。<label>要素は、フォームコントロールとその説明となるラベルとを明示的に関連付けるために用いられます。NVDAは、フォーム要素に移動したときに、そのフォーム要素のラベルを読み上げます。フォームコントロールに関連付けられたラベルが存在しない場合は、NVDAはそのフォーム要素の目的を特定することができません。<fieldset>要素は、関係性のあるフォーム要素をグループ化するために用いられます。通常、これはチェックボックスやラジオボタンのグループに関する説明を提供するために用いられます。NVDAは、<fieldset>要素内にある<legend>要素でマークアップされたラベルを読み上げます。

以下のショートカットを用いて、フォーム内を移動したり、フォームを操作したりしてください。

  • フォーム要素にアクセスする際、NVDAはフォームモードまたはフォーカスモードになります。フォーカスモードでは、クイックキーやその他のキーボードショートカットを起動することなく、テキストを入力することができます。フォーカスモードに入りたいときは、Enter または NVDA + spaceを押します。
  • フォーカスモードから出て、ブラウズモードに戻るには、NVDA + spaceを押してください。
  • フォーカス/フォームモードになったら、Tab および Shift + Tabを使って、フォームコントロール間を移動します。
  • チェックボックスを選択したり、非選択にしたりするには、Spacebarを使います。
  • ラジオボタンを選択するには、↑/↓を使います。
  • コンボボックス内のある要素を選択するには、↑/↓を使います（アルファベットでは、最初の一文字を入力しても選択できます）。
  • NVDAは、Enterを押してフォームを送信するか、新しいページへ移動するか、またはボタンを選択すると、自動的にフォームモードから出ます。

フォームのサンプルと練習

練習

  • このページをセクションごとに再度読み上げてみてください。各セクションの最後で、ページの先頭に戻って、さまざまな方法で新しいセクションへ移動してみてください。例えば、
    • 目次を使う
    • Ctrl + F を使って、検索のダイアログを開く
    • 見出しで移動する（H または 1 ～ 3）
  • マウスを使わずに、WebAIM Newsletterに登録してみてください。
  • モニターを消して、これらのタスクを繰り返してみてください。

参考リンク

このセクションは、日本語訳で独自に追加したものです。