Web素材/Web素材の基礎知識とマナー

素材サイトのバリアフリー(2ページ目)

視覚障害の方がホームページを作る際、他の方に見てもらう事を考えて、色々な画像素材を使いたいという事があります。視覚障害がある方にも使いやすい画像素材サイトにする工夫を紹介します。

執筆者:浅野 今日子

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

1ページ>2ページ

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

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

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

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

画像にALTタグを指定する

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

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

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

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

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

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

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

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

まず、以下の部分を、素材を置くページの

タグの中に書いてください。


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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます