てんぽ: 画像置換の問題点

HTMLとCSSの規格はよくできていて、真っ当な使い方をしていればアクセシビリティ上の問題はほとんど起こりえないと思う。しかし、CSSで「変なこと」をすると思わぬ落とし穴が。

その例がlist-style-imageの代わりにbackground-imageを使うことと「画像置換」。

リストマーカーをlist-style-imageで画像に変換した場合、画像非表示の環境ではもとのリストマーカーが表示される。 しかし、list-style-imageで表示した画像の位置が気に入らない（これはホントにそう思います）という理由で、list-style:none ＋ padding-left ＋ background-imageで マーカーを消し、パディングで確保した領域に背景画像を表示させるという手法がよく使われる。 これだと画像非表示の環境ではリストマーカーが見えない。

リストマーカー程度ならまぁほとんど問題ないが、「画像置換」にはもっと大きな欠点がある。

「画像置換」の方法としてポピュラーなもの2つ（text-indent, display:none）と、真っ当な方法での画像表示（img要素）の利点欠点を比べてみます。

text-indentの方法

大きな負の値のtext-indentでテキストを画面外に飛ばし、background-imageで画像を表示させる。

display:noneの方法

display:noneでテキストを消し、上位要素のbackground-imageで画像を表示させる。

テキストとCSS2のプロパティだけでは実現できないような表現（文字に影をつけたり、きれいなフォントにしたり）ができるのはimg要素も同様ですが、「画像置換」にはつぎのような利点があります。

• img要素でなくテキストで書かれているので、SEO的に有効（かもしれない）。
• img要素を使わないので、HTMLに手を加えることなく画像を変更できる。

つぎに欠点。

• 画像置換という手法 | Web標準Blog | ミツエーリンクス

しかし画像置換は、CSSが有効かつ画像は非表示という閲覧環境において、アクセシビリティ上の重大な問題を生じます。つまり、マークアップ上の文字情報が隠されたまま画像も表示されなくなりますから、適用箇所については一切の情報が得られなくなるのです。

表にまとめてみる。

• ※1 ブラウザによっては画像ごと拡大できる
• ※2 ブラウザによってはalt属性をコピーできる
• ※3 ブラウザによってはdisplay:noneの内容を読み上げないらしい

CSS有効かつ画像オフなんて特殊な環境にまでつきあってられんというのもアリだとは思うけど、自分は気になるのでこういうことはなかなかできない。 Web Developerで「画像表示を無効」にしていることが多いからなおさら。