CSSによる画像置換問題概観

画像置換問題とは

画像置換

ウェブ技術に詳しい方には耳にタコができるくらい聞いた話ではありますが。

これはミツエーリンクスで解説されている通り、HTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法で、具体的にはテキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させる感じで実現します。

このテクニックに対する問題点も同ページで指摘されていて、CSSが有効かつ画像は非表示という閲覧環境において（中略）適用箇所については一切の情報が得られなくなることです。

この功罪については、画像置換の問題点 – てんぽという記事に表でまとめられていて、わかりやすいです。

想定ユーザ像

で、そうしたデメリットに対しての毎度の反論が「どこにそんな特殊なユーザがいるのか」「そんな特殊なユーザは考慮していない」というもので、前者について具体的に考えられるユーザ像を検討してみると、

ダイヤルアップなどのナローバンドでインターネット接続を利用するユーザ
モバイル環境などのナローバンド環境でインターネット接続を利用するユーザ
印刷時に画像表示を無効にして印刷するユーザ

一番下については、通常読み込むCSSをscreenやhandheldメディアのみに限定して、printメディアには読み込ませないことが対策になるでしょう、また印刷用CSS（media=”print”なCSS）も積極的に使っていくべきです。

前二者は、つまり、表示が崩れないために¹ CSSを有効にするけども、帯域節約のために画像はオフにしておくというユーザです。

このへんはGoogle Analyticsを使っても、そういったユーザがどのくらいいるのか定量化できないので、なかなか議論しづらいところではあります。

また、木達一仁さんは、そのような設定変更を「わざわざ」行う程の知識を持ったユーザは、アクセシビリティが損なわれる危険性をそもそも承知しているはずとの意見を紹介しています。

アクセシビリティ確保における優先順位の付け方

さきの反論の後者のものとも関連しますか、なんというか、これはアクセシビリティ確保に対する優先順位の付け方の問題のような気がするのですね。

というのは、私自身もこうした画像置換の問題は確かにあると思うけども、他にもっとアクセシビリティ確保すべき優先順位の高いものがあるんじゃないかと² 。つまり、全ての環境にアクセシビリティを確保するというのはお題目としては言えても「完璧に確保しようか」となると自ずと限界があります。

だから、比較的技術的に貧弱なUAに対して、配慮すべき一線（あるいは妥協）をどこに設定するかという決断が必要になります。その一線まで優先順位に従って対策を講じて、できる限りのアクセシビリティを確保していくことになるでしょう。

なので、この話からいくと、こうしたユーザに配慮しようというウェブ管理者は、前提としてこれより上位にある対策を既に講じていることになります。

その上での対策ですが、まず(X)HTMLをいじらないというのが大前提です。span空要素やらを付加する方法もありますが、構造記述言語としての(X)HTMLという性格に反しますので。

それで、カラクリエイト：JavaScript-enhanced image replacementを試してみたという記事では、javascriptで画像表示が有効か無効かを判定して、無効の場合、要素に施したプロパティを無効にすることで、テキストを表示させるという手法を提案しています。

記事でも触れられているように、javascript無効の環境ではダメポという問題は含んでいますけども、現時点では有効な対策だと思います。

また、ちょっとマシな画像置換 – てんぽという記事では、絶対配置と配置順序に関するプロパティを利用してなんとかしようという方法もあります。

ちなみにこのサイトでも画像置換を多用していますが、私としては、現時点ではこのようなユーザは一線の外にありますので、なんらかの策を施してアクセシビリティを確保しようという気はありません。ただし、その一線の中では最大限アクセシビリティやユーザビリティを確保していると自負してはいます³ 。

おまけ

ところで、帯域節約のために画像オフにしているユーザに、逆に伺いたいのですが、画像オフってそれほど帯域節約になるんでしょうか？

というのは、例えばうちのトップページは300KBほどあるんですが、そのうち画像は86KBあり、全体からすると30%程度です。多いと思われるかもしれませんが、javascriptはなんかかんやライブラリを読み込んで150KBほどあるのでこちらはおおよそ半分程度あります。

あくまでうちのサイトのことなので一般化はできませんが、画像オフがどれほどの帯域節約になるのかなとは思うところです。

テーブルレイアウト+CSSなんてサイトも多いので。mixiなんかはCSSをオフにすると紹介文欄が縦にものすごく伸びます
X 8341等に書いてあることなど。もっと言うなら出典のアクセス性を確保するとか、ケータイブラウザなどのUAに適したUIを用意するとか
そうでないと思う部分があればコメントかブックマークでお知らせ下さい