弁護士ドットコムがアクセシビリティに本気で取り組む狙い

ユーザーは音声だけでWebサイトをどう使うのか？弁護士ドットコム、アクセシビリティユーザー調査の結果を公開

いよいよユーザーテスト! 5つのタスクと見えてきたポイントを紹介する。弁護士ドットコムのアクセシビリティユーザー調査、実施編（第4回）。

太田良典 2019/1/29 7:00 UX／CX | 解説／ノウハウ

いよいよユーザーテストに入ります。テストの結果どうなり、何がわかったのでしょうか。今回は、ユーザーテスト本番の様子をお伝えします。

中根さん登場！

前回の記事でもご紹介した中根さんに、実際に当社までお越しいただきました。中根さんは、アクセシビリティの専門家です。かつてはW3CのWAI (Web Accessibility Initiative) でアクセシビリティガイドラインの策定にも関わっており、現在ではアクセシビリティの情報サイト「AccSell」を主催して、Webに限らず、アクセシビリティ全般の情報を積極的に発信されています。

弁護士ドットコムの社内からは、20名ほどの参加者が集まりました。テストに先立ち、まずは視覚障害者の一般的な環境や、中根さんの普段の利用方法をご紹介いただきました。この内容は第1回、第2回の記事で触れた内容と重複しますので、そちらをご覧いただければと思います。

左: 中根さんと普段使っているノートPC / 右: 点字ディスプレイの「Baum VarioUltra」

いよいよテストの開始となります。今回、中根さんにはスクリーンリーダーの「NVDA」を使っていただき、テストを実施しました。その結果、以下のようなことがわかりました。

Googleを使った検索はスムーズに行える
初めて訪問するページは、見出しだけを読み上げてページの全体のおおまかな内容を理解する
カルーセルはわかりづらく、メインコンテンツとの違いが伝わりづらい。
文字や色による文章の強弱ではメインコンテンツなのか、補足情報なのか、伝わりづらい
電話マークなどさまざまなアイコンは、altが無いとわかりづらい
問い合わせは、Webフォームなのかメーラーが立ち上がるのかわかりづらい。メーラーが立ち上がると案外面倒
フォームでよく見る「ふりがな」「フリガナ」が音声では平仮名・カタカナの違いがわからない
Webフォームのエラーポップアップも気付きづらい
ソーシャルログインボタンを設置している場合、ちゃんと「Facebookでログイン」と記載する。「Facebook」だけではわかりづらい

実際に詳しく見ていきましょう。

第一のタスク - まずは自由に検索

弁護士ドットコムのサイトをテストする前に、まずは自由に弁護士を探してもらうというタスクを用意しました。

中根さんに「弁護士に用はありますか？」という旨を訊いたところ、新しく設立しようとしている団体についてアドバイザーになってもらえる弁護士を探したいとのことで、次のような設定で検索してもらうことにしました。

IT分野に強く、障害者問題にも理解がある弁護士を探し、アドバイザーになってもらいたい。

実際に見てわかったこと - 読み上げが速い！

中根さんが「弁護士」という検索ワードを入力すると、スクリーンリーダー「NVDA」（以下、スクリーンリーダー）が読み上げを開始しますが……全然聞き取れないほどのスピードで、私には読み上げられている内容を理解できませんでした。

速度を遅くしていただくと聞きとれるようになりますが、速度を戻すとまったく聞きとれなくなり、会場からは笑いが。

なお、この速さは中根さんの好みであって、全てのユーザーがこういうスピードで聞いているわけではない、という補足もありました。以降は、ゆっくりした読み上げのペースで使っていただきました。

文字の詳細を読んで同音異義語問題を避ける

検索のために入力した「弁護士」というキーワードに対して、スクリーンリーダーは普通に「べんごし」と読みます。その後、中根さんが操作をすると、「弁護士の弁、まもるの護、サムライの士」と読みあげて、「べんごし」がどのような字なのかを教えてくれました。

日本語には同音異義語が多く、単に音を読んだだけでは目的の漢字が入力できているかどうか確認できないため、このように文字の詳細を報告するモードがあります。スクリーンリーダーNVDAでは、NVDAキー + ピリオドで読み上げます（以下、スクリーンリーダーの操作については、かっこ内にキー操作を表記します）。情報を正確に取得するには、単に音声にすれば良いのではなく、このような工夫も必要になるのです。

見出しジャンプで検索結果を読む

「弁護士」の他にどんなキーワードを指定して探せばいいのか、少し悩んだのち、「弁護士　IT分野　障害者問題」というキーワードでGoogle検索を行いました。検索結果が表示されます。

図01　Googleで「弁護士　IT分野　障害者問題」と検索

ここで中根さんは、見出しにジャンプする機能を使いました。

Googleの検索結果には見出しがつけられており、スクリーンリーダーNVDAの見出しジャンプ機能（hキー）を使えば検索結果に直接飛ぶことができます。検索結果の一覧の先頭に飛ぶと、「メインランドマーク^※」「検索結果、見出しレベル2」と読まれます。「検索結果」という見出しは視覚的には見えませんが、スクリーンリーダーだけに伝わるように、不可視の状態で見出しが設置されているようです。

※<main> や <div role="main"> に遭遇すると「メインランドマーク」と読む

図2　検索結果のタイトルは見出しになっている。さらに、これらの前には目には見えない「検索結果」という見出しも設定されている

個々の検索結果についても、リンク先ページのタイトルが見出しとして設定されているため、見出しジャンプの機能で次々と読んで行くことができます。

ランドマークのスキップ

この後、検索結果をたどっていくつかのサイトを見ていただきましたが、中根さんはジャンプなどの機能を駆使して問題なく読んでいきます。サイトの中には、ヘッダ部分が丸ごと「バナー」ランドマークとしてマークアップ^※されているものもあり、そういったものは、そのブロック全体をスキップして、スムーズに読み飛ばしていました。

※<header> もしくは <div role="banner"> とマークアップされていると「バナーランドマーク」と読まれるため、サイト全体の情報構造を理解したり、メインコンテンツとそうでないコンテンツの見分けがつきやすくなる。次のランドマークに飛ぶ機能（Dキー）で丸ごとスキップすることも可能。

第二のタスク - 弁護士ドットコムサイト内で弁護士を検索

さて、ここからいよいよ弁護士ドットコムのサイトを使っていただきます。

もちろん、社内からの参加者の中には、弁護士ドットコムのサイトを担当しているメンバーも含まれています。果たしてどうなるのか、固唾を飲んで見守ります。

Google検索から弁護士ドットコムのトップページに移動していただいて、そこから「弁護士を探す」というタスクをお願いしました。まずはトップページの要素を上から順に読み上げていきます。

図03　弁護士ドットコムのトップ画面

ヘッダにある「弁護士検索」のリンクを発見して、それを辿りました。ここまではスムーズです。

図04　ソースの上から順に文字を読み上げていく。ヘッダにある「弁護士検索」のリンクが発見できる

検索画面 - まず見出しを見てページ全体を把握する

弁護士検索のページにたどり着くと、中根さんは、まず見出しジャンプの機能で見出しだけを順に読んでいきました。

「弁護士を検索」「法律事務所検索」といった見出しが読み上げられていきます。

初めて訪問するページでは、このように見出しだけを読んで、ページ全体の大まかな内容や構成を把握します。

図05　ページ内の見出しの例。見出しを読み上げることで、ページ全体の内容を把握できる

カルーセルに気づかない

テストでは、興味深いことが起きていました。

実はこのページの冒頭には、サイトの機能を説明している部分があり、左右にスクロールして切り替えられるようになっています（「カルーセル」などと呼ばれます）。

読み上げられていた見出しの中には、このカルーセルの中に含まれるものもありましたが、スクリーンリーダーでは見た目が伝わらず、この部分がカルーセルであるということ自体が伝わっていませんでした。また、画面上では表示されていない部分（本来は、カルーセルを切り替えて初めて読めるようになる部分）もそのまま普通に読まれています。

図06　カルーセルだとわからない

目で見ていれば、この部分が読み飛ばしても良い、あまり重要ではなさそうなものだということが感覚的にわかるのですが、スクリーンリーダーの利用者には普通のコンテンツと見られてしまいます。

ズバリの分野がみつからない

一通り見出しを読んだ後、下のほうにある「分野から探す」という見出しに移動して、見出しの下の内容を読み始めます。

「14項目のリスト」と読み上げて、分野が全部で14あることがわかりました。分野はリストとしてマークアップされているため、スクリーンリーダーはリスト項目の件数を読んでくれます。

分野を順に見ていきますが、ズバリという分野が見つかりません。

図07　「分野から探す」でズバリの分野を見つけられない

「障害者」、「人権問題」などのキーワードはなく、あえて言えば「インターネット問題」が関係しそうです。

図08　「インターネット問題」に該当する弁護士が2,000人以上

しかし、その分野に該当する弁護士が2,000人以上いると表示されていることに気づき、そんなに表示されても困るという発言。このあたりはスクリーンリーダー特有の話ではなく、みなさんが困りそうなところですね。

