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

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

画像置換の問題点

2005年11月07日(月)

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に手を加えることなく画像を変更できる。

つぎに欠点。

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

表にまとめてみる。

画像置換の利点と欠点(CSS有効時)
見栄え画像OFF時音声読み上げ文字サイズ変更コピペSEO
テキスト-
img要素alt属性を表示alt属性を読み上げ△※1△※2
text-indent×××
display:none×読まれない?※3××
  • ※1 ブラウザによっては画像ごと拡大できる
  • ※2 ブラウザによってはalt属性をコピーできる
  • ※3 ブラウザによってはdisplay:noneの内容を読み上げないらしい

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

#50
カテゴリ:HTML・CSS
タグ[ CSS HTML ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/50-3b1a8b9f

<<代替え | ちょっとマシな画像置換>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。