Webページをスクリーンリーダーを使って操作する時の困りごと

これは、Web Accessibility Advent Calendarの12月16日の記事です。
http://www.adventar.org/calendars/719

Web Accessibility Advent Calendarに参加するのは初めてなので、簡単に自己紹介します。ツイッター名はみなののです。東京都の西の方で、会社員をしています。通勤で出会った視覚障害の方と毎朝通勤するようになったのをきっかけに、視覚障害者のサポートに興味を持ちました。地域のパソコンボランティアに参加したり、NVDA関連の活動に参加したりしています。友人に出会ったのは2012年 (週5日ほぼ毎日の通勤同行は3年目)、パソコンボランティアに参加したのは (あまり活動に参加出来ていませんが) 2013年、NVDA日本語チームに参加したのは2014年です。NVDAヘルプデスクに2015年から参加しています。

他には、視覚障害者のWindowsやApple製品についてのメーリングリストに参加したり、Twitterで視覚障害の方々をフォローしたりして、日々、視覚障害の方のPC+スクリーンリーダーやiPhone+VoiceOverでの困りごとを聞き、自分でも画面を見ながらスクリーンリーダーで操作して操作方法を調べ、メールやTwitterの返信でお知らせしています。

これらの活動から、どんなWebサイトがスクリーンリーダーユーザーにとって困るのか、少しわかって来たと思います。今日は、その構成の具体例を挙げたいと思います。

本当は、実際のサイトをスクリーンリーダーで操作していただくとわかりやすいのですが、そのサイトを作成した企業様との兼ね合いで、ご紹介しづらいのが悩むところです。

1. データ購入サイトでの例
デー タ購入サイトでの例です。以下、操作とサイトの変化を順に追って説明します。

(操作1) テキストフィールドにテキストを入力して検索する。

(変化1) 検索によりヒットしたデータが表示される。1件の表示内容は、データの名前、説明、カートに追加ボタン。

(操作2) 購入するデータのカートに追加ボタンまで移動し、ボタンを有効化する(たいていはエンターキー)。

(変化2) パソコンの画面いっぱいに、大きな警告ウィンドウ(半透明)が出る。ウィンドウの中には、了承ボタンとキャンセルボタンがある。しかし、スクリーンリーダーでは読み上げされない。また、フォーカスは相変わらずカートに追加ボタンにあるため、スクリーンリーダーユーザーには気づけない。

(操作3) カートに追加ボタンを押したので、カートに移動してカートを表示してみる。

(変化3) 商品は追加されていない。

この例にて、カートに商品を追加する方法は、変化2にて現れた警告ウィンドウの中の了承ボタンを押すことです。このための操作には2通りあることが、実際にスクリーンリーダーで操作してみてわかりました。

(操作2-1) データが表示されているリスト全体の末尾までフォーカスを送ると、警告ダイアログにたどり着く。了承ボタンにフォーカスを当ててエンターを押す。

(操作2-2) Windows8以降のパソコンで、画面がタッチパネルになっている場合、画面を触って警告ウィンドウにフォーカスが当たると読み上げされる。

例えば操作2-1の場合、末尾にたどり着くまでに、タブキーなどのフォーカス送りのキーを100回以上押さなくてはならない場合もあり、スクリーンリーダーユーザーが自分で気づくのが非常に難しくなっています。

2. マウスオーバーでしか重要なメニューが表示されない例

ログインの必要なWebサービスのログイン後の、ログアウトなどの重要メニューを含むメニュー項目で見かけることが多い仕様です。

(操作1) タブキーを押して、「メニュー」にフォーカスを当てる。

(操作2) エンターキーを押す。

(変化1) 何も変化しない。

メニューの下に、複数の項目があるはずなのに、表示されません。操作2のところで、メニューを選択して有効にする操作として、Ctrl+エンター、スペース、alt+エンター、スクリーンリーダーキー+エンターなど、いろいろあり、全部試してみても、開きません。

スクリーンリーダーを使用しない場合はどうやって使用するかというと、メニューのところにマウスポインタを合わせると、複数項目を含むメニューが出るので、それらのメニューが表示されている範囲からマウスポインタが出ないように注意して(出ると複数項目のメニューが消えます)、実行したい項目のところでクリックします。

こういう場合にも、スクリーンリーダーに、マウスポインタを操作するコマンドがある場合、メニューを開くことが出来る場合があります。上記の操作2のところを、次のように変更します。

(操作2-1) マウスポインタをフォーカスされた項目の位置に移動するキーコマンドを押す。(例えばNVDAではNVDA+Shift+M)

(変化2-1) マウスポインタがメニューのところに移動する。

(操作2-2) マウスクリックのキーコマンドを押す。(例えばNVDAではCtrl+[)

(変化2-2) メニューが開き、下の複数項目のメニューが表示される。

(操作2-3) 矢印、タブキーなどのキーで、メニュー内を移動する。

(変化2-3) フォーカスがメニュー内を移動する。

(操作2-4) 実行したいメニューでエンターキーを押す。

(変化2-4) 実行したメニューが実行される。

このように、操作がとても複雑になります。出来れば、スクリーンリーダーでマウスポインタ操作を使わずにすむような仕様の方が望ましいと思います。なお、この仕様は、スクリーンリーダーユーザーでなくても、タブレット利用者がマウスを使わずに、タッチ操作だけで操作しようとする時にも、開くことが出来ません。

3. ログインの画像認証での例
とあるサービスのログイン方法が、ある日突然変わり、初回ログイン認証をしなければならなくなりました。その初回ログインの仕様です。

(操作1) ログイン名、パスワードなどを入力する。

(変化1) 認証画面に移り、画像が何枚か表示され、「あなたと関係のある画像を選んで下さい」と表示される。

スクリーンリーダーユーザーは、日頃、画像を見ることなくサービスを使用していますので、この質問に答えることが出来ません。困ったので、晴眼者に見てもらうことにします。しかし、個人的なサービスであることもあり、晴眼者は普段そのユーザーがそのサービスを使用していることを見たことがないという状況が生じます。他の人が手伝うことも難しく、ログイン出来なくなってしまう恐れもあります。

相談を受けたスクリーンリーダーユーザーがスマホを使用している場合は、パソコンからの認証をあきらめ、スマホサイトに用意されていた単純な画像認証(アルファベットを読むもの)と、二段階認証を行うことで、初回ログインをすることが出来ます。

このように、実際にスクリーンリーダーで操作してみると、いろいろと困ってしまう仕様のサイトを見かけます。こういったサイトを見かけたら、筆者はHTMLソースの関連しそうなところを読んでみるのですが、HTMLその他の知識が足りないため、そのサイトを再現することが出来ません。実際のサイトオーナー名を出さずに、同じような仕様のサイトを作成出来ると、スクリーンリーダーにとって操作しづらい仕様の例としてご紹介出来て良いのですが・・・。ぜひ、Webデザイナーの方のご協力を得られるとありがたいと思っています。

Webデザイナーの方が、実際にスクリーンリーダーを利用して操作感をチェックするのに、無料で使えるスクリーンリーダーNVDAがあります。

NVDA日本語チームのサイト
https://www.nvda.jp/

NVDAの操作方法につまづいた場合は、NVDAヘルプデスク(視覚障害者総合支援センターちば)にお問い合わせいただくことも出来ます。どなたでも利用することが出来ます。ご利用は登録制となっております。

NVDAヘルプデスクのサイト
http://nvda.help/

また、iPhoneやMacPCの場合は、標準搭載されている支援技術VoiceOverでの操作感チェックが可能です。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中