スクリーンリーダーってなに?
スクリーンリーダーは、パソコンやスマホの画面に表示されている内容を、音声で読み上げたり点字で出力したりするソフトウェアです。主に目の見えない人・見えにくい人が、画面を見ずにコンピュータを操作するために使います。
「画面を読み上げる」と聞くと、書いてある文章を上から順に朗読してくれる機械を想像するかもしれません。だいたい合っているのですが、実際にはもう少し賢くて、「ここは見出し」「ここはボタン」「ここはリンク」といった要素の種類まで一緒に伝えてくれます。たとえばボタンの上にカーソルが来ると「送信、ボタン」のように読み上げるわけです。
例えるなら「電話越しに画面を説明してくれる人」
イメージしやすいのは、電話で誰かにWebサイトの操作を手伝ってもらう場面です。相手には画面が見えていないので、あなたはこう説明しますよね。
「今、上のほうに『会員登録』って大きな見出しがあって、その下に名前を入れる欄、メールアドレスを入れる欄があって、一番下に青い『登録する』ボタンがあるよ」
スクリーンリーダーがやっているのは、まさにこれの自動版です。そして重要なのは、この説明の質が説明する側の言葉づかいに左右されること。「そこにある、あれを押して」と言われても相手は動けません。同じように、Webページ側が「ここは見出しです」「このボタンは何をするボタンです」という情報をきちんと持っていないと、スクリーンリーダーも「ボタン」としか読めず、利用者は何のボタンか分かりません。
どんなものがあるの?
スクリーンリーダーは特別に買ってくるものばかりではなく、OSに最初から入っているものもあります。使い始めるのにお金も追加インストールも要らないケースが多い、というのは覚えておいて損はありません。
操作は基本的にキーボード中心です。マウスで「ここをクリック」ができない前提なので、Tabキーで要素を順番に移動したり、見出しだけを拾って飛ばし読みしたり、といった独自のショートカットが用意されています。
作る側が気をつけること
スクリーンリーダー利用者にとって使いやすいページかどうかは、見た目では分かりません。よくあるつまずきポイントを挙げておきます。
- 画像に説明文がない — 画像の代替テキスト(alt)が空だと「画像」としか読まれず、何が写っているか伝わりません。
- 見出しを文字の大きさだけで表現している — 太字で大きくしただけでは、見た目は見出しでも機械にとってはただの文字です。見出しとして扱われないと、飛ばし読みの目印にもなりません。
- 「こちら」というリンク — リンクだけを拾って読む使い方をすると、「こちら」「こちら」「こちら」が並ぶだけで区別できません。
- 色だけで情報を伝える — 「赤い項目が必須です」と書かれても、音声では色が伝わりません。
逆に言うと、これらは「見た目を変えずに直せること」がほとんどです。デザインを崩さずに対応できる部分が多いのは、わりと救いだと思います。
自分でも触ってみると早い
正直なところ、文章で100回説明されるより、一度自分の作ったページをスクリーンリーダーで読ませてみるほうが圧倒的に理解が早いです。目をつむった状態で、音声だけを頼りにフォームを最後まで入力してみる。それだけで「あ、このボタン何のボタンか全然分からない」といった問題が一気に見えてきます。
そして気づくのは、スクリーンリーダー対応は特別な人のための特別な作業ではなく、ページの構造をきちんと書くという当たり前の作業とほぼ同じだということです。見出しは見出しとして書く、ボタンはボタンとして書く、画像には説明をつける。それをやっておくと、結果として検索エンジンにも読みやすい、整理されたページになります。
このページは役に立ちましたか？