画像置換について考えてみた

見出しやタイトルを画像に置き換えるテクニックに，画像置換 (Image Replacement) ってやつあるよね．それについてちょっと考えてみた．

よく使われているのが，画像を背景として表示し，テキストを画面外に飛ばす方法だ．CSS で解決でき，音声ブラウザでも読み上げられるなどユーザビリティについてもおおむね問題がいるかららしい．たとえば，NTT DoCoMo のサイトでも使われている．でも，Firefox などで見たときに，画面外のテキストまで破線の囲みが伸びてしまったり，結局画面外に存在していたりする点で気持ち悪い．

僕がこの画像置換テクニックを知ったとき，べつに img 要素として記述すりゃいいじゃんって思った．でも，よくよく考えてみるとそれがダメなことに気づく．

そもそも，画像置換が何を目的としてるかってことを考えないとダメなんだよね．画像置換というのは，見出しやタイトルの見栄えを良くするために使われる技術だから，その記述は CSS でしたほうがベター．見せるべき画像（文書中で説明している図とか写真とか．）の場合は img 要素として記述するけど，見栄えに関わる画像を img 要素として記述するのはなんかおかしいってことだ．（まあ，サイトのロゴとかは画像置換じゃなくて，img 要素で記述するのがいいと思うけどねぇ．）

となった場合，一番いい（しかし，Internet Explorer が対応していないため，実用的ではない．）のは，before 疑似要素をつかう方法だろう．画像を表示しない場合やスタイルシートを適用しない場合でもきちんと表示されるし，音声ブラウザできちんと読み上げられる．そういった意味では，正当な手段だと思う．まあ，実際は様々なブラウザで表示されないと困るから，これを導入できないというのが痛い．Internet Explorer 7 で対応するんじゃないかなぁとか思ってたら，対応しないんだもんなぁ．Internet Explorer 8 では対応するのかな？

実装方法は参考文献のサイトが詳しいのでそっちを見てね．（丸投げ）

それにしても，2005年には考えられてたのに，いまだに使えないってのも残念だよなぁ．最近は，JavaScript でやるってのもあるみたいだけどね．

参考文献：
web creators vol.79 特別付録小冊子 スタイルシートデザイン表現事典
Lucky bag::blog: :before 疑似要素を使ってテキストを画像に置換