ブラウザが画像読込を停止出来る機能を持つと言う事実は、スタイル作りにとって意外な盲点となり得ます。
最近では、CSSに背景画像を組合わせる事で、途轍もなくスタイリッシュなデザインを実現しているサイトをよく見かけます。
そんなある日、そんなサイトの一つを、ファイヤーフォックスで見ていたときの事です。
もし、画像が無かったら、どう見えるだろうか？
こう思って、制作者はすかさずファイヤーフォックスの設定項目にある「Load Images」のチェックを外してみました。
リロードするや否や、現れたのは、余りにも間抜けなデザイン――ならまだ良かったくらいで、背景画像が消えた事で、前景文字が背景色に紛れて見えなくなっていたのです。
そのサイトが結構ストリクトなサイトだったので正直驚きました。
以下はかなり意地悪な発言に思われるかも知れませんが、全て事実です。
ここではテキストブラウザや音声ブラウザ、或いはモバイルブラウザの事は取敢えず度外視して、一般のPCでのグラフィカルなブラウザだけに限って考察してみましょう。
結論から言えば、このように環境を限定したとしても、その上でCSSをいくら用いても、見映えを思い通りにする事は不可能です。
ユーザスタイルシートで、全セレクタの全プロパティに!improtant宣言を付けているスタイル定義ファイルを用いている場合、制作者のスタイルは完全に閲覧者のそれに置き換わります。
閲覧者の中には、自分が作ったユーザスタイル以外を一切受付けない者もいるかも知れません。
意地が悪いと思うかも知れませんが、今回の制作者みたいにわざと背景画像読込を停止させて見ている閲覧者もいるかも知れません。
そもそも、低速回線・ISP従量料金制と言う環境では、画像の読込を避けたがる閲覧者がいてもおかしくありません。
何度も書いている事ですが、改めて書きましょう。
この文書を書くきっかけとなった某サイトのような愚をおかさないためにも…。
例えば、モスグリーンを主体とした背景画像「BGImage.GIF(このファイル名は架空です)」を用いて、前景色に白を用いる<dt>要素に対して、以下のようなスタイルを当ててはいけません。
dt {background: url('BGImage.GIF');color: #fff;}
これの何処がいけないかと言いますと、backgroundプロパティに画像のURIしか指定していない事です。
この場合、画像がモスグリーンと言う仮定なので、以下のようなスタイルを当てるべきです。
dt {background: url('BGImage.GIF') #090;color: #fff;}
これで、画像を読み込まない設定になっていても、代りにモスグリーン無地が背景になって、前景の白文字がしっかり読めるようになります。
オフ・レフトとはホームページリーダ対策で解説しておりますが、要するにグラフィカルなブラウザでは見せる必要が無いコンテンツを、画面の遙か左の果てに追いやって、ブラウザのクライアント領域から隠してしまうと言うテクニックです。
これは、音声ブラウザとして最も有名なホームページリーダが、グラフィカルブラウザであるインターネットエクスプローラのパーサを拝借していて、このためauralメディアのスタイル定義ファイルではなく、screenメディアのスタイル定義ファイルを適用してしまい、「display: none;」プロパティを当てられている音声ブラウザ向けのコンテンツ(ナヴィゲーションなど)がパーサによって無効にされてしまう、すなわちホームページリーダでも出力されないと言う問題がある事から考案されたテクニックです。
さて、このオフ・レフト、音声ブラウザ向けのコンテンツを隠すためだけでなく、画像を表示させるためにも応用される事があります。
これにはいくつかの理由があります。
検索エンジンのクローラも<img>要素のalt属性を代替テキストとして解釈すべきなのですが、alt属性にキーワードを必要以上に押し込むスパム手法(キーワード・スタッフィングと言うそうです)が蔓延ったため、対策としてalt属性を評価しなかったり、alt属性値のテキストの評価を辛くしたりといった措置を取るようになったのです。
このため、<img>要素で画像を表示させずに、生テキストを記述し、画像は背景画像で表示させ、テキストはオフ・レフトで隠してしまうと言うテクニックが編み出されました。
オフ・レフトを用いた場合、画像はCSSのスタイル定義ファイルからリンクされるため、CSS非対応環境では余計な読込が行われません。
また、オフ・レフトもCSSの機能に依るものであり、従ってテキストもオフ・レフトされず、代替テキストとして機能する事になります。
<img>要素は元々画像表示ありきで考案された要素なので、画像表示の出来ない環境での代替テキストの記述法は余り自由とは言えません。
alt属性は一応ありますし、現行の仕様ではlongdesc属性で代替テキスト文書とリンクする事も出来ますが、長めの文章を代替テキストとする場合は余りにも不自由です。
そもそも、HTMLはテキストをマークアップするための言語であり、テキストを持ち得ない空要素が文書中に現れる事などあり得ない筈です。
こう言った理念から、<img>要素を用いずに画像は背景画像にして、代替テキストとなるべきものを生テキストにしてオフ・レフトで隠してしまうやり方を採る事が考えられます。
閲覧者が画像読込を停止させた場合、このような方法で記述された要素について、画像は表示されない、テキストもオフ・レフトされていて読めないと、まさに最悪の結果を惹き起こします。
つまり、アクセシビリティ対策と言いながら、結果的にアクセシビリティを損ねる事になるのです。
画像表示には素直に<img>要素を用いましょう。
堀北真希うさぎがソフトコンタクトを着けているイラストと仮想TVCM動画〜平成一桁頃のボシュロム製ソフトコンタクトのCM風に〜
