24日目：イメージマップに適切なテキストをつける
有名なサイトでクライアントサイドのイメージマップを使ってるのが多くて驚いたよ。僕自身は使わないし、どのブログテンプレートにも最初からはついてこないと思うんだ。けど、たくさんのヒトが作りかた知ってるんだね。イメージマップがなんなのか知らないひとは、Leslie Harpold がホームページの一番したのナビゲーションで使ってるから見てみてよ。あれは全体で1個の画像なんだけど、"archives" をクリックすればあるページに行くし、"by category" をクリックすると他のページに行けるってふうになってる。
イメージマップってとんでもないアクセシビリティの敵みたいに思えるけど、そんなこともない。画像にはそれと同等のテキストが必要なように、イメージマップとそのクリッカブルエリアにも代替テキストが要るだけ。画像そのもの（<img> タグにね）と、それぞれのクリッカブルエリア（<map> にはさまれた <area> タグ。これがこのエリアをクリックするとどこへリンクするかを指定する）に alt テキストをつければいい。
誰がトクする？
マーカス 。Lynx は画像の
altテキストをリンクとして使う。マーカスが ENTER を押すと、Lynx はイメージマップのなかのリンクのリストを別ページで開いてくれる。それぞれのリンクは、areaのaltテキストでラベリングされる。altテキストがない場合、Lynx は各areaのリンクアドレスを表示するけど、それだけじゃ理解しづらいかもしれない。もしも Leslie のイメージマップに
altテキストがついてなかったとしたら、こんなものがページの下のほうにあるようにマーカスには見える：[USEMAP:hpfooter.gif]
マーカスがこのリンクをたどると、イメージマップ中の全リンクのリストのページへ飛ぶ。
altテキストなしだと、Lynx はそれぞれの URL しか表示できないから、こんなふうになる：[USEMAP:hpfooter.gif] MAP: http://leslie.harpold.com/#Map 1. http://leslie.harpold.com/archives.html 2. http://leslie.harpold.com/category/ 3. http://leslie.harpold.com/links.html 4. http://leslie.harpold.com/leslie.html 5. http://www.moveabletype.orgけど現実には、Leslie は画像のほうにも各エリアにもちゃんと
altテキストを つけてるから、マーカスに ホントに 見えるのはこういうもの：Site navigation links
このリンクをたどれば、マーカスはこんなページにたどりつく：
Site navigation links MAP: http://leslie.harpold.com/#Map 1. previously... 2. by category 3. about the site 4. about leslie 5. Powered by Movable Type- マイケル が喜ぶ。 Links は画像の
altテキストをリンクとして表示する。マイケルが ENTER を押すと、Links はマップ内の全リンクのメニューをポップアップで出す。各リンクはareaのaltテキストでラベリングされてる。altテキストがないと、Links はareaのリンクアドレスを表示するんで、わかりにくいかも。 - ジャッキー も。JAWS は HTML ソースに書かれた、イメージマップの各
areaのaltテキストを読み上げる。 ジャッキーは ENTER を押してリンク先に飛ぶことができる。altテキストなしのときは、JAWS はそれぞれのareaのリンクアドレスを読み上げるんで、これこそホントわかりにくいと思うよ。（長ったらしいWebアドレスを、誰かに電話で教えようとしたことってない？） - リリアン もだね。Internet Explorer はイメージマップのリンクされてる各
areaのうえにマウスオーバーすると、ツールチップを表示する。 - Google に対しても役立つ。Google のロボットはメインの画像の
altと、その各areaをインデックスするんだ。altテキストはそのページがキーワードに対しての関連性を判断する基準になる。そのareaのaltテキストに入ってるキーワードと各リンクの関連性についての関連性もね。
どうしたらいい？
こういうイメージマップがあるとする：
<img src="footer.gif" width="500" height="212" usemap="#Map">
<map name="Map">
<area shape="rect" coords="203,114,258,129" href="/archives.html">
<area shape="rect" coords="277,113,348,129" href="/category/">
<area shape="rect" coords="364,113,401,128" href="links.html">
<area shape="rect" coords="418,114,488,130" href="leslie.html">
<area shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>
イメージマップのメインの画像とクリッカブルエリア area の一つひとつにalt テキストをつける。こんな感じ：
<img alt="サイトナビゲーションリンク" src="footer.gif" width="500" height="212" usemap="#Map">
<map name="Map">
<area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html">
<area alt="by category" shape="rect" coords="277,113,348,129" href="/category/">
<area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>
画像の alt テキストをうまくつけるコツは、みんなイメージマップにそのまま使える。ビジュアルブラウザでツールチップを出さないために、メインの <img> と <area> には title="" もつけてもいい。
しちゃダメなこと
クリックした位置の座標をサーバーに送信して処理する、サーバーサイドイメージマップは使わないで。あれはまるっきりアクセシブルの正反対なんだ。ジャッキーみたいに JAWS を使ってるひととか、マイケルとかマーカスみたいにテキストブラウザ使ってるひととか、ビルみたいにキーボードだけでナビゲートしてるひととか、Google みたいな検索エンジンにまで。どうしてもサーバーサイドイメージマップを使わなきゃいけないなら、その下にテキストでナビゲーションバーをつけて、イメージマップのリンク先への本当のリンクを作ろう。
さらなる情報源（英語）
- Leslie Harpold: The Historical Present。自分のブログを今回の例として使わせてくれた Leslie に感謝。