25日目：本当のホリゾンタルルールを使う（またはうまくズルをする）
投稿と投稿のあいだに仕切りがほしいとしよう。普通のホリゾンタルルール（<hr>タグ）じゃ面白くないんで、画像を代わりに使うことにしてみる。それっていいアイデアだし、きちんと合った alt テキストをつければ、もっとアクセシブルにもできるよ。
でもね、もう一歩つっこんで、本物のホリゾンタルルールを使うって手もある。そのうえで CSS トリックで最新のブラウザでは画像として表示されるようにするんだ。古いブラウザとかテキストブラウザでは、この CSS は無視されて単なるもともとのホリゾンタルルールとして表示されるだけ。（テキストブラウザではたいてい、アンダーラインかダッシュが画面の幅にあわせて並べられる。）
どっちのテクニックも例を出すからね。
誰がトクする？
- ジャッキーだ。前に見たように、JAWS は
alt属性のない画像のファイル名を読み上げるから。 - マーカスも。Lynx は
alt属性のない画像のファイル名を表示するから。ホントのホリゾンタルルールを使えば、Lynx は画面の幅のアンダーラインを表示する。 - マイケルもね。Links は
alt属性のない画像は何も 表示しない。となるとマイケルにはそこに区切りがあるってことがわからない。altテキストか、できれば本物の<hr>タグをつければ、Links は画面の幅のダッシュを表示してくれるから、つけとくのが大事なんだ。
どうしたらいい？
もし画像をホリゾンタルルールとして使ってるなら、アクセシビリティを上げる一番簡単な方法は <img> タグに alt 属性を足すこと。空の title 属性もつけて、ビジュアルブラウザでツールチップが出ちゃわないようにするといいよ。こういうふうなのを：
<img src="/images/fancyrule.gif" width="442" height="25">
こう変える：
<img alt="--" title="" src="/images/fancyrule.gif" width="442" height="25">
意気込んで alt に80コもダッシュつけないでいいよ。2、3個で充分。
どうしたらいい？: 上級編
上級者バージョン（でこっちのほうがオススメ）では、本当の <hr> タグを使います。だけど <hr> タグの直接スタイリングへのブラウザの対応はひいきめに見ても当てにならないとしか言えないんで、<div> ってダミータグで画像を表示しよう。こんな CSS をテンプレートの上のほうの <style> ってところに入れてみて。（style-sites.css みたいな外部スタイルシートを使ってるなら、その中のどこでもいいから入れておいて。複数のスタイルシートを使ってるなら、ネスケ 4 に対応してるヤツに入れてね。）
div.hr {display: none} /*/*/a{} div.hr { display: block; height: 25px; background-image: url(/images/fancyrule.gif); background-repeat: no-repeat; background-position: center center; margin: 1em 0 1em 0; } hr {display:none} /* */
（height には、画像の高さを入れる。background-image には画像のアドレスを入れよう。）
そしたらテンプレートのほうには、デザインをつけたホリゾンタルルールを入れたいところでこうする：
<div class="hr"></div><hr />
そうすると：
- 最新ブラウザは全部、飾りのない普通のホリゾンタルルールの代わりに、画像のほうを表示する。
- ネットスケープ 4 は普通のホリゾンタルルールを表示する。
- テキストブラウザは CSS を無視するから、普通のホリゾンタルルールを表示する。 （だいたい画面の幅いっぱいにアンダーラインかダッシュが表示される。）
さらなる情報源（英語）
- 追加のスタイルシートを足さずにネスケ 4 から CSS を隠す。これが上の上級編で使ったテクニック。
- CSS1 とデザインされた HR。ネスケ 4 でもホリゾンタルルールを飾りつけてみようなんて張りきってるひとに。 頑張ってネ。