22日目：本当のリストを使う（またはうまくズルをする）

次の3つのリンクの blogroll があるとするよね？ Slashdot、The Register、あと dive into mark。つまんない中黒じゃなくて、ちょっとシャレた画像をそれぞれの横につけたいと。どうやればいいだろ？一番よく使われてるのが、<img> タグを各リンクの横に入れる方法。これはうまくできるし、alt を各画像にしっかり入れることでアクセシビリティを高めることもできる。

だけどもうちょっと極めて、本物のリストとしてマークアップ（<ul> と <li> タグでね）することもできる。それで CSS でもって面白みのない中黒を画像に差し替えるんだ。これがいわゆる「正しいやりかただから」って知るかってヒトもいると思うけど、それだけじゃなくて、アクセシビリティの面でも利点があるんだよ。

両方のテクニックの例をあげてみるからね。

誰がトクする？

  1. マーカス。 前回見たように、Lynx は alt 属性のついてない画像のファイル名を表示するから。

  2. マイケルも。Links は画像を表示することはないけど、初期設定では alt のついてない画像に関してはなんにも表示されない。スペーサー画像を無視したかった前回はこれでよかったけど、今回はこれがリストだってことをどうにか表したいから、そのための alt テキストが必要だね。

    あと、マイケルが画像を表示しないで Opera使ってるとき、「画像がみつかりません」アイコンのかわりに alt テキストが表示される。それに上級バージョンのテクニックを使ったんなら、Opera はさらにすごいことしてくれる。壊れた画像アイコンを表示するかわりに、普通の中黒のほうにもどしてくれるんだ。

  3. ジャッキー も助かる。前回見たように、JAWS は alt 属性のついてない画像のファイル名を全部読み上げるから。どうでもいいファイル名にうもれて、リンク名がわかんなくなっちゃくからね。ジャッキーにはこう聞こえるんだ：

    fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark

    alt テキストとして星印を入れとくと、すごくいいよ。JAWS にはこれで画像が中黒として使われてるのがわかるから、読み上げないでようにしてくれる。だけどホームページ・リーダーは星印も読んじゃうんで、ユーザにはこう聞こえる：

    asterisk link slashdot, asterisk link the register, asterisk link dive into mark

    本物のリストとしてマークアップするのが最高。視覚的情報はすべて CSS で制御されてるからページがごちゃごちゃしないし、おかげで JAWS とホームページ・リーダーはリストをリストとして読み上げることができる。この場合こんなふうに聞こえる：

    link slashdot, link the register, link dive into mark

どうしたらいい？

こんな blogroll があるとしよう：

<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

全部の中黒画像に alt 属性をつけなきゃね。星印（アステリスク）を alt として使おう。ホントのリストとしてのマークアップを使ってることを表せるように。（これがツールチップとしてビジュアルブラウザで表示されるのを防ぐためには、空の title 属性も一緒につけておけばOK。）

<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

どうしたらいい？: 上級編

上級者バージョン（でこっちのほうがオススメ）では CSS を使って画像をリストの中黒の代わりに入れます。

<style type="text/css">
ul.blogroll {
  list-style: url(/images/fancydot.gif) disc;
}
</style>

そうしたら今度はテンプレートのほうで、本当のリストとしてマークアップする：

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

結果：

  • 最新ブラウザは画像をリストの中黒として表示する。
  • 画像が非表示になっているブラウザでは、つまんない中黒のまま表示される。
  • ネスケ 4 はいつでもつまんない中黒のまま表示する。
  • テキストブラウザはこの CSS を無視するから、どんな見せかたであれいつもどおりのリストとして表示する。（たいていは星印で表される。）

オマケ：中黒なしのリスト

よくあるもうひとつのリンクリストは、画像まったくなしのヤツ。ただただリンクのみ、右寄せかなんかでこんな感じに：

<div align="right">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="http://diveintomark.org/">dive into mark</a><br>
</div>

こっちも CSS とホントのリストマークアップでもいける：

<style type="text/css">
ul.blogroll {
  list-style: none;
  text-align: right;
}
</style>

それか、左寄せにしたいならこうしてもいい：

<style type="text/css">
ul.blogroll {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

どっちにしたって、リストのマークアップは前に出した例と同じまま：

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

"list-style: none" ていう行は、ビジュアルブラウザで普通の中黒をなくすためのもの。あのネスケ 4 さえも含んだすべてのブラウザで使える。Tobias Schmidt、このテクニック思い出させてくれてアリガト。

さらなる情報源（英語）

 
<< 21日目：スペーサー画像を無視する | 目次 | 23日目：画像に適切なテキストをつける >>