代替テキスト

多くのユーザは Internet Explorer や Netscape Navigator のようなグラフィカルな UA を利用している。しかし画像を受け取らないようにしている人もいるし,目の不自由な人もいる。アクセシビリティを考えるとき,このような人々のためにその画像の役割を伝えるための代替テキストをつけるのは必要不可欠である。

画像の代替テキスト

ペ−ジに画像を貼りつけると,その表現することを直感的に理解できる。それに見た目をも華やかに飾りつけることができる。しかし,こういったページを見ている人の中には,画像を受け取らないようにしている人や,もともと画像を扱わないブラウザを使用している人がいるかもしれない。もしそういう環境にある人がそのページを見たとするならば,その画像がそのペ−ジの中で何を表しているのか,いったい何の画像なのかということはまったくわからないだろう。

「画像を受けとらない」表示例

画像を受け取らないようにしている人には右のように表示される(これは,Windows 95 版 Internet Explorer 5.0 で「画像を表示」のチェックをはずした場合である)。画像を扱わないブラウザには枠すら表示されない。この状態では,まずこれがどんな画像かわからない。それに加えて,実はこの画像にはリンクが貼ってあるのだが,これでは,どこにジャンプするのかもわからないうえに,リンクが貼ってあることすらわからない。このように,ジャンプや承諾ボタンなどのフォーム内のボタンにおいても,同様の注意が必要となってくる。

こういった問題を解決するための一つの方法は,ALT 属性を書くことである。この属性は画像を貼りつける際に必須である。

<A HREF="index.html">
<IMG SRC="image.gif" ALT="目次へ(代替テキスト)">
</A>

代替テキストを指定した場合

このように書けば,上の例は画像を受け取らない人にも右のように表示される。

これならば,どんな図が表示してあったかわからなくても,その図で何を表現したかったのかは理解することができる。フォーム内のボタンに関しても,同様に ALT 属性を使って代替テキストを付けなくてはならない。

ここで,代替テキストに何を書くか,ということであるが,基本的にはその画像と同等のテキストを書く必要がある。物の写真ならその物の名前を書くことも考えられるし,グラフィカルなジャンプボタンならジャンプ先を書くのもよい。つまり,その画像の内容というより,その画像がページの中でどんな役割を果たしているかを書く必要があるのだ。

イメージマップ

画像を受け取らないようにしている人や,もともと画像を使わないブラウザを利用している人,視覚が不自由な人のアクセシビリティためには,単に写真や漫画だけではなく,イメージマップにも同等の注意が向けられるべきである。すべてのイメージマップには,ALT 属性による代替テキストが必要となる。また,イメージマップ以外の方法を用いて,予備のリンクをつくっておかなくてはならない。特に,サーバサイドイメージマップを用いなくてはならない場合は,リンクの貼ってある場所にテキストによるリンクを作らなくてはならない。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版