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 に感謝。