画像のalt属性について

必要な理由は？

最近では、徐々にWebアクセシビリティへの関心も高まったのか、画像（イメージマップ含む）にはalt属性をつけようと盛んに言われております。その理由は、アクセシビリティの確保にあります。
画像にalt属性をつけることで、画像を閲覧することの出来ない環境にある方でも、テキストや音声ベースで情報を得ることが出来るようにとのことです。

すなわち、alt属性がアクセシビリティ確保という画像の代替テキストを記すものですから、つけるのであれば代替手段としての役割をきちんと果たせる内容でないと意味がありません。

つけていないとどうなる？

alt属性をつけていない場合、リンクが貼ってあるかどうかで少々扱いが変わります。

リンクが貼っていない場合（例は極悪Webサイト見本１より）
- グラフィカルブラウザの場合は、画像にカーソルを合わせても、ポップアップ文章が出ません。また、画像OFFの状態で閲覧した場合は、画像のスペースを確保した上で、画像に対する説明は表示されません。各ブラウザで画像OFFした場合、以下のようになります。（いずれも解像度１０２４×７６８でのスクリーンショットです）
  Internet Explorer5.5での表示　（別ウィンドウ開きます）
  Netscape6の場合での表示　（別ウィンドウ開きます）
- Lynxという文字ブラウザでは、画像のURL（ファイル名）がそのまま表示されます。
  Lynxでの表示例（その１）　（別ウィンドウ開きます）
- 音声ブラウザでは、画像に関する情報は一切読み上げしません。すなわち、画像が入っていることすら伝わりません。
リンクが貼ってある場合（例は極悪Webサイト見本３のメニュー部分より）
- グラフィカルブラウザの場合は、画像にカーソルをあわせると、カーソルが手の形に変わるだけです。その他はリンクが貼っていない場合と同じです。
- Lynxでは、画像のURL（ファイル名）がそのまま表示されます。リンクへの移動は可能です。
  Lynxで見た場合（その２）　（別ウィンドウ開きます）
  イメージマップの場合は、リンク先のURLがそのまま表示されます。
  Lynxで見た場合（その３）　（別ウィンドウ開きます）
  （注：この部分記述に誤りがあったため、修正しています）
- 音声ブラウザでは、リンク先のURLをそのまま読み上げします。

つけているだけではダメ

HTMLチェッカーはもちろんのこと、最近ではホームページ作成ソフトでも画像にalt属性がついているかをチェックする機能が付いているソフトもあります（ホームページ・ビルダーやDreamweaverなど）。
これらのソフトや機能を使えば、形式上のチェックは出来ます。しかし、機械的なチェックだけであれば、そのalt属性が適切な内容であるかは判断できません。
本当に、alt属性の内容が意味が通じるモノであるかどうかは、最終的に人間の目で判断しないとダメです。

不適切なalt属性は、画像にアクセスできない人を混乱させるだけです。
お飾りで使っている画像のalt属性に「イメージ」という言葉を安易に入れてみたり、逆に画像に関する説明まで本文でしているのに、alt属性で「イメージ」という言葉を入れてしまうと、テキストや音声ベースではどのように解釈すれば良いのかわからなくなります。日本語としての意味が通りませんから。

例を挙げます。

リストマークの場合

ユーザビリティとは
アクセシビリティとは

この場合、alt属性には、以下のような感じで書けば良いかと思います。画像そのものにはあまり大きな意味がありませんので、空白にしておくと良いでしょう。

<img src="s008lis.gif" width="16" height="16" border="0" alt="">

逆に、
<img src="s008lis.gif" width="16" height="16" border="0" alt="クリップの画像">
このような指定はやめておきましょう。意味が通じません。

区切り線の場合

区切りですから、無くても文章としての意味は通じます。alt=""と空白にします。

アイコンの場合

1.リンクが貼っていない場合

前後の文脈から判断して適切な文章を入れます。

「今日は、で、一日中友人達にを書いていました。」

この場合だと、「今日はおうちで、一日中友人達に手紙を書いていました」と言いたいので、
には、alt="おうち"、には、alt="手紙"となります。

2.リンクが貼ってある場合

リンク先の内容を説明します。
WWWサーフィンの経験が少ししかなくても、や　のアイコンで、リンクが貼ってあったとしたら、前者はホームページに戻るリンクを、後者はメールを出すためのリンクだと想像出来るかと思います。
この場合は、
には、alt="ホームへ戻る"やalt="ホーム"となりますし、
には、alt="作者にメールを出す"やalt="メール"となります。

リンクの有無に関わらず、これらのアイコンにalt="アイコン"やalt="画像"はダメですし、alt=""もダメです。画像に意味があるのであれば、きちんと画像の持つ意味を伝えて下さい。

注：以下の例のように、alt属性付き画像とテキストを並べてリンクを貼る場合、リンク内容が２度読み上げられてしまいます。テキストブラウザだと、画像のalt属性とテキストリンクの両方が表示されます。
　ホーム

このような場合には、
<a href="../index.html"><img src="../pictures/b009icn.gif" width="32" height="32" border="0" alt="">ホーム</a>
として、二重に読み上げられるのを防止しましょう。

3.写真やイラストの場合

お飾りの場合は、alt=""が無難です。変にalt属性にコメントを入れてしまうと、文章の意味が伝わらない可能性が大きくなります。

意味のある画像の場合は、アイコンの時と同様の扱いになります。

4.イメージマップ(クリッカブルマップ）の場合

イメージマップの場合は、<area>タグに対してalt属性をつけることで、リンク先の説明を行うことが出来ます。イメージマップとして使っている画像(<img>タグで指定）のalt属性には、そのマップに関する説明を入れます。

いずれの場合も、alt属性に言葉を入れるのであれば、音声ブラウザのことを考慮して、日本語を使用した方が無難です。外国語だと時々アルファベットを読み上げてしまうことがあります。

ホーム