石輪っぷり!
タイトルやリンク画像の表示方法
2007年3月31日 21時50分 | コメント(0) | トラックバック(0)
※この投稿は180日以上前のものです。最新の情報とは異なる場合があります。
現在、かなり CSS によるデザインが使われるようになりましたが、同時に、画像の表示方法について問題のあるサイトが多くなってきているように思います。それは、タイトルやメニューなどのテキスト画像を CSS で表示させているサイトです。
# css Zen Garden の影響もあるかも。実は私もこの問題を感じつつ 1年前までこの手法を使っていました。
これは、(X)HTML 上のタイトルやメニューなどのテキストに、CSS で大きなマイナスのインデントを設定して画面の外に配置(オフレフトと呼ばれる手法)したり、フォントサイズを 0px などにして画面上に見えないようにし、代わりに画像化したタイトルやメニューを CSS で背景として表示させるという手法で、(X)HTML 上にタイトルやメニューなどを画像で配置するより SEO 的に優位で、音声ブラウザでもきちんと読まれるというものです。
一見アクセシビリティにも配慮した手法と思われます(というか、音声ブラウザに対応さえすればアクセシブルだと信じている人が多い)が、この手法には大きな問題があります。
それは、CSS が適用された環境で、画像が表示されない場合です。
(X)HTML 中にきちんと画像として配置していれば、代替テキストを表示できますが、CSS で配置した画像にはそもそも代替テキストなんてものはありません。
このブロードバンド時代に画像が表示されない場合なんて考慮する必要あるのか、と思われるかもしれませんが、画像が表示されないのは何もナローバンド環境ばかりではありません。
例えば弱視の方が Windows のハイコントラスト(白黒反転)設定でパソコンを利用している場合、Webページ上の背景は一切表示されないのです。 CSS で画像を表示するということは、要素の背景に画像を配置するということなので、当然背景画像として配置されたタイトルやメニューは一切表示されなくなるわけです。
これと同じことが印刷する場合にも起こります。IE などの標準設定では背景画像は印刷されませんので、この場合も CSS で表示したタイトル画像などは印刷されません。印刷用の CSS を別に設定してテキストを印刷するようにしていれば別ですが。
よって、タイトルやメニュー、図解などコンテンツとして意味のある画像は (X)HTML 上にきちんと代替テキストを付けて配置し、装飾的な意味のない画像は CSS で配置するというのが、アクセシビリティ的にみて好ましいスタイルと言えます。
ちなみに、昨年のアックゼロヨンアワードの審査基準でも、オフレフトなどの手法は減点ということでした。
試しに、左[Alt]と左[Shift]、[PrintScreen]を同時に押して、ハイコントラスト設定でブラウジングしてみてください。タイトルやメニューが表示されないサイト、(X)HTML 上に画像を配置していても、その画像に透過 GIF が使われていて判読しにくいサイト、その他ページそのものがまともに読めないサイトが多いことに気がつくと思います。
トラックバック(0件)
- :
- « 前の記事
- 複数ファイル・複数行一括変換ソフト
- 次の記事 »
- おまけ?

コメント(0件)
コメントする