IMGのalt属性・title属性について考える（前編）

alt属性が空なら、CSSで背景画像として扱うべきなの？CommentsAdd Star – TRANS [hatena]

HTMLをマークアップしている時に、IMGのalt属性に何て書こうか悩むことってありますよね。

「この画像に意味（ふさわしい代替テキスト）なんて無いしaltは空にしとくか」っていう人は珍しくないと思うのですが、最近 「alt属性が空なら、CSSで背景画像として扱うべきなの？」 という面白い記事を発見したので、ちょっとalt属性や背景画像について自分なりに整理してみることにします。

そもそもCSSの「背景画像」をどう定義するのか

まず、話を進めるうえでの大前提として、 HTML4以降ではIMGにalt属性を記述するのが必須である というのは理解しておかなければなりません。つまり、文法的に正しいマークアップを目指すのであれば、中身が空だろうが何だろうが絶対にaltは書かなきゃいけません。

そして「altが空 → 背景画像にする」というのは、代替テキストとしてaltを用意する必要も無いような画像、つまり内容として意味を持たない画像ならば背景画像にするんだという考え方ですよね。わかりやすい解釈だし、そういう考え方は “あり” だと思います。

と言っても、僕がその考え方で “あり” だとすんなり思えるのはリストアイコンや矢印、罫線などのささやかなデザインパーツについて。 「僕がCSSによる “画像置換” を使わなくなった3つの理由」 という以前のエントリーにも関連しますが、いわば背景画像を印刷しない設定のままページを印刷してみて、印刷できてなくとも多くの人に「ま、いっか」と思ってもらえるであろうぐらいささやかな要素についてです（ ※ ） 。

※ 以前 はてなブックマーク でいくつかコメントをもらいましたが、その意味ではグローバルナビは印刷されなくてよいから背景画像で「画像置換」を使ってよいというポリシーは理解できます。ただ、本来はグローバルナビが印刷されなくてもよいかどうかを決めるのは制作者ではなく閲覧者なはず。ページのデザインもそのまま印刷したい人、ページ内の要素だけを印刷したい人、いろんなニーズがあると思うのです。ベストな解決法は装飾を省いた印刷用の別ページを用意することだと思うけれど、これは少し手間がかかりそう・・・。
そしてグローバルナビは印刷されなくても構わないというのはパワーユーザーならではの意見だとも思います。一般的なライトユーザーさんたちにはそういう「あえて印刷しない」という発想自体がない気がします。「グローバルナビを印刷したくない」と言えるユーザーは、ユーザー定義のCSSを設定するなどして、さほど労せずにグローバルナビを印刷しない方法を選択できるのではないでしょうか。

僕の場合、イメージ画像であれページの前景として表示されている下の例のような場合については背景画像を使おうとは思いません。だって、シンプルに考えてこれが何かの要素の「背景」とは言えないから。
文書構造という観点からIMGの内容に意味があるかないかを突き詰めて考えることも大切だけど、 ページを構成する要素として「それって背景か？」 ってことも考えていいんじゃないか、と思うわけです。背景画像は「背景（＝テキストや他の画像などの下のレイヤー）」にあるから背景画像なのだ、という実に単純な考えです。

健三が遠い所から帰って来て駒込の奥に世帯を持ったのは東京を出てから何年目になるだろう。彼は故郷の土を踏む珍らしさのうちに一種の淋し味さえ感じた。彼の身体には新らしく後に見捨てた遠い国の臭がまだ付着していた。彼はそれを忌んだ。一日も早くその臭を振い落さなければならないと思った。そうしてその臭のうちに潜んでいる彼の誇りと満足にはかえって気が付かなかった。彼はこうした気分を有った人にありがちな落付のない態度で、千駄木から追分へ出る通りを日に二返ずつ規則のように往来した。ある日小雨が降った。

例えば、上の例のような場合で背景画像にしてしまうというのは次のようなHTMLとCSSになるのでしょうか。親divに背景を指定しているこのようなCSSだとテキストを画像にうまく回り込ませることができないという技術的な問題も起こりえます。

HTML

<div>
  <p>健三が遠い所から帰って...</p>
</div>

