futuremix

img 要素と alt 属性

HTML で画像を挿入にするには、img 要素を利用します。

img 要素には、何らかの事情で画像が表示できない状況を想定して、代替テキストを指定する必要があります。画像が表示できない状況とは、

• Lynx などのテキストブラウザで閲覧している場合
• 画像を自動的に読み込まない設定にしている場合
• 画像の形式に対応していない環境で閲覧している場合
• 文字を音声で読み上げる環境（音声ブラウザ）を利用している場合
• 画像の内容を解釈しない検索ロボットなどのアクセス

などがあります。

img 要素において、代替テキストは alt 属性で指定します。たとえば、このサイトのバナーは次のような指定になります。

  <img alt="津田ふみかの日記" src="/images/nikki.png" width="88" height="31" />

実際には、次のように表示されます。

alt 属性には、画像が表示されない場合の代わりとなるテキストを指定するので、この場合は「津田ふみかの日記」だけで良いのです。「津田ふみかの日記のバナー画像」などと書いたり「nikki.png」などとファイル名を書くのは不適切です。一部の HTML 生成ツールは、自動的に alt 属性にファイル名を入れてしまいますが、適切な文字列に直してください。

また、単なる飾りのための画像で、代替テキストを指定する必要のないものは、無理に記述する必要はありません。その場合でも、alt 属性を書かないのではなく、alt="" のように記述します。

なお、Internet Explorer (IE) では、画像の上にマウスポインタを置くと、alt に設定した文字列がツールチップとして表示されます。しかし、これは IE の挙動であって、他のブラウザも同じ挙動をするとは限りません。実際に Mozilla や Netscape ではツールチップは表示されません。

画像の説明は、title 属性で指定します。title 属性の内容をツールチップとして表示するブラウザは Mozilla 系をはじめとして数多くあります。IE でも、title 属性が指定されている場合は、alt 属性に優先してツールチップ表示されます。

  <img alt="津田ふみかの日記" title="津田ふみかの日記のバナー画像。ご自由にご利用下さい。" 
      src="/images/nikki.png" width="88" height="31" />

次の画像で試してみてください。

object 要素と代替要素

img 要素の代替テキストでは、複雑な代替手段を提供できません。例えば、次のような凝った表を表わした画像は、代替テキストを用意することは、alt 属性では難しいです。

この表を HTML で表わすと、

  <table summary="値段一覧表">
    <thead>
      <tr>
        <th>商品名</th>
        <th>価格<span class="notice">(単位:円)</span></th>
        <th>在庫状況</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>豆腐</td>
        <td class="price"><em>price down!</em>68</td>
        <td class="mark">×</td>
      </tr>
      <tr>
        <td>油揚げ</td>
        <td class="price">128</td>
        <td class="mark">◎</td>
      </tr>
      <tr>
        <td>はんぺん</td>
        <td class="price">148</td>
        <td class="mark">△</td>
      </tr>
    </tbody>
  </table>

のようになりますが、当然、このまま alt 属性の値として書くわけにはいきません。

このような場合、object 要素を利用することができます。object 要素は様々なオブジェクトを文書中に埋め込むための汎用的な要素です。

オブジェクトとは、画像・映像・音声・Javaアプレット・Flash・ActiveXコントロール・他の HTML 文書など様々です。これまでの、applet, embed, bgsound, iframe などの要素を置き換えるほか、img 要素の代わりとしても利用できます。実は、img 要素も XHTML2.0 では object 要素で置き換えられる予定です。

object 要素は、次のように記述します。

  <object data="/images/20030726_imgalt-sample.jpg" type="image/jpeg" width="500" height="184">
    <!-- ここに代替要素を記述 -->a
  </object>

代替要素は、<object>～</object> 間に記述します。単なる代替テキストでも構いませんし、画像や表でも構いません。他の object 要素を入れ子にして利用することもできます。例えば、Flash を利用した動きのあるメニューの代替手段として、静的なイメージマップをし、さらにテキストリンクを代替手段として用意しておくといった三重構造にすることもできます。

今回の場合は、普通はあまりこんなことはしませんが、画像で作成した表を object 要素で指定しておき、中に代替要素として HTML による表組みを指定しておきます。

  <object data="/images/20030726_imgalt-sample.jpg" type="image/jpeg" width="500" height="184">
    <table summary="値段一覧表">
      <thead>
        <tr>
          <th abbr="商品">商品名</th>
          <th abbr="価格">価格<span class="notice">(単位:円)</span></th>
          <th abbr="在庫">在庫状況</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>豆腐</td>
          <td class="price"><em>price down!</em>68</td>
          <td class="mark">×</td>
        </tr>
        <tr>
          <td>油揚げ</td>
          <td class="price">128</td>
          <td class="mark">◎</td>
        </tr>
        <tr>
          <td>はんぺん</td>
          <td class="price">148</td>
          <td class="mark">△</td>
        </tr>
      </tbody>
    </table>
  </object>

こうすることで、object 要素に対応したブラウザでは、見栄えの良い表が表示されますし、object 要素に対応していなかったり、画像が表示できない環境では、通常の表を見ることができます。音声ブラウザや検索ロボットにも対応できます。