Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2005年6月10日
画像置換という手法
フロントエンド・エンジニア 木達
画像置換と呼ばれる一連のテクニック群があります。これはHTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法を指します。たとえば、テキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させます。詳しくは、Dave Shea氏の記事「Revised Image Replacement」を参照してください。
画像置換は、マークアップに一切手を加えることなく画像を別のものに差し替えることができることから、デザイン変更が非常に容易という利点があります。またこの手法に少しばかり手を加えれば、JavaScriptに頼ることなくCSSのみでロールオーバー効果を得ることができるため、ナビゲーションのボタンに利用されているのをよく目にします。
しかし画像置換は、CSSが有効かつ画像は非表示という閲覧環境において、アクセシビリティ上の重大な問題を生じます。つまり、マークアップ上の文字情報が隠されたまま画像も表示されなくなりますから、適用箇所については一切の情報が得られなくなるのです。余計なマークアップを加えることなくこの欠点を完全に解決した手法は、今のところ登場していません。
ターゲットユーザーのうち、どれだけの人々が上述のような環境を使用しているかはサイト個々に異なるでしょうが、ダイヤルアップなどのナローバンドでインターネット接続を利用する方々のなかには、少しでも帯域を有効活用できるよう、Webブラウザの設定を（CSSは有効のまま）画像非表示にしている可能性が考えられます。
以上の理由から、画像置換を採用すべきかどうかは、その長所と短所をしっかり踏まえたうえで、慎重に検討されるべきです。コンテンツとして有意な画像、文字情報を含んでいる画像については、CSS側から表示を制御するよりも、img要素として（適切なalt属性値とともに）マークアップしたほうが、アクセシビリティ的には好ましいでしょう。
コメント
画像置換の方法より
JavaScriptを使ったほうが良いらしいと聞いたのですが。
JavaScriptを使う上でのメリットデメリットは何なのでしょうか？
Posted by: ひよこ : 2007年4月14日 06:01
ひよこさま、コメントありがとうございます。ご質問いただいた内容では、お話されている手法が具体的に把握しかねますので、正確にはお答えできません。もしよろしければ、サンプルのページやコードを提示していただければと思います。
以下、JavaScriptを用い、画像置換ではないがそれに近い、もしくは相応の機能を実現する手法を想定してお答えしますが、当然ながらJavaScriptが無効な閲覧環境では期待したとおりの機能なり視覚表現が得られないことがデメリットになります（採用される手法によっては、ホバー時の画像ファイルパスの取り扱いが煩雑になる懸念もあります）。
メリットはその逆で、ターゲットとする閲覧環境でJavaScriptが有効であれば、画像置換がもたらすようなアクセシビリティ上の問題を生じさせずにロールオーバー効果を得られる、ということだと思います。
いずれにしましても、JavaScriptの有効/無効にかかわらず、文書中の情報や機能を利用可能にできるよう配慮することが重要だと思います。そうすることで、Webというプラットフォームを最大限活かしたコミュニケーションが実現できるからです。
Posted by: ミツエーリンクス : 2007年4月16日 14:58
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/38
コメントする