その後、「条件を指定して探す」に到達し、「IT国家資格」というチェックボックスを発見。

これを選択すると60人に絞られました。「60人だったら端から見ていってもいいかもしれない」ということで「弁護士を検索する」ボタンを押しました。

図09　「さらに細かくこだわり条件を指定する」＞「IT国家資格」＞「弁護士を検索する」

検索結果一覧画面 - 真面目にテキストを読んでしまう

検索が完了し、弁護士の一覧が表示されます。

検索結果画面の冒頭には、小さめの灰色の文字でかなり長いテキストが書かれています。目で見ている人には読みにくいものですが、スクリーンリーダーには文字のサイズも色も関係ありませんので、普通に読んでいきます。目で見ていると、これは読まなくて良いものだと判断して飛ばすのでしょうが、音で聞くと、この内容がメインコンテンツのように思えます。

図10　音だけでは、小さめの灰色の文字がメインコンテンツのように聞こえる

律儀に読んでから、その下の地域を絞り込む選択肢にたどり着きました^※。ここはリストとして実装されているため、リストの後に飛ぶ機能で一気に読み飛ばします。

※現在は改修されており、この場所に地域の選択肢はなくなっている

その下に本来の検索結果が出ています。

見出しジャンプの機能も使いながら、検索結果をしばらく確認します。弁護士の名前がh3見出し、メインコピーがh4見出しになっているという法則が確認できました。

見知らぬ弁護士の先生の名前を聞いても判断できないので、メインコピーのh4だけを読んでいきます。とはいえ、メインコピーを読んでもよくわからないとのこと……。とりあえず、一人を選んでいただきました。

図11　見出しを読んでいく

検索結果詳細画面 - 見出しを読んで理解していく

検索結果詳細の画面にたどり着きました。

見出しジャンプの機能を使うと弁護士の名前が読まれたため、そこからメインコンテンツだと判断し、続きを順に読んでいきます。

「注力分野」という見出しの下の内容を読んで、さまざまなトラブル事例の紹介などがあるのを確認します。見出しがついていると読みやすいようです。

とはいえ、見出しと下の内容があっていないように感じる部分もあるとのこと。このような場合、見出しの下が空になっていることがあるので、他の似たようなページと比較して判断したりするそうです。

目で見ている場合、見出しの下にスペースが空いていれば空欄なのだと予想がつきますが、スクリーンリーダーではそういった判断ができません。

出身地

特技

ヨーヨー

図12　例：見た目上で「出身地」の下が空いていれば、「そこは本来出身地のデータが入るのだがこの人の場合はデータがなく空欄なのだろう」というような推測ができるが、読み上げでは「出身地見出し」「特技見出し」と続けて読まれるため、スペースがあるのかわからない。

リンクの一覧で同じリンクがダブってしまう

一人だけ見ても判断が難しいということで、前の画面に戻って他の弁護士の詳細を見にいきます。

ここで中根さんはNVDAの「要素リスト」を表示し、リンクの一覧を開きました。この機能を使用すると、ページ内のリンクだけを一覧表示することができます。

図13　NVDAの「要素リスト」

リンクの一覧を上から見ていくと弁護士の名前が出てくるのですが、同じ人の名前が2回ずつ読まれてしまいます。こういうケースはよくあり、慣れているとのこと。

図14　例：このようにマークアップされていると、名前が2回読まれる

他の弁護士詳細ページと比較する

他の弁護士を選択して、詳細ページを読んでいきます。

先ほどと同様に見出しを拾いながら読んできますが、「インターネット問題の特徴」「インターネット問題の取扱分野」といった見出しがよくわからず、見出しの下の内容と合っていないようだ、とのことでした。

図15　見出しのテキストがわかりにくいと、見出しに関する情報がないと誤解されてしまうことがある

第三のタスク - 料金の確認で問題発生！

ここまでで、弁護士を検索し、詳細ぺージにたどり着き、情報を読むことができました。

ここで、相談時の弁護士費用を確認するというタスクをお願いしました。「上の方に料金表というリンクがあったように思う」ということで、ページの上部にあるタブナビゲーションのところに到達されました。

ナビゲーション項目を見ていき、「料金表」を発見しますが、ここで問題が発生。そのタブを選択しても何も起きません。困ったことになりました。

実は、このタブの切り替えはJavaScriptで実装されています。クリックすると表示が切り替わるのですが、切り替わる場所はHTMLのソースコード上、タブとは少し離れた場所にあります。スクリーンリーダーは今フォーカスがある場所を読むため、離れた場所でコンテンツが書き換わってもそのことが伝わらず、何も起きていないと思われてしまうのです。

