23日目：画像に適切なテキストをつける

今回がこのシリーズのなかで一番重要な回。だからしっかり読んでね：

サイトの1ページ1ページの画像1個1個には代替テキストが必要。<img> タグの alt 属性で指定する、「alt テキスト」ってやつだね。

そうすると、スクリーンリーダーは読み上げられるし、テキストブラウザは表示できる。Google はインデックスしてくれるし、ビジュアルブラウザはツールチップかステータスライン（まあこれはデザイナーが書き換えることもできるけど）で表示してくれる。空の alt テキストをスペーサー画像につけるやりかたはもうやったよね。中黒のかわりの画像を使ってアクセシブルなリストを作るやりかたもいくつか。あと何があるかな？

  • Permalink アイコン
  • "Powered by" アイコン
  • Mail-to アイコン
  • XML アイコン
  • 投稿のとこで使ってる小さなグラフィック
  • 他にテンプレートに足した画像があればそれも

みんな alt テキストがいるんだ。

誰がトクする？

  1. まずジャッキー。JAWS は alt テキストを読み上げるからね。ちゃんとした alt テキストがないと、ファイル名が代わりに読まれちゃう。やってられないよ。
  2. マーカスもだね。Lynx は初のテキストブラウザとして生まれて、画像じゃなくalt テキストのみを表示する。Lynx もこれがないとファイル名を使う。JAWS のときと同じくらいイライラするものが表示されるってわけだ。
  3. マイケル も喜ぶ。Links はテキストブラウザだから、画像は表示せずに alt テキストだけ見えるかたちになる。alt テキストがないと、Links はその画像に関してなんにも表示しない（リンクになってない限りはね。リンクの場合は "[IMG]" ってリンクが表示される）から。Opera で画像を非表示にしてると、マイケルには画像の代わりに alt テキストが見える。
  4. リリアン もだ。Internet Explorer は alt テキストをツールチップとして（この挙動は書き換えられるけどね）表示してくれる。
  5. Google 対策にもなる。Google の使ってるロボットは、alt テキストをインデックスして、普通のキーワード検索でひっかかる対象になるのと同時に、text, which is used not only in matching keywords in normal searches, but also in イメージ検索にも使われる。（どうやってやってると思ってた？）

どうしたらいい？

Movable Type 似ついてくるテンプレートには、ひとつも<img> タグがない。"Powered by Movable Type" って画像を使ってる場合は、<img> タグに alt="Powered by Movable Type" って属性が入ってるか確認しよう。

ビジュアルブラウザでツールチップが出ないように title="" もつけてもいいね。

もちろんブログツールに関係なく、自分でテンプレートに画像を足したりちっちゃい画像を投稿欄につけたりのカスタマイズをしたら、それぞれの画像に alt テキストが必要になる。僕の場合、例を見るのが一番わかりやすいんで、ここでもそうしてみるね。一般的な決まりとか、例とか、もっと知りたいヒトは 「さらなる情報源（英語）」のところを参照してください。

悪い alt テキストの例

  • HTML マークアップはなんでも。alt テキストには、普通のテキストと記号しか入れられない。タグはなしで。
  • alt="ファイル名.jpg"。こんなことしたってしかたないもん。そのグラフィックが何のために使われてるのかがポイントで、名前は別に知らなくていいんだから。
  • alt="alt テキスト"。HTML エディターを使うと、「あとで alt を入れてくださいよ」っていうシルシとして自動的にこう書かれるときがある。で、よくわかってないデザイナーがそのままにしちゃったってケース。
  • alt="ココをクリック！" はあんまり意味がない。（「ココをクリック！」って書いてある画像なら別のはなしだけど。）
  • alt="画像を表示して！" これって目の見えないひとに何時か聞かれて、「そこに時計あるんだから自分で見れば？」って答えるようなもんだよ。なんらかの理由があって表示してない（マイケルのネットワーク帯域の狭さとか）のかもしれないし、見えない状況にある（マーカスのテキストブラウザとか）のかもしれない。もしかすると別に画像が非表示になってるわけじゃない（ジャッキーのスクリーンリーダーは画像を表示しつつ alt を読み上げる）のかもしれない。
  • その他 alt テキストの悪い例。

良い alt テキストの例

  • Jonathon Delacour のページで使ってるバナーには漢字が使われてる。alt="サイトロゴ：xin、心を表す漢字"。
  • Leslie Harpold のページで使ってるバナーは、サイト名の "The Historical Present" とタグライン "Hypermodernism has a posse" が載ってる。 alt="the historical present: hypermodernism has a posse"。
  • Simon Willisonは "W3C XHTML 1.0" ボタンをつけてる。alt="Valid XHTML 1.0!"。
  • Jeffrey Zeldman は画像でテキストを入れたナビゲーションを使ってる。（訳者注：2004年5月に新デザインに変わり、現在は Javascript も画像も使用せず、テキストとCSSのみのナビゲーション。）各画像をロールオーバーすると、ステータスバーに Javascript でタグラインが出る。そりゃ目の見えないひとにはこれは見てもらえないけど、その文章はちゃんと各画像の alt テキストとして入れてある。いい感じ。
  • Dean Allen のページで使ってるバナーには、サイト名とタグライン。alt テキストは長めで、違ったタグラインが書いてある。（ちょっとわかりにくいかも）けど Dean だから許されるらしい。alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie"。注意：これやって許されるのは Dean くらいのもんです。ヤツ以外のひとは、おとなしくシンプル路線でいきましょう。

さらなる情報源（英語）

 
<< 22日目：本当のリストを使う（またはうまくズルをする） | 目次 | 24日目：イメージマップに適切なテキストをつける >>