もしブラウザで画像の読み込みが出来なかったらという杞憂
ずいぶん前の話になりますが、mixiのコミュニティ(たぶんWebデザイン関係)を読んでいたら、メニューボタンなどのロールオーバーをどう実装するかというトピックがありました。
「text-indent:-9999px;」でテキストを隠し、背景画像でそれらしく見せるという方法がありますが、主にSEOスパム的な意味合いでこの手法の是非をめぐっての議論になってました。
# 「text-indent:-9999px;」でググれば色々と出てきます。
で、SEOとはまったく別の次元で「もし画像表示をオフにしていた場合」とか「もしなんらかの理由で画像が読み込めなかった場合」というのを理由に、この手法は避けたほうがいいという意見もありました。その代わりにちゃんとimgタグとJavaScriptで画像を表示させると。
もし表示できなかった場合....それはまあその通りなんですが、特に僕なんかは絵を見てもらってなんぼだと思うので、俗に言うアクセシビリティの方面はすごく関心が薄いというか。その僕のケータイは外部CSSファイルを読み込めないのですが、そういう端末で見た場合にどっちが良いかというと「text-indent:-9999px;」の方なんですよね。そもそもCSS読まないからただのリストとして表示される。
対して画像を貼っちゃった場合、メニューのボタン画像を表示するだけでメモリ食っちゃって、肝心の他の画像が表示できなかったりするんですよね。
まあケータイ向けのサイトはまた別に作れという話でもありますが。
でもこれってすごく面白い観点。
「もし画像表示をオフにしていた場合」という事よりも、誤ってケータイでPCサイトを開いちゃったりする方が多いかもしれないんですよ。つなぎ放題でブロードバンドのこのご時世に、画像表示をオフにしておくというマニアックな人がどれほどいるものかと。alt属性値なんか読んでも仕方ないのが昨今のWebサイトなわけで。
「もしなんらかの理由で画像が読み込めなかった場合」というのはもっと面白くて、そういう場合はメニューボタンどころではなく、コンテンツの他の部分も読み込めないことが多々じゃないかしら。そういうとき僕だったら何度かリロードしてみます。
で、画像だけじゃなくて同じように心配すべきことはHTMLからリンクしてる全てのファイルに言えるわけです。もし外部CSSが読み込めなかったら、もし外部jsファイルが読み込めなかったら、もしインクルードファイルが表示できなかったら。
そんな心配を追求していくと、CSSもjsもSSIもHTMLファイル内に書いてしまった方がいいわけで、さらにいうとそのHTML自体も読み込めるかどうか分からないわけで、RSSリーダーから飛んでみたら何も表示されないサイトだったり、ていうかRSSすらも読み込めてないかもしれないわけで。
だったらもうFAXしちゃったほうがいいんじゃないかと思うんですよ。
ジジジージジジーとね、君らのブログが絶えずプリントアウトされてくるわけよ。そのロール紙をもって僕は通勤電車に乗り皆さんのエントリーを読みます。コメントは付箋にメモして貼っておいてそのうちFAXで返信します。
めでたしめでたし。
投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2008年1月 5日 00:45