前書き

ウェブアクセシビリティなんて言われてもどうすりゃいいんだよ、っていうことになるんじゃないだろうか。今は資料も増えてきたし、先人たちが頑張って活動してくれているので、ユーザーから見た状況もかなり良くなっていると思う。

一方、自分が実装したアクセシビリティ的な取り組みが、実際のユーザーにはどのように伝わっているのかがわかりにくい場合もあるのではと思う。実際に画面を見ないでコンピュータを使っている人に遭遇したことのあるエンジニアはそう多くはないだろうし、どのように画面が読み上げられるかを聞いたことのあるエンジニアも少ないのではないだろうか。

ということで、あなたのブラウザーに、音声読み上げ機能を更かしてみよう、というのがこの記事の内容である。

NVDA

無料で使える画面読み上げ環境で、包括的に使えるのはNVDAというものだ。対応OSはWindows。

入手先など

NVDA日本語サイト
からダウンロードしてインストールする。この環境でWindowsを使ってみると、いろいろと発見もあると思う。

ウェブサイトを閲覧してみる

では、実際に使ってみよう。Chrome前提、Windows 10環境ということで話を進める。さあ、マウスを触らず、勇気があればアイマスクでもしてやってみよう。パソコンが起動して、NVDAがなにかしら喋ってることを確認しておこう。

Windowsキーを押しながらMを押す。これですべてのウィンドーが小さくなってデスクトップが表示されたはず
もう一度Windowsキーを押す。これで検索ボックスにフォーカスが行ったはず。
"chrome"と入力してみよう。１文字入力する毎に検索が行われて、数文字入力したところで"Google Chrome"という音声が聞こえるだろう。
"Google Chrome"が聞こえたらエンターキーを押す。これでChromeが起動できた。
Altキーを押しながらDを押す。これでアドレスバーにフォーカスが行った。
では、"qiita.com"とか入力してエンターキーを押す。

ChromeVox

こちらはChromeBookに標準搭載されている画面読み上げ環境である。それをPC上のChromeの上で動くようにしたもの。Chromeが動けばこちらも動くのではないかと思うので、Windows以外の人も使える。

入手先など

このページ
を参考に、ChromeにChromeVoxを組み込む。

ウェブサイトを閲覧してみる

Altキーを押しながらDを押す。これでアドレスバーにフォーカスが行った。
では、"qiita.com"とか入力してエンターキーを押す。

どうやって操作すんの？

ページが開いたらなにやら喋りだしたんじゃないだろうか。なにを喋ってるか聞き取れるだろうか？ちゃんと日本語喋ってるだろうか？Windows 10ならばおそらく日本語を喋ってるのではないかと思う。もし日本語を喋っていないのならば、NVDA, ChromeVoxのオプションを調整して日本語がしゃべるようにする必要があるが、この方法については他に譲ろう。

では、読み上げ方法について少し書く。

NVDA

原則的に、矢印キーを使ってページの中に書かれているテキストを読んでいく。上下の矢印キーを使えば1行ずつ、左右の矢印キーを使えば1文字ずつ確認ができる。

HTML要素名をキーにしたジャンプ機能が少しだけある。

h : heading
l : list

ちなみに、NVDAの終了は、Insertキーとqを押す。

ChromeVox

NVDAと違い、上下矢印キーを押してもページの読み上げは行われない。これらのキーはそのままブラウザに送られる。

ChromeVoxの読み上げのためには、ChromeVoxキーという修飾キーと読み上げコマンドに対応するキーを押す。ページを読み上げたければ、デフォルト設定だとAlt+Shift+上下の矢印キーだ。文字の読み上げはデフォルトでは設定されていない。

Alt+Shift+.を押すとキーの一覧が表示されるだろう。これを参考にして操作してみてほしい。

まとめ

どうだろう、こんな環境でウェブを閲覧している人が一定数存在するのだということが伝わればよいな。

音声というメディアには下記のような特徴がある。

順番に情報を聞くことになる
すべての情報は同じ重みで伝わる
読み飛ばしが難しい
その他にもあるよね、きっと

例えば、文字情報にしてしまうとほとんどが広告であるページなどは、本文を探し出すのにかなり苦労することになる。そこで適切なアクセシビリティ的な配慮がされているページというのが重要になる、というわけなのだ。

おまけ

この記事、私がQiitaに登録した頃に書きかけて塩漬けになってたものを引っ張り出して書いている。この分野には多くの参考サイトがあり、優秀な記事がたくさんある。ということで、この記事を初めてのアクセシビリティの参考にしてしまったあなたは、ぜひ他の優秀な記事に目を通していただければと強く思う。