スクリーンリーダーにできること・できないこと

1ページ>2ページ

視覚に障害を持つ方がWebサイトを利用する場合をはじめ、パソコンを使う際に活躍するのが、「スクリーンリーダー」と呼ばれる画面の文字を読み上げるソフトです。とはいえ、ページに貼り付けてある絵に何が描かれているのか?ということまでは知ることができません。

もっとも、「何の画像なのか」ということだけであれば、後でご説明いたします「ALTタグ」などの方法で対応できます。

しかし、実はもうひとつ問題があるのです。通常、画像素材サイトで素材をダウンロードする場合、画像にマウスカーソルを合わせて、Windowsであれば右クリックで「名前をつけて画像を保存」…といった手順になる事が多いかと思います。視覚障害がある方の場合、パソコンの操作はキーボードによるショートカットを利用することになるので、この操作が難しいのです。

ですが、これもページにちょっとした細工をすることで、キーボード操作だけでも画像がダウンロードしやすくなるのです。

画像にALTタグを指定する

Webサイトにある画像の上にマウスカーソルを置くと、テキストによる案内文が表示(ポップアップ)されることがあります。これを実現しているのが、IMGタグで画像ファイルを指定する際、一緒に設定するALTタグです。

試しに、画像▼の上にマウスカーソルを置いてみてください。「人形で遊んでいる女の子」というテキストが表示されたでしょうか。
人形で遊んでいる女の子

これは、次のサンプルソースのようにALTタグで文字列を指定することで実現されています。

ALT="人形で遊んでいる女の子"
IMGタグ・ALTタグについてはこちら(from とほほのWWW入門)で詳しく解説されています。

解説ウインドウが開くようにする

スクリーンリーダは、このALTで指定されているテキストを読み上げます。しかし、もうちょっと長い解説をALTタグで説明しようとすると、場合によってはテキストがページを覆ってしまい、今度は晴眼者にとって大変に見にくいサイトになってしまいます。

そこで、ALTタグとは別に、詳細な解説文を書いた小さいページが開く「解説ボタン」を用意してみましょう。解説文は、色や形、デザインなど、具体的に画像がイメージができるような内容がいいですね。▼のサンプルページを開いて、「解説」ボタンを押してみてください。

ガイドウインドウのサンプルページ

まず、以下の部分を、素材を置くページのタグの中に書いてください。


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。