imgタグにおけるaltの使い方について

HTML文書においてはimg要素を使ってインライン画像を表示することができますが、Lynxのようなテキストブラウザや画像表示をOFFにしている利用者のためにはalt属性によって画像の代わりとなる代替文字列を用意することができます。いえ、正しくは「用意できる」ではなく「必ず用意しなければならない」ものです。HTML4においては、altはオプションではなく「必須」の属性とされています。

WWW利用者の環境
alt属性の使い方の基本公式
伝えるべき情報
なぜalt文をうまく組み込めないのか
alt="" ?
- img要素のtitle属性を使う

WWW利用者の環境

近頃はNetscape NavigatorやInternetExplorerが全盛で、それらに合わせたページを作ることが当たり前のように思われていますが、実際は：

これらのグラフィカル・ブラウザを使っているが、回線の事情や、よりスピーディなアクセスを求めて画像をOFFにしている
携帯端末を使っていて、画像機能はごく限定されている
Lynxのような文字ベースのブラウザを使用している
目が不自由で、文字を音声合成で読み上げて「聞いて」いる

という利用者もいることを忘れてはなりません。やたら重厚な画像のページが増えたために、自己防衛策として基本的には画像をOFFにし、必要に応じて画像をロードするという、(1)の利用者は少なくないと思いますし、iModeなど(2)の携帯端末利用者は、今後はPCからの利用者を上回る可能性もあります。altを正しく提供するというのは、こうした利用者にとっても自分のページを有益なものとするために、とても重要なことです。(4)に関してはハンディがあっても利用できるページづくりも参照してください。

alt属性の使い方の基本公式

Tom Neff[1]はalt属性の使い方を、状況に応じて次のように要約しています。

画像が飾りの小さなアイコン（たとえば箇条書きの頭につける）ならば、それらしい文字で代替する： alt="*" など
画像がそれ自体はたいして情報を持たないものや言葉では説明不能な場合（リンクを除く）、単にalt=""とする ^* （リンクのアンカーが画像のみのときにこうしてしまうと、Lynxのような文字ベースブラウザにはリンクの手だてがなくなるので注意。逆に、クリッカブルマップはこうしたブラウザにはどのみち無意味なのでalt=""がふさわしい）。
大きな画像をロードするためのリンクであるサムネイル（縮小画像）やサウンドファイルへのリンクの場合は、選択した結果何が起こるか良く分かるような説明を記述する：

（例） <a href="bigpic.jpg"><img src="thumbnail.gif" alt="[Get Picture]" /></a>
画像がロゴマークなど文字をイメージとして表現したものなら、それと同等の文字を記述する

（例） <img src="logo.gif" alt="KANZAKI INC." />

伝えるべき情報

Alan Flavell[2]は、HTMLで情報を提供することの意味を 「あるトピックについての論理的な説明」を利用者に伝達すること と定義し、"HTML記述のメカニズムに関するコメント"は適切ではないと主張しています。つまり、

（不適切な例） <img src="logo.gif" alt="Company Logo" />

