マークアップとしては必要だけど、
ブラウザでの表示時には見せたくない場合がある。
そういう場合はスタイルシートで

> display:none;

とするのが普通だと思う。
ウチのWebページだと

> ↑本文↑
> <h1 style="display:none;">ナビゲーション</h1>
> ↓メニュー↓

みたいに使ってた。実際はCSSファイルに書いてるけど。
音声ブラウザについてもこれで大丈夫だと思ってた。
音声ブラウザはスタイル関係ないと思ってたからね。
ところが「display:none」を指定すると音声ブラウザも読まないらしい。

仕様上は「音声ブラウザには読ませたい」のであれば
スタイルの指定としてこれでは正しくなくて、

> @media screen{h1{display:none;}}

とかやって、「aural」にdisplay指定が及ばないようにしなきゃいけない。
しかし、ブラウザ間で色々違うのは音声ブラウザの世界でも一緒らしい。
ある音声ブラウザではIEのレンダリングエンジンを使っているらしく、
「screen」としてレンダリングした結果を読み上げるらしい。
その結果、IEで表示されなければ音声ブラウザでも読まれないことになる。

それじゃあどうすればいいのか。
表示（レンダリング）はされるけれど見えなければいい。

> position:absolute;
> overflow:hidden;
> width:0px;

これで、「そこには存在するけど見えない」状態になる。
他にもやり方はあるだろうけど、「left:-100%;」なんてするよりは
幾分スマートじゃないだろうか。


ちなみに通常のブラウザでは「display:none;」を指定していても
画像の読み込み自体はされるようなので、
アクセス解析用の1ドット画像なんかに「display:none;」を指定しても大丈夫。

---

＜mixi専ブラ | 2月の記事一覧 | 俺のマクロスF始まった＞
＜＜前の5件 | ぜろろん雑記（開発中）TOP | 次の5件＞＞

---

コメントはまだありません。

このブログシステムはまだ開発中です。
コメントフォームが表示されていても書き込むことはできません。