Webをいろいろ見ていると、読めない文書に遭遇することがあります。読めない文書を分類整理して、対策を練ってみました。
文字色と背景色が同じ、もしくは似た色になっているので読めない、と言うパターンです。普通は読めるような色の組み合わせにしていると思いますが、考えが甘いとカメレオン状態が発生することがあります。以下のようなパターンが多いようです。
ブラウザの背景色は白(もしくは灰色)で文字色は黒だと信じ切っていて微塵も疑わない、と言うパターン。たとえば、
body{
color: #111;
}
などと指定してあって背景色の指定がない場合、ブラウザのデフォルト背景色を黒、文字色を白にしているような環境ではほとんど読めません。特に、Windows の設定でハイコントラストにしているような場合、それに伴ってブラウザのデフォルトも変わっていることがあります。
body{
color: #111;
background-color: #fff;
}
のように、背景色を一緒に指定するようにすれば回避できます。
背景画像が確実に表示されると信じているタイプ。例えば、
body{
color: #fff;
background-image: url("黒っぽい画像");
}
背景画像が表示される環境では字が読めるのですが、背景画像が表示されないと、前項と同じパターンにはまります。例では、デフォルト背景色が白で、かつ画像表示できない場合に読めなくなります。画像表示をオフにしている場合の他、回線の都合で画像がダウンロードしきれなかったりするとはまります。
body{
color: #fff;
background-image: url("黒っぽい画像");
background-color: #000;
}
画像と似たような背景色を指定するだけで回避できます。
最近増加しているのが、私が「リリパット」と呼んでいるタイプです。おそらくリリパット国の住人なら読めるのでしょうけれども私には読めない、という大きさの字が表示されます。要するに字が小さすぎるのです。
たいていのブラウザには、文字の大きさを手軽に調整する機能があります。それを使って文字を大きくすれば読めるようになります。……たいていの場合は。
しかし、困ったことに、文字調節機能が一切効かない場合があります。それも最近とみに増えています。
body{
font-size: 10px;
}
このように文字サイズが px などで指定されていると、ブラウザの文字サイズの設定が何であろうとも 10px のサイズで表示されてしまいます。環境と読者の視力によっては全く読めません。これは pt などでも同様です。
もちろん、スタイルシートをオフにすれば全く問題ないのですが、簡単にはスタイルシートをオフに出来ないブラウザがあるので困ります。たいていのブラウザには文字サイズ指定を完全に無視する機能もあったりしますが、これも簡単には切り替えられなかったりするので、ひたすらに残念な思いをしつつ読むのを諦めることが多くなるわけです。
この罠は、文字サイズの指定に px や pt を避けることで回避できます。本当は em で指定すると良いのですが、ブラウザによってはさらに残念な思いをすることがありますので、% で指定しておくのが無難でしょう。
もちろん、ユーザスタイルシートでこれらの単位を指定するのはいっこうに構いません。
全く何も表示されずにっちもさっちもいかないパターンというのがあります。
全く何も表示されないので、ソースを見たら JavaScript の document.write で全ての内容を出力しているというパターン。JavaScript がオフだったりするとどうしようもありません。
どうしても JavaScript でないと表現できないものなら仕方ありませんが、そうでない場合は単純な HTML にした方が良いでしょう。どうしても JavaScript が必要な場合は、その旨の注意書きがあると親切です。
また、JavaScript の location.href などの効果を信じすぎている例もあります。
そのままです。Flash Player がなければソースすら読めないのでどうしようもありません。たいていは非Flash版も用意してあってそちらを見れば用は足りるのですが、本気でFlash版しかない場合はしっぽを巻いて帰るしかありません。
PDFの文書。Acrobat Reader がないと表示できないので何ともしようがありません。Flash に同じです。
派手さを追求したりするのは全く構いませんが、それらの技術が利用できない環境を想像出来なかったりすると、多くの人にかなり残念な思いをさせることになります。これらで残念な思いをさせないためには……Flash や PDF を使わない、HTML版の文書を用意するくらいしかないでしょう。
実際、かなり多くのサイトは「Flash無しバージョン」などというリンクを作り、HTML版を用意しています。