第23回画像の代替テキストのベタープラクティス（2）

2007.05.25

　前回は、画像の代替テキスト（alt属性値）の注意点や工夫の仕方を説明した。今回は、alt属性や他の属性には「過度に頼ることはできない」という前提で、さまざまな環境に対応できる「よりよいプラクティス」を考えていこう。

環境対応性が高いのは、何といっても「生テキスト」

　画像（img要素）の代替テキストを工夫して書くのはとても大切なことだが、前回の最後で「それでも完璧ではない」と述べた。なぜなら、alt属性、title属性、longdesc属性の属性値として含めるテキストやURLは、ブラウザなどのユーザーエージェントがどのように対応しているか、ユーザーそれぞれがどのようにオプション設定しているかといった、制作者側では完全に把握するのが難しく、かつ、コントロールできない問題が横たわっているからだ。

　たとえばalt属性値ひとつとってみても、Internet Explorer 6/7、Operaなどのブラウザが画像へのカーソルオン時にツールチップ表示するのに対し、FirefoxやSafariでは表示されない（title属性値をツールチップ表示する実装になっている）。

左がInternet Explorer 7の表示、右がFirefox 2の表示。FirefoxやSafariではalt属性値がツールチップ表示されない

　結論としては、やはり「生テキスト」、つまり要素の内容として含めるテキストが、何といっても環境対応性が高い。生テキストは、ユーザーに環境設定など特別な操作を強いることなく表示・表現され、制作者が工夫できる余地も大きいからだ。

代替テキストと生テキストの組み合わせ

　代替テキストではあくまで「それが何の画像なのか」を示しておき、生テキストで内容を詳しく説明するのがベタープラクティスといえる。たとえば次のようにである。

［XHTML］
<div class="graphs">
  <p><img src="graph_cakes.gif" alt="円グラフ: 当社の事業ごとの売上規模"
  width="200" height="200" /></p>
  <p>当社の事業ごとの売上規模は、Webサイト制作が最も大きく
  2億5千万円（約50%）、次いでコンサルティングが1億2千万円（約24%）、
  プログラム開発が8千万円（約16%）。その他の事業合計で
  5千万円（約10%）です。</p>
</div>

　実際のページ上での見え方は、次のようになる。CSSでdiv要素全体をフロートさせ、本文テキストとは視覚的に区別しやすいようにしておくとよいだろう。

［CSS］
div.graphs {
  width: 280px;
  float: right;
  margin: 1em 0 1em 1em;
  }

　もちろん、すべての画像にこのような詳しい説明が必要なわけではない。代替テキストのみでもよい画像もあれば、このように詳しい説明をつけたほうがよい画像もある、ということである。

　さて、上記の例について、dl要素（定義リスト）を利用したマークアップを思いついた人もいるだろう。子要素のdtに「画像」を、ddに「説明」を含める方法だ。しかし、dl要素はあくまで「リスト」であって、単一の組み合わせに使うのは、果たして正しいだろうかという疑問がある。つまり、「画像」と「説明」のセットが複数なければ、dl要素は使わないほうがよいのでは、ということだ。

　また、画像の代替テキストがあたかも見出しのような役割を果たしているので、img要素を見出し要素でマークアップしたほうがよいと考えた人もいるだろう。しかし、HTMLでもXHTMLでも、見出し要素はあくまで「文脈上の存在」であって、特定の画像に個別的につける見出しという性格ではない。見出し要素を使ってしまうと、文脈的にはそこから話が変わる（あるいは、ある話のなかでの下位見出し）、ということになってしまう。

　こういったことから、上記の例では、「画像」と「説明」のどちらもp要素でマークアップしている。