本文へ


ある環境下でナビゲーションが消えてしまうサイト

  • 2010年March18日(Thu) 15:50 JST

Webサイトを閲覧する際、背景色が白では眩しくて見難い為にハイコントラスト背景色黒で閲覧されているかたから
Internet Explorer7でツールからインターネットオプションを選びユーザー補助の書式設定で「Webページで指定された色は使用しない」にチェックを入れ、色で背景色を黒にし文字色を白に設定してWebサイトを閲覧すると「ナビゲーションが消えてしまうサイトがあり困っている」とお聞きしたので色々と調べてみました。

NHKオンラインをハイコントラストで閲覧するとナビゲーションが消えてしまうと聞いたので調べてみたところ、プルダウンのナビゲーションになっており、肝心の一番上の階層部分が見えなくなってしまう事を確認しました。

原因は、CSSで一番上の階層部分にナビゲーションの情報を含む画像をCSSで背景画像として設定してあり、ナビゲーションのテキスト部分は、CSSで font-size: 1px; text-indent: -99999px と記述されており、視覚的に見えないように設定してあるからだという事がわかりました。

解決方法の一つとして次の記述をCSSファイルとして保存し、「ユーザー補助」で「web ページで指定された色を指定しない」にチェックを入れ、「ユーザースタイルシート」の「自分のスタイルシートでドキュメントの書式を設定する」にもチェックを入れ、保存したCSSファイルを参照ボタンから選んで 「OK」を押してください。
次に、「色」で背景色 黒で 文字色 白に設定するとハイコントラストで閲覧した場合でもナビゲーション部分がちゃんと表示されます。


div#menuGlobal {
  background: #000000 none repeat scroll 0 0 !important;
  color: #ffffff !important;
}

div#menuGlobal ul li,
ul#menuGlobal li {
  text-indent: 0 !important;
  font-size: 100% !important; 
}

div#menuGlobal ul li a {
  background: #000000 none repeat scroll 0 0 !important;
  color: #ffffff !important;
}


このようにCSSの設定の仕方で情報が消えてしまう事があるので情報を含む画像をCSSで背景画像に指定しないようにしなければいけません。(自分の戒めの為にも書いてます)
(追記:けれど、ハイコントラスト時にCSSの背景画像が反映されないなら、視覚的に見えないように指定している記述も反映されなければ情報を得られないという事はないですよね。)

ですが、テキストのフォントがCSSで設定できないデザインであった場合で、ロールオーバー時と通常時の2タイプの画像を変化させるようにする場合、ナビゲーションのテキストは、視覚的に見えないようCSSでtext-indent: -99999px;と記述し、ナビゲーション部分のa要素にCSSでテキスト情報を含む2タイプの画像を上下に並べ1つの画像にしたファイルをbackgroundの値として設定し、ロールオーバー時(a:hover)は、CSSでbackground-positionの値を変更します。
この設定方法は、結構使われている方法で、スクリーンリーダーを利用されているかたにはちゃんと情報は伝わりますが、先ほども説明したようにこの方法を使うとハイコントラストの環境で閲覧されているかたが情報を得られなくなってしまいます。

また、tv asahi|テレビ朝日は、ハイコントラストの環境で閲覧してもナビゲーションの情報が消える事はなく(他の箇所で消えている部分はあります)、 コープとうきょうeフレンズは、 ハイコントラストの環境で閲覧するとナビゲーションの情報等が消えてしまいます。(先に説明したCSSの設定が使われています)

しかし、スクリーンリーダーのPC-Talkerで2つのサイトのトップページの読上げの確認をしてみると、ナビゲーション部分がFlashになっているtv asahi|テレビ朝日は、ナヒゲーション部分が読上げられないために情報が得られず、コープとうきょうeフレンズは、正確に情報が読上げられるので情報が得られないという事はありませんでした。

今回、調べてわかったハイコントラストで閲覧した時にCSSの設定の仕方で情報が消えてしまうという事は頭に入れておかなければいけない大事な事です。

デザインの質を落とさず、ハイコントラストで閲覧されているかたもスクリーンリーダーを利用されているかたも情報が正確に得られるようにサイト構築するのは難しい事ですが、やはり情報が得られないという状況は無くしていきたい、いえ、無くしていかなければいけない事だと思います。