のようなalt文は、そこにロゴの画像がある事しか示していません。このような記述はHTML文書によって伝えようとする「トピック」に関する情報ではなく、HTMLをどうやってコーディングしているかということを示すもの(メタ情報）でしかないということです。ここで伝えるべき情報は「ロゴ画像がある」ということではなく、「○○会社についてのページである」ということなのですから

（適切な例） <img src="logo.gif" alt="○○会社" />

とするべきであるというわけです。WAIの「ウェブコンテンツのアクセシビリティのための指針」では、これを等価な内容を示す代替テキストと表現しています。

なぜalt文をうまく組み込めないのか

altによる代替文を組み込むことが難しいのは、たいていはその画像を何のためにそこで使用しているか、作者自身も良く分かっていないからだと言えます。本来HTMLでの画像は、それを使うことによって情報を補強し、より理解が進むようにするために用いられるはずです。何となく思い付きで挿入された画像は、当然のことながらaltとして用意するべき適切な言葉はなかなか見つからないでしょう。

本当にその画像は必要でしょうか？

もっとも、これは演出としての画像を全面否定しているわけではありません。新しいブラウザの新しい表現力を使うことは、ケースに応じて積極的に取り組まれるべきです。Tom NeffやAlan Flavellは、こういう演出的な画像にはalt=""を使うべきだと述べています（これには若干異論もありますが、要は特定のブラウザだけではなく、いろいろな環境を想定して、画像が表示されない場合でも十分意味が通るHTMLにせよということです）。

alt="" ?

（この項目はやや古い考えです。新しい手段は次項のtitle属性に関する説明を参照してください。）

〔古い情報〕

さて、以上の議論はLynxのようなテキストベースのブラウザを強く意識したものであったわけです。ほとんどの内容は、画像をOFFにしたグラフィカル・ブラウザ（Netscapeなど）にもあてはまるのですが、 alt="" は少し別の考え方もあるように思います。

NeffやFlavellは、「不十分な説明や"A picture of Doublebass"のような画像自身についての情報を提供するくらいなら、何も表示されないようにすべきだ」と言っています。Lynxの場合は確かにそうでしょう。しかし、Netscapeで普段は画像をOFFにしておき、必要なものだけロードしようという利用者にとってはどうでしょうか。

個人的な利用法から言えば、たとえ"A picture of Doublebass"のような、それ自身では本質的な情報になり得ないメッセージでも、空白より随分ありがたいように思います。グラフィカル・ブラウザで画像をOFFにしてページを開くと、単なる「画像」アイコン（width, height属性が指定されていれば画像があるはずの空白の枠）が表示されるわけですが、ここで何かaltによるヒントがあれば、その画像をロードすべきかどうかを判断することができます。これがalt=""となっていると、そこにどんな画像があって、ロードすべきかどうか見当がつきません。

そんなわけで、説明しにくいもの全てをalt=""にしてしまうのではなく、（文字ブラウザでの表示も考慮しながら）何らかの手がかりをalt文として提供しておくのは、意味のあることではないかと思うのです。

〔以上、古い情報〕

img要素のtitle属性を使う

HTML 4.0ではimg要素やa要素にtitle属性という新しい機能が導入されました。これを利用すると、ブラウザにその要素が指し示すリソースの内容を情報として提供することができ、いくつかのブラウザでは、その要素上にマウスカーソルを1〜2秒とどめておくと、titleとして記述されている文字が小さな「チップ」としてポップアップしたり情報欄に表示したりするような仕掛けになっています。

これをうまく利用して、文字ブラウザには煩わしくなく、グラフィカルブラウザで画像をOFFにしているユーザーには有益な情報を提供することが可能です（古いブラウザでは、title属性を理解できずに、マウスを持っていったときにalt属性の内容ポップアップすることもあります）。

img要素にaltとtitleの両方を加えてみた例を下に示します。お使いのブラウザでどのように表示されるか（グラフィカルブラウザならマウスを持っていったときに何が表示されるか）、比べてみてください。altには「IMAGE with ALT」、titleには「代替テキストを加えた画像」を設定しています。また参考までに、このページのリンク（a要素）にはtitle属性を加えていますので、こちらの働きもご覧ください。

IBMホームページリーダー3.01などの音声ブラウザは、alt属性だけでなくtitle属性の内容も読み上げることができます。

img要素にtitle属性は使うべきではないのか

title属性をツールチップとして用いることの是非はいろいろ議論の対象になっており、2003年12月9日のHTML Techniques for WCAG 2.0草案ではimg要素にtitle属性を用いることに否定的な見解が示されました。

10.2 Image titles
Task:Do not use the title attribute on images.

While the title attribute can be used on most elements, it should not be used on the img element. The semantics of title are too easily confused with alt and longdesc (see Short text equivalents for img elements ("alt-text") and Long descriptions of images ) and user agent support is extremely inconsistent.

W3Cのドキュメントでは、HTML4が発表されてから1999年頃まではimg要素にtitle属性を用いる例がしばしば見られましたが、2000年頃からは使われなくなっているようです。

この点に関する議論は、W3Cメーリングリストの次のメッセージとその関連スレッドも参照してください。

Clarification needed on ALT/TITLE tooltips (2003-06-23)
RE: ALT as required attribute (2003-02-03)
Title on image: [techs] Latest HTML Techniques Draft (2003-12-03)

以前このページで簡単にコメントしていた「alt要素」に関しては、新しい情報も加えた「ちょっとしたメモ - alt要素？」をご覧ください。

Acknowledgement

このページを最初に作成する際に、

Tom Neff and Eric Bohlman on HTML IMG tag alt attributes
alt texts in IMG by Alan Flavell

を参考にしました。