フリーのオンライン英和辞書サービスを、スクリーンリーダーなどのアクセシビリティ補助ツールでも使いやすいように工夫してみた。少なくとも、MacOS付属のVoiceOverによる読み上げで使いやすいようにはなっている。
Webサイトのアクセシビリティを向上させるための手法は数多あるが、その中でも容易に取り組めて効果が高そうなものを英和辞書検索サービスにも取り入れてみた。HTML5のセマンティック構造を採用するとともに、スクリーンリーダ（画面読み上げソフト）で主要な情報だけ拾い読みするためのショートカットをつけた。
まず最初にやったのは、header、footer、nav、article、section、h1、h2などのセマンティックなタグで表示内容を意味付けすることである。それらに対応したUAを使っていれば、ページヘッダやページフッタを読み飛ばしたり、h1やh2などの見出しにジャンプしたり、navのナビゲーションにジャンプしたり、articleを使って次のページ内にある個々の記事に飛んだりできる。今回の英和辞書サービスでは以下のことを行なった。
- タイトルロゴなどの通常利用では使わない機能をheader要素に入れた。
- 検索条件を入力するフォームをnav要素に入れた。
- 検索結果の個々の見出し語とそれに付随する語義説明などはarticle要素に入れた。
- それ以外のメッセージやヘルプなども適宜sectionでまとめた。
- lang属性で英語の情報と日本語の情報を区別できるようにした。
その他にも、ページの論理構造とスタイルを一致させるとか、不要な画像を使わないとか、なるべく組み込みの入力機能を使うとか、フォントサイズを変えてもスタイルが崩れないとかいった、一般的なアクセシビリティの配慮はしている。基本的にテキストベースで飾り気のない、それこそLynxでも扱えるようなページ構成なので、多くのUAで機能するはずだ。lang属性は読み上げ時の言語切り替えに役立つ。HTML Lintで100点を取るのが目的ではない。
さらに、キーボードショートカットにも対応した。キーボードショートカットはいわゆるヘビーユーザの生産性を上げるだけではなく、運動機能に障害がある人々にとっての利便性も向上させる。まず、ページが描画された直後には、デフォルトで検索窓にフォーカスが当たるようになっている。直前に入力した検索語があれば、その文字列は検索窓に入力された状態になっているとともに、検索語の全体が選択された状態になる。そうすると、キーボードに新たな語句を打ち込めむだけで、古い検索語を上書きすることができる。すなわち、検索窓にフォーカスを移す操作が不要になるし、Backspaceを連打して古い検索語を消す必要もない。それでいて、検索語を編集したい場合には、矢印キーを押せば編集箇所を指定して挿入や削除ができる。また、Shift+Backspaceキーを押すと、フォーカスを検索窓に戻し、かつ検索語が消去される。これによって、現状がどんな状態かに関わらず、再検索ができる。
検索結果には膨大な情報が含まれるが、その中で頻繁に利用するものは限られている。典型的には、検索条件に該当した見出し語と、その訳語（日本語）のリストと、語義説明（英語）のリストだ。読み上げソフトや点字リーダを使ってそれらに効率的にアクセスできるようにするために、ショートカットを設けた。Shiftを押しながら矢印の右を押すと、見出し語と訳語と語義説明のラベルだけに絞ってフォーカスが移るようにした。フォーカスされた領域の文字列は自動的に読み上げられたり点字として提示されたりする。Shiftと左右によるジャンプでは、発音等や派生語などの情報は飛ばされることになるが、Shiftと上下の場合には、それらも飛ばさずに読み上げが行われる。もちろん、通常のUAの機能を使って、ヘッダジャンプ（Ctrl+Opt+Cmd+H）やリンクジャンプ（タブ）などで読み進めることもできる。
以上の工夫により、UAの種類に限らず、ページを開いて1秒以内に検索を開始して、それから1秒以内に訳語や語義を読みはじめている状態が実現できるはずだ。試しに、MacOS付属のVoiceOverというスクリーンリーダの機能を使って英和辞書の検索をしてみよう。Mac上のChromeかSafariで、こちらのサービスを開いてみてほしい。Commandキーを押しながらF5押すと、VoiceOverが有効になる（もう一度押せば解除される）。すごい勢いで喋り出すが、そういう機能だ。画面内に表示された文字列だけでなく、UIのパーツの名前や機能も読み上げてくれるが、それは目が全く見えない人にも必要な情報を渡すためだ。なお、デフォルトの読み上げ速度45%でも異常に早口に感じるだろうが、実際に使っている人達の動画を見ると60%とか70%とかにしていて驚かされる。脳の潜在能力は凄い。
そして、キーボードだけを使って検索をしてみてほしい。マウスやトラックパッドは使っちゃだめだ。Shift+Backspaceボタンを押すと検索窓にフォーカスが移動するので、そこで適当な英単語を入力して、Enterキーを押せば、検索できる。日本語を入れれば和英検索もできる。タブやShift+タブを押せばフォーカスを進めたり戻したりできるので、それで検索フォームの各種機能を使ってもよい。検索結果が表示されたら、Shift+右を押してほしい。見出し語、訳語、語義説明の順でフォーカスが移動する。余計なフォームパーツやリンクやその他の付加的な情報を全てすっ飛ばしてくれるのが要点だ。なお、Shift+左を押せば前のフォーカス地点に戻ることができる。語義説明を読み上げたい場合は、Ctrl+Opt+右を押す。これはVoiceOverの標準機能で、「次の場所を読め」ってことである。
以上の操作を、今度は画面を隠してやってみてほしい。画面の前に紙などを立てかけたりして隠してほしい。基本的には、Shift+Backspaceボタンで検索窓に戻り、英字キーを叩いて英単語を入力し、Enterで検索を開始し、Shift+右で進んで、Ctrl+Opt+右で読む。その他の操作方法についてはVoiceOverのチュートリアルを参照されたい。
VoiceOverの各種コマンドを覚えるのが面倒な人は、Uber Jump（Ctrl+Opt+U）だけ覚えると良い。ページ内ジャンプの全てのオプションを左右矢印で切り替えながら利用できるようになる。その中にLandmarkというオプションがあるのだが、それを使うとHTMLのnavやarticleなどの要素を辿れる。Headerを使うとh1、h2等のヘッダを辿れる。Ctrl+Opt+Aを押すと現在地点から読み上げを開始してくれるし、Ctrl+Opt+右を押すと、次の要素に進みつつ、それを読み上げてくれる。読み上げを止めるにはCtrlだけを押せば良い。
ちなみに、Chromeの検索エンジンの設定でキーワード登録をすると、より便利だ。アドレスバーに登録したキーワード（例えば「ej」）の後に単語を置いて「ej hello」とか入力すると検索できるようになる。あと、Chrome拡張の方も結構便利だ。
Webサイトのアクセシビリティを考える際にまず重要なのは、WAIなどで提唱された標準的な手法をできるけ踏襲することだ。それによって、時間や手間の差はあれど、全ての人が同じ情報にアクセスできるようになる。その上で、より便利なショートカット機能をつけることだ。サイト毎に異なるショートカット機能を覚えてもらうのを前提としてはいけない。本当にそのサイトが気に入った人だけがショートカットを便利に使うが、それ以外の人はUAの標準的な操作のみでそのWebサイトを利用できるべきだ。VoiceOverの基本的な使い方については以下の動画がわかりやすい。
www.youtube.com
なお、VoiceOverの読み上げの挙動は、ブラウザによって挙動が変わる。ChromeとSafariで動作確認しているが、その二つでも微妙に動作が違う。また、WAI-ARIAで規定されたrole属性をつけると読み上げの挙動が変わる。辞書のラベルにはtooltipを指定して、翻訳のリストにはtextを指定している。このあたりはUAやバージョンとの組み合わせ問題になるが、とりあえず現状では期待通りに動いている。
まとめ。英和辞書サービスをスクリーンリーダとキーボードで利用しやすいようにした。辞書サービスのアクセシビリティの話題ってあんまり見かけないのでベストプラクティス的なものがよくわからないのだが、VoiceOver上で私にとって最も使いやすい構造を追求した。この組み合わせでうまく動作するなら、表示方法がタブレットであろうが電子ペーパーであろうが点字ディスプレイであろうが、入力方法が音声入力だろうがペンタブだろうが視線入力だろうが、それなりの効率で動作するはずだ。とはいえ、この手の使い勝手は、実際のユーザが使い込まないと磨かれないものだろうから、開発者が一応動くと言い張って満足するのはおこがましいことだ。しかし、拙くとも始めないことには進歩はないので、とりあえずやってみた。
