2008-11-11
alt属性が空なら、CSSで背景画像として扱うべきなの？
Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？のはてブコメントで何名かの方が「alt属性が空ならCSS指定」というような意見があったので、そのへんのお話。
きっかけ
上記エントリーでは実際に視覚障害者からの一つの意見としてこういう考え方もあるんだよ、ということを紹介しました。
ただ、何名かの方からはてブで「alt属性が空ならCSSで指定」、もしくは「空のalt属性はあまり増やしたくない」というコメントがちらほら見受けられました。
またもや西村あさひ法律事務所より
その一方で、西村あさひ法律事務所のソースを読んでいると、次のようなコードが出現することが分かります。
<ul id="endof-content-area"> <li> <a href="#header-area" class="rollover">ページの先頭へ戻る <img src="/common/img/icon_001.png" width="11" height="10" alt="" /> </a> </li> </ul>
<ul class="link-list-D01"> <li class="pseudo-first-child pseudo-odd"> <span> <a class="rollover wasting-span-inserted" href="/ja/attorney/partners.html"> <img class="icon-A01" height="12" width="15" alt="" src="http://www.jurists.co.jp/common/img/icon_005.png"/> <span class="wasting-span">パートナー</span> </a> </span> </li> </ul>
<h1> <img id="content-title-pic" height="319" width="256" alt="" src="/ja/attorney/img/content-title_pic_E1.jpg"/> <img height="40" width="256" alt="弁護士等紹介" src="/ja/attorney/img/content-title_heading_E1.png" title="弁護士等紹介"/> </h1>
1つ目、2つ目のコードは三角のアイコン、3つ目はカテゴリトップのイメージ画像とでも説明すればよいでしょうか。
コーダーの方からすると、特に1つ目、2つ目の書き方には違和感を感じるかと思います。モダンなCSSの書き方[謎]では大体このように教えられるはずです。1つ目のコードを参考にCSSを紹介すると、
ul#endof-content-area li { padding-left: 20px; background: transparent url(hoge.png) left center no-repeat; }
値は適当ですが、このような三角アイコンは背景画像として指定されることが一般的になっています。このあたりのことを考慮すると、西村あさひ法律事務所は変わったコーディングだといっても差し支えないと思います。
CSSで背景画像を使わないメリット
alt属性が空でも画像をHTMLで書く際のメリットは、いろいろと妄想するとこのあたりかなと思います。
- クリック領域が広がり、ユーザビリティが向上しそう（ページの先頭へ戻るなど）。
- 印刷の際に「背景画像を印刷しない」の設定でも印刷される（カテゴリトップのイメージ画像など）。つまりはブランディング。
うーん、ちょっと思い付きが弱いですかねー。いや、bAの中の人たちはもっと異なる動機だったのかもしれないですが。
で、みんなはどうしてるの？
CSS Nite in Osaka, Vol.12 「alt属性考」では取り上げなかったテーマなのですが、みなさんはどうしていますか？alt属性が空の画像はCSSで背景画像？それともHTMLで書きますか？もちろん、ケースバイケースという考え方もありだと思います。
ぜひコメント、TB、ブクマコメントなどみなさんの意見をお聞かせください。
先に書いておきますが、画像置換の是非について問うてるわけではないので、お間違いありませんように。
