アクセシビリティチェックツールとしてのスクリーンリーダー

UX/UI アクセシビリティ

こんにちは。Garoon 開発チームの杉山です。

皆さんはスクリーンリーダー（画面読み上げソフト）を使われたことがありますでしょうか。主に視覚障がい者向けのツールだと思われるかもしれませんが、実はアクセシビリティのチェックツールとしても、とても有効に使うことができます。一方で独特の操作が多いため、慣れていないと操作が難しい一面もあります。 本エントリでは、開発者やデザイン担当者がアクセシビリティチェックツールとしてスクリーンリーダーを使う際の注意点をまとめてみました。

サイボウズのアクセシビリティ対応

サイボウズではアクセシビリティを「チームにアクセスできる能力」と定義し、取り組みを進めています。*1

しかし、

  • アクセシビリティ基準*2を満たしていない箇所が多い
  • アクセシビリティ対応に使える時間が少ない

といった理由から全サイボウズ製品ですぐにアクセシビリティ対応を完遂するのは非常に困難です。そのため、一部のユーザーにとってまったくアクセスできない(使うことができない）もしくは非常に使いにくい箇所を特定し、そこから優先的に対応していきたいと考えました。

アクセシビリティ対応の優先順位付けの方法はいろいろあるとおもうのですが、今回はスクリーンリーダーを用いた優先順位付けを行いました。この方法ではどこがアクセスできないのか、どこが使いにくいのかを開発者やデザイン担当者でも把握することができ、実感を持って優先順位を付けられます。実際の検証では NVDA と呼ばれる無料のスクリーンリーダーを利用しました。

NVDA とは

NonVisual Desktop Access (NVDA) は無料で使える Windows 用のスクリーンリーダーです。日本語対応が行われているため、インストールするだけで使い始めることができます。

はじめて NVDA を使う上で注意すべき点をまとめてみました。

読み上げの止めかた

インストールして起動すると、即座に読み上げが始まります。読み上げはいつでも [Ctrl] キーで止めることができます。

Firefox を使う

NVDA は Mozilla Firefox との併用を推奨しています。IE や Chrome も読み上げることができるのですが、WAI-ARIA *3 の対応は Firefox と NVDA の組み合わせが最も進んでいるそうです。また、後述する NVDA のアドオンも Firefox での動作が安定しているようです。

NVDA キー

NVDA を起動すると、初めに NVDA キーの設定を求められます。 NVDA のようこそダイアログ

NVDA は 基本的に NVDA キーという制御キーと他のキーを組み合わせて操作します。NVDA キーにはキーボード上の任意のキーに割り当てることになります。NVDA キーはデフォルトで [無変換] と [Insert] に割り当てられています。この後の説明でも [NVDA] と書かれている箇所は [無変換] か [Insert] に読み替えてください。

キー操作が奪われる

NVDA には ブラウザモード と フォーカスモード と呼ばれる二つのモードが存在します。ブラウズモードでは通常のキー操作が NVDA に送られるため、通常の文字入力や、文字のコピーショートカットである [Ctrl] + [C] などが利用できません。また JavaScript のキー入力イベントも基本的に発火しなくなります。一方で、フォーカスモードではキーボードの入力がブラウザに直接わたるようになります。そのため文字入力やキーボードショートカットを使いたい場合は、[NVDA] + [スペース] を入力してフォーカスモードに切り替える必要があります。

NVDA コマンド

Web 閲覧時の NVDA 操作方法については、NVDA日本語版　操作ガイド がわかりやすいのでこちらを見ていただくのが良いかと思います。

重要な点は

  • [H] で見出しが、[F] でフォームが、[K] でリンクが、といったように主要な項目はキーボードひとつで順々に読み上げられる
  • [Shift] を同時に使うと逆方向の項目を探す

の2点です。

またこの操作ガイドにはないのですが、[NVDA] + [Tab] で現在のフォーカスの報告ができることも覚えておくと、より使いやすくなるかと思います。

開発者のための NVDA 設定

NVDA は上記の操作ガイドを覚るだけでも十分にアクセシビリティチェックツールとして使うことができます。しかしデフォルトの設定は視覚障がい者向けの設定になっているため、一部の設定を変更することでさらに便利に使うことができます。

スピーチビューアー

普段スクリーンリーダーを使わないユーザーにとっては、スクリーンリーダーの読み上げだけでどのように読み上げられたかを判断するのは容易ではありません。NVDA には開発者向けに読み上げられた音声を文字に出力する機能が標準で備わっています。

[NVDA] + [N] を入力すると、NVDA のメニューが立ち上がるので、そこから「ツール(T)」→「スピーチビューアー(S)」と選択することで起動できます。[NVDA] + [N], [T], [S] と順に押すことで、即座に起動させることができます。

マウス追従機能をオフに

NVDA のデフォルト設定では、マウスカーソルが移動すると移動先の内容を自動で読み上げてくれます。しかし、スクリーンリーダーになれるまではマウスカーソルによって意図しない箇所が読み上げられることが多く、アクセシビリティチェックツールとして使いにくい原因になります。[NVDA] + [M] と入力して、マウスカーソル移動を報告しないようにすることをお勧めします。

FocusHighlight アドオン

FocusHighlight は NVDA が読み上げている箇所（ナビゲーターオブジェクト）やフォーカスのあるオブジェクトを、色付き長方形で表示する NVDA のアドオンです。

FocusHighlight アドオンの利用例
上の画像では、緑色のギザギザ線で囲まれている部分がいま NVDA が読み上げているところを示しています。一方で赤い四角で囲まれた箇所はフォーカスが当たっていることを表しています。これにより、スクリーンリーダーに慣れていない開発者でもスクリーンリーダーの挙動を把握しやすくなります。

音声を切る

スクリーンリーダーを長時間利用していると、休みなく情報が耳に流れてくるためとても疲れます。長時間の検証を行う場合は、音声を切りスピーチビューアーを利用することをお勧めします。

[NVDA] + [S] で 「声で読み上げ」「読み上げなし」「ビープ」の3種類を切り替えることができます。音声を止めていても、スピーチビューアーは引き続き利用することができます。

ページ読み込み時に読み始めないように

音声を止めている場合、新しくWebページを開くとページ内の情報が一度にすべてスピーチビューアー上に表示されてしまいます。さらにナビゲーターオブジェクトもページの下のほうに移動してしまいます。

[NVDA] + [N] で NVDA メニューを起動し、「設定(P)」→「ブラウズモード(B)」から「ページ読み込み時に自動的に読み上げる」のチェックを外すと、ページ遷移だけでは読み上げが行われないようになります。

ブラウズモードとフォーカスモードの切り替えを文字で知らせる

[NVDA] + [スペース] でブラウズモードとフォーカスモードの切り替えを行うと、ビープ音によりブラウズモードかフォーカスモードかを教えてくれます。この音はデフォルト設定ではスピーチビューアーに表示されません。

[NVDA] + [N] で NVDA メニューを起動し、「設定(P)」→「ブラウズモード(B)」から「フォーカスモードとブラウズモードの切り替えを音で報告」のチェックを外すと、スピーチビューアーにもラウズモードとフォーカスモードの切り替えが表示されるようになります。

アクセシビリティを調べるときは

実際にスクリーンリーダーでアクセシビリティチェックを行うときにいくつか注意したほうがよいと感じたポイントがあります。

FocusHighlight アドオンに頼りすぎない

FocusHighlight アドオンは開発者にはとても便利なのですが、その分スクリーンリーダーユーザーの不便を感じにくくなる恐れがあります。フォーカスが見えてしまうと、どうしても視覚的に Web ページをとらえてしまいます。しかし、スクリーンリーダーは Web ページの HTML を順番に読み上げる性質であるため、実際には各パーツの位置関係やスペースの空き具合といった視覚的情報を把握することは困難であると考えられます。そのためブラウザを小さくしたり実際に目を閉じたりして、スクリーンリーダーユーザーに近い操作条件を課すと良いと思います。

スクリーンリーダーだけに対応しようとしない

アクセシビリティ対応はスクリーンリーダ―ユーザーのためだけのものではありません。多様なユーザー・多様なデバイス・多様な状況下で使いやすくする必要があります。

スクリーンリーダーを使ってアクセシビリティチェックを行う場合でも、スクリーンリーダーで操作できないデザインを探すのではなく、高齢者や弱視の方・健常者にも操作しにくくないかを意識したほうがより効果的になります。

おわりに

アクセシビリティ基準だけを見ていると、この画像に alt がない！とかここのマークアップがおかしい！ということはわかっても、それがどれくらいクリティカルな問題なのかはわかりません。もちろんすべての問題に対処していきたいところですが、限られた時間の中で対応をすすめなければいけない場合、やはり利用するユーザーが困る場所から優先的に改善をしていきたくなります。

スクリーンリーダーを使うと全盲の方が困るであろう UI のピックアップが簡単に行うことができます。しかし実際に抽出された UI を分析してみると、高齢者や弱視の方・健常者にとっても使いにくい UI であることが多いこともわかってきました。アクセシビリティ対応でどこから手を付けたらいいかわからない場合には、こういった手法がとても有効に使えると思います。

また、キーボードのみで操作する、拡大鏡の画面から操作する、カラーフィルタを利用するといった方法でも同様にアクセスできないもしくは非常に使いにくい UI を探すことができます。

ぜひ皆さんもアクセシビリティの改善にこうした方法を使ってみてください。

*1:サイボウズ - アクセシビリティへの取り組み

*2:国際的基準である WCAG 2.0 (Web Content Accessibility Guidelines 2.0) や WCAG 2.0 を原案として作られた JIS X 8341-3 があります。

*3:Web Accessibility Initiative が策定する、HTMLドキュメントにより詳細な情報を付与する方法。