CSS

div {
background:url(image.jpg) right top no-repat;
}

p {
width:300px;
}

だからって、まさか空のdivやspanを作って背景画像にしてしまおうということじゃないですよね。中身が空のdivやspanが許せてaltが空なのは許せないというのは、ポリシーとしてちょっとおかしい。

HTML

<div>
  <span id="img"></span>
  <p>健三が遠い所から帰って...</p>
</div>

CSS

span#img {
background:url(image.jpg) right top no-repat;
display:block;
float:right;
height:130px;
margin-left:1em;
width:180px;
}

p {
width:auto;
}

でも、同じようなイメージでも下の例のような場合は僕も背景画像にします。見た目的にも技術的にも背景だと言ってしまえるし。

本当は、グラデーション部分が背景画像でグラデーションがかかっていない部分がIMGっていうのが理想なのだけれども、手間というコストと向き合ってみて余力があればそうしたほうがいいな、っていうのが現実的です。背景画像とIMGを組み合わせて表示する場合のHTMLとCSSはざっくりこんな感じ（↓）でしょうか。

HTML

<div>
  <img src="image.jpg" alt="" />
  <p>健三が遠い所から帰って...</p>
</div>

CSS

div {
background:url(gradation.jpg) right top no-repat;
}

img {
float:right;
margin-left:1em;
}

p {
width:auto;
}

HTML4の仕様書は空のalt属性に言及している

ところでW3Cの HTML 4.01仕様書（邦訳） には、alt属性について次のように書かれています。

• ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと。例えば、見出しや段落を装飾するために加えられた赤い丸の画像について、alt="赤い丸"などとするのは、不適当である。こうした状況では、代替テキストは空文字列("")とする必要がある。何にせよ、著者は、ページの整形に画像を用いることを避けるようにすべきである。その代わりにスタイルシートを用いる必要がある。
• 例えば「ダミーのテキスト」などの無意味な代替テキストを指定しないこと。ユーザが不快なだけでなく、これを音声や点字に変換しなければならないユーザエージェントの処理速度を低下させる。

代替テキストの用意できない意味のない画像については空のalt属性を使ってもよい。というより、altを空にすべきと言っていますね。だから、 空のaltを使うこと自体は何ら問題はない ということです。
ただ、その後の1文で「ページの整形に画像を用いることを避けるようにすべき」とし、その代わりCSSを使いなさいと言っています。

CSSで画像を使うということはすなわち背景画像にするということなので、イメージ画像を背景画像にするのも決して間違った考えではないでしょう。むしろ 携帯電話やテキストブラウザでの表示を重要視する場合には、装飾的なIMGは極力避けて背景画像にしたほうがメリットがありそう に思えます。
その代わり、前述のように画像に対してテキストを回り込ませるようなデザイン上の処理が難しかったり、IMG要素で表現するのに比べると多少制作に手間がかかるという点は、背景画像を使う場合のデメリットと言えるかもしれません。

結局のところIMGかCSSの背景画像かは制作者のポリシー次第なわけですが、大事なのは ある程度しっかりしたポリシーを考えて決めること。そしてポリシーを決めたらきちんとそのポリシーを踏襲すること だと思います。同一のプロジェクト（サイト）で同じような意味合いの要素なのに、ある時はIMGでマークアップされ、ある時はCSSの背景画像で表示される、といった一貫性のない制作方法は感心できませんよね。

ちなみにこの場合のポリシーというのは、 マークアップとしてどちらが理想的かということだけでなく、どちらの方法を使ったほうが制作がスムーズに進むか という運用面も含めたポリシーを言っています。たとえば、画像のロールオーバーをJavaScriptでやりたいから、矢印アイコンのような画像も含めてすべてIMGで作る（altは空）という方針だって全然ありでしょう。

・・・あれれ。エントリーのタイトルにある通りtitle属性についても書こうとしたはずが、イメージ画像は背景画像か否かという話だけでかなり長文になってしまいました・・・。本題のIMGのtitle属性（そして空ではないalt属性）についても自分なりに考えてみたので、近いうちにこのエントリーの後編としてきちんとまとめてみたいと思います。

To Be Continued…