W-0030 画像の ALT は「必須」?

ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。

IMG 要素の必須属性「 ALT 」

HTML 4 以降、 img 要素(インライン画像)には ALT 属性が必須となりました(省略してはいけない)。

ALT は「代替テキスト (Alternate Text) 」のことで、音声読み上げのブラウザやテキスト表示しかできないブラウザなどのテキスト環境で、「画像の代わりに」閲覧者が受けとるテキストです。視覚環境の場合、画像読み込みが終わるまでの間 ALT を表示したり、 ALT の中身をポップアップで表示したりといった実装の仕方がされています。

ALT は「説明」ではない!

間違えられることが多いですが、 ALT は画像の説明テキストではありません。例えばページタイトルを一枚絵で作った場合、その画像に「タイトル画像」なんて ALT を設定している例をよく見かけますが、これではいけません。非視覚環境の場合タイトル画像の代わりに ALT の中身が参照されるので、その文書のタイトルが「タイトル画像」だという風に解釈されてしまいます。こういう場合、 ALT には画像の中に書かれているタイトル文字列と同じものを書くのが正しい使い方です。

ALT はあくまで「代替内容」ですから、画像の代わりにその文字を置いてみても違和感がないようにしないといけません。

「空の ALT 」は許されるのか?

ALT が必須属性ということは、全ての画像に対し嫌でも ALT を書かなければならないということになります。しかし「罫線」や「ワンポイント」のように飾りとして画像を使っている場合、これらにはどんな ALT を書けばいいのでしょうか。

普通は「罫線」「ワンポイント」のような説明文を書いてしまいがちですが、これは ALT の意味からいえば正しくありません。「画像の代わり」ということを考えれば、罫線画像には「 ----------------- 」、ワンポイント画像には「 * 」などを指定するのが自然な流れでしょう。

あるいは ALT を空にして「代替文字列はない」ことを明示するというやり方もあります。ワンポイント画像など、「文章の中身」と無関係な単なる装飾の場合、むしろこちらの方がベターでしょう。

仕様書では「 ALT は必須」とされていますが、これは「必ず何らかのテキストを設定しろ」という意味ではありませんalt="" と書いて「値なし」と指定することも可能なのです。代替文字がいらない場合は、下手に文字列を入れないで素直に「 ALT はない」と指定しておきましょう。

機械的には処理できない

ALT にどんな内容を書くかは、ページ作成者の力量にかかっています。例えばサムネイルを用いた「ギャラリー」ページを作る場合、サムネイル画像に ALT を付けるべきか否か一つとっても頭を悩ませることになります。

テーブルで大量のサムネイルを一気に配置するタイプのギャラリーでは、タイトル代わりに ALT を指定する必要があります(あるいは TITLE と ALT を同時に指定)。が、ウチのようにサムネイルの横にタイトルを併記してある場合、 ALT にまでタイトルを記述すると同じ文字列が繰り返されることになってしまいます(当サイトのギャラリーにおいては、サムネイル画像はあくまで「プレビュー」の意味しかありませんので)。

こういったところは、 Another HTML-lint のような機械チェックでは検出のできない厄介なポイントです。 WAI ガイドラインもそうですが、結局は人間の目で見て、頭で考えてチェックするしかありません。何にしても、細かい点でも手を抜かないのが、より良い公開文書を作る上でのポイントと言えるでしょう。