目を閉じても図書館の蔵書を検索できるようにする挑戦
「図書館貸出検索」という現在地周辺の図書館から借りたい本を横断検索できるアプリの運営・開発しています。
▼ iPhoneの方はこちら
▼ Androidの方はこちら
ある一通のメールが届きました。
僕は生まれつきの全盲者です。
このアプリがかなり使いにくいと思いました。
いったいどれぐらい使いにくいのか？すぐに確認してみました。
画面が見えなくてもiPhoneの操作ができるようにVoiceOverをオンにしました。そして目を閉じて、「図書館貸出検索」を使ってみました。
その結果がこれです。
衝撃的でした。
VoiceOverから聞こえてくる音声はまったく理解できませんでした。「ボタン」と聞こえてきましたが、ボタンをタップしたら何が起こるのか分からない。「画像」と聞こえてくるが、何の画像か分かりませんでした。
もっとも課題だと思ったのは、アプリのコア機能である図書館に蔵書されているのかどうかが分かるページへの遷移ができなかった事です。
VoiceOverを使う方の多くは、画面上のボタンやリストの存在を把握する事は困難です。したがって今の「図書館貸出検索」は視覚にハンディキャップがない前提で作られてしまっている事に気が付きました。
それではいけない。あらゆる人がこのアプリを通じて「本の予約ができた」「借りたい本が図書館にある事が分かった」といった体験していただきたいと思っています。
そこで、今回はスクリーンリーダー対応を行って画面上で起きている事や情報を適切に読み上げてもらうようにします。
ホーム画面
改善前
改善後
・一番最初にテキストフィールドにフォーカスが当たるように修正
・「ボタン」を「アプリの設定画面を開く。アプリの設定画面を開く場合はダブルタップします。」と読み上げられるように修正
・著者を読み上げる前に「著者は」と読み上げられるように修正
・「現在位置周辺の図書館から探す場合はダブルタップします。」と読み上げられるように修正
本検索画面
改善前
改善後
・「キャンセルボタン」を「ホーム画面に戻る場合は、ダブルタップします」と読み上げられるように修正
・「詳細条件を指定して検索」を「本の詳細検索条件を指定して検索する場合は、ダブルタップします。」と読み上げられるように修正
・「クリアボタン」を「検索履歴をすべて削除する場合は、ダブルタップします。」と読み上げられるように修正
・検索履歴の単語が単純に読み上げられている部分を「単語」+「に関する本を探す場合はダブルタップします。」と読み上げられるように修正
本詳細画面
改善前
改善後
・「ボタン」を「ホーム画面に戻るボタン」と読み上げられるように修正
・著者を読み上げる前に「著者は」と読み上げられるように修正
・「楽天で見るボタン」を「楽天市場で詳細を見る。ブラウザを開いて楽天市場で詳細を見る場合はダブルタップします。」と読み上げられるように修正
・「Amazonで見るボタン」を「Amazonで詳細を見る。ブラウザを開いてAmazonで詳細を見る場合はダブルタップします。」と読み上げられるように修正
・「住所から探すボタン」を「現在位置からではなく、入力した住所近辺の図書館から探す場合は、ダブルタップします。」と読み上げられるように修正
・「貸出中」「世田谷区立下馬図書」を「世田谷区立下馬図書」「貸出中」と読み上げられるように読み上げられる順番を修正
・「予約ボタン」を「予約ボタン。ブラウザを開いて公式ホームページから予約する場合は、ダブルタップします。」と読み上げられるように修正
詳細検索画面
改善前
改善後
・「ボタン」を「本検索画面に戻るボタン」と読み上げられるように修正
・「クリアボタン」を「入力したタイトル、著者名、出版社、アイエスビーエヌをすべて削除する場合は、ダブルタップします。」と読み上げられるように修正
設定画面
改善前
改善後
・「ボタン」を「ホームに戻るボタン」と読み上げられるように修正
・「要望なかぐろ質問を送る」を「要望や質問を送る。開発者に要望や質問を送る場合はダブルタップします。」と読み上げられるように修正
・「このアプリを紹介する」を「このアプリを紹介する。このアプリをTwitterやFacebookで紹介する場合はダブルタップします。」と読み上げられるように修正
・「レビューを書いて開発者を応援する」を「レビューを書いて開発者を応援する。レビューを書く場合はダブルタップします。」と読み上げられるように修正
・「開発者のアプリ一覧」を「開発者のアプリ一覧。開発者のアプリ一覧を見る場合はダブルタップします。」と読み上げられるように修正
最後に
あらゆる人が、このアプリを通じて「本の予約ができた」「借りたい本が図書館にある事が分かった」といった体験をしていただきたい、という一心でスクリーンリーダー対応をしてみました。
VoiceOverユーザーからしたら、まだまだ分かりづらい部分があるかと思います。ぜひVoiceOverユーザーの方々のフィードバックを頂きたいです。
よろしくお願いいたします。
▼ iPhoneの方はこちら
▼ Androidの方はこちら
いいなと思ったら応援しよう！