スーパーテクニックでリカバー！

中根さんは冷静に、「こういう場合、ページのどこか別のところに、ポップアップのような形で何かが表示されているケースが多い」と発言。

ブラウザの開発者ツールを実行し、ページ内のHTMLの構造を調査し始めます。料金表というリンクのすぐそばにそれらしい要素がないことを確認した上で、「HTMLの最後に挿入してCSSで持ってきていることが多いので、最後を読んでみる」と発言し、HTMLの末尾を調査します。

しかし末尾にはご意見ボックスなどがあるだけで、料金表は発見できません。そこで中根さんは開発者ツールを閉じて、ブラウザのページ内検索の機能で「料金表」という単語を検索しました。

すると料金表を発見することができました。

表の中身は、スクリーンリーダーでも問題なく読むことができました。昔は、スクリーンリーダーでは表が読みにくいとも言われていましたが、現在のスクリーンリーダーでは全く問題ないようです。

図16　Ctrl＋Fで検索ができる。検索窓で「料金表」と入力するとページ内で該当箇所がわかる

発見できなかった理由

タブの切り替えはJavaScriptで実装されていました。タブをクリックすると、表示されているコンテンツが切り替わるのですが、切り替わる場所はHTMLのソースコード上、タブとは少し離れた場所にあります。

スクリーンリーダーでは、基本的には今フォーカスがある場所を読むので、離れた場所でコンテンツが書き換わっても気づかれず、発見できなかったのです。

現在は、タブをクリックした際に切り替わった場所にフォーカスが移るようになっています。

第四のタスク - 問い合わせはできるのか？

最後に、実際に弁護士に問い合わせをするというタスクをお願いしました。

忘れがちなWeb以外のコミュニケーション手段

まず、すぐに見つかったのが「地図を見る」というリンクです。中根さんはこれを見て、「直接訪問するという方法もある」と発言されました。

確かに、目的を達成するのに、Webで完結させなければならないというルールはありません。なんらかの理由でWebが使えないような場合は、電話をしたり、実際に訪問したりして解決するという選択肢もあるわけです。Webの仕事をしていると、ついつい忘れてしまいますが、実際にはWeb以外の手段もアリだということは意識しておく必要があるでしょう。特に、障害当事者はアクセシビリティに問題のあるWebサイトを使えず、他の手段に頼ることがあるため、色々な手段を用意しておくことが重要になります。

それは電話番号ですか？

さて、中根さんは続けて、「電話番号があるので、電話をするというのもひとつの手」と言われました。

そこで、「電話番号はすぐにわかりましたか？」と訊いてみたところ、「050……という番号が電話番号だと勝手に思ったが、電話番号であるという記述はない」とのこと。

目で見ると、電話のアイコンの横に番号が書かれているのですが、スクリーンリーダーはアイコンを読まず、単に番号だけが読まれていました^※。数字の並びで電話番号だということは想像できたようですが、アイコンに代替テキストが入ってなかったので、電話番号だと認識されづらかったようです。

※現在は読まれるように改善済み

図17　問い合わせをする場合は、Web以外の方法を検討することも多い。また、電話番号のアイコンは代替テキストがないと、音声では読まれないため認識されづらい

その後、「電話でのお問い合わせ方法^※」というボタンを発見しました。

とりあえず押してみると、弁護士に電話する前に用意しておいた方が良いもの、心構えなど、問い合わせの前の準備に関するものでした。ボタンの文言から想像される内容とは、ずれていたようです。

※現在は、「スムーズな問い合わせのポイント」という表記に改善済み

メーラーが立ち上がる？怖くて押せないボタン

そして次に発見したのが、「メールで問い合わせ」というボタンでした。

ここで中根さんは唸り、「メーラーが立ち上がると困る」と言って、リンク先を確認しようとします。URLがmailto: で始まっていると、メーラーが立ち上がってきてしまって面倒なことになるというわけです。

リンク先のURLをクリップボードにコピーし、スクリーンリーダーの機能でクリップボードを読み上げると、https: で始まるリンクであることがわかりました。こういう確認ができるのは、中根さんに技術的な知識があるからで、一般のユーザーがこんなことをするのは難しいでしょう。

図18　「メールでのお問い合わせ」のURLを確認すると、https: から始まることがわかり、ボタンの先がWebフォームであることがわかる

フォームに入力

ボタンを押して問い合わせフォームへとやってきました。

入力欄に飛ぶ機能を利用して、最初の入力項目に移動します。必須項目残り5、お名前必須、などとラベルが読まれていきます。

入力例は入力欄の下に置いてあるのですが、中根さんはそれも読んでいました。入力欄の下にあるものは、フォーカスを移動したときに自動的に読まれるわけではなく、意識的に続きを読もうとして初めて読まれます。わかると言えばわかるけれども、気をつけていないと読み飛ばす可能性はあるかもしれない、とのことでした。

まだ入力はせず、他にどんな入力項目があるのか、一通り確認していきます。

実はこのとき、何も入力せずに次の入力に移動したことで、「お名前は空白ではいけません」のようなエラーメッセージが出ています。視覚的には明らかなのですが、中根さんは気づいていない様子です。

入力欄を一通り把握してから、最初の入力欄に戻り、名前を入力します。

次の入力欄には「ふりがな」というラベルがついています。ここで中根さんは、「ふりがな」が平仮名なのか、カタカナなのかわからないと発言。スクリーンリーダーの機能を使って、ラベルを1文字ずつ詳細読みして、「ふりがな」が平仮名で書かれていることを確認しました。「ふりがな」「フリガナ」の表記で平仮名かカタカナかを表現する方法は一般的ですが、スクリーンリーダーでは分かりにくいこともあるようです。

図19　「Webフォーム」エラーメッセージが気付きづらく、入力例は意識的に読んでいる。現在は修正されているが、平仮名なのかカタカナなのかわかりづらいという「ふりがな」

その後の入力は、特に問題ありませんでした。入力中のエラーメッセージには相変わらず気づいていませんが、入力そのものには支障ありません。項目を埋め、送信して確認画面に移動し、確認画面の内容も問題なく読むことができました。

これにて全てのタスクが完了です。

追加のタスク - ログインはできるのか？

この後、会場の見学者から、中根さんにいろいろ質問させていただきました。

その中で、「ログイン画面特有の困りごとはあるでしょうか？」という質問が出たため、急遽追加でタスクをお願いしました。

弁護士ドットコムには「みんなの法律相談」というサービスがあり、誰でも法律相談を投稿することができます。その投稿を見て、弁護士の先生が回答をくれるのですが、投稿者が返答のコメントをしたり、ベストアンサーを選んだりする必要があるため、相談の投稿にはユーザー登録とログインが必要になっています。弁護士ドットコムには、そのためのログインフォームやユーザー登録の動線が存在します。

ソーシャルログインは問題なし

ログイン画面に移動して内容を読むと、「Facebookでログイン」「Yahoo!IDでログイン」のようにソーシャルログインボタンを読み上げました。サイトによっては単に「Facebook」としか読まないことがあり、それは困るとのこと。

図20　ログイン動作を追加依頼。問題なくログイン画面にはたどり着き、ソーシャルログインも確認できた

ラベルのない入力欄はどう読まれるのか?

フォームコントロールに飛ぶと、「IDまたはメールアドレスを入力」と読み上げます。

実はこの入力欄にはラベルがないのですが、placeholder（空欄の入力欄にあらかじめ入っている文言で、入力を始めると消えるもの）が設定されているため、それを読んでいるようです。

次の入力欄に移ると、「エディット保護付き」と読みます。「保護付き」と読むのは、入力した値が隠されるパスワード入力欄だからです。そのため、これがおそらくパスワードだろうと推測しました。

こちらの入力欄にもplaceholderは設定されているのですが、パスワード入力欄では読み上げられないようです。ラベルもないため、「エディット」としか読まれていません。

図21　パスワード入力欄にラベルがないため、「エディット保護付き」と読まれてしまった。無料会員登録に進む

無料会員登録

続けて読んで行くと、ログインフォームの下に「無料会員登録」というリンクがあることに気づき、「無料会員登録画面」に移動します。

「Facebookで会員登録」というリンクと「Yahooボタン」というリンクがあります。後者は画面上は「Yahoo!IDで会員登録」と読めますが、適切な代替テキストがつけられていないようです。

フォームは項目数が少なく、特に問題はなさそうでした。

中根さんによると、この手のフォームでは、全て入力した後で「下の画像の文字を読み取って入力してください」と出てくることがあり、非常に困るとのこと。一般的にCAPTCHAと呼ばれる仕組みですが、スクリーンリーダーでは画像の内容が読み取れないため、突破することができません。

中根さんの場合、CAPTCHAを突破するためのFirefoxアドオンで対処しているそうです。突破率は高いものの、最近増えている「パズル認証」には対応しておらず、そのような場合には仕方なく知人に見てもらって対応するとのこと。リモートデスクトップで操作してもらうこともあるそうです。一人ではパズル認証はどうにもならず、本当に困っているとお話しされていました。