<<PREV | TOP | NEXT>>

代替テキストの提供

  1. 画像要素
  2. IMG 要素の基本
    1. 代替テキストの指定 - alt 属性と title 属性の利用
    2. 画像をより軽快に - フォーマットなど
  3. 画像の垂直方向の表示位置
  4. 浮動化と後続テキストの周りこみ
  5. 周囲に空白を挿入
  6. 周囲にボーダーを表示

IMG 要素には、 画像の位置を指定する src 属性と、画像が表示できない場合の代替テキストを与える alt 属性が必須です。

alt = text [CS]
longdesc = uri [CT]

alt 属性

alt 属性は、音声や点字などによる非視覚的ブラウザなどの画像が表示されない場合の代替テキストを指定します。

alt 属性の属性値には、画像の短い要約を記述します。この属性がないと、画像を表示出来ない場合には、ページの内容が全くわからないということにもなりかねません。この属性値は人間が読んで理解できる「自然言語」 (%Text;) で記述します。日本語も普通に記述してください。

<img alt="W3C - WWW Consortium" src="./w3c_home.png">

例えば、水平線やマークなどのページ装飾用の画像のように意味がない場合でも、その画像には意味が無い旨、表示しなくても分かるように alt="" のように空の alt 属性を指定しておくべきでしょう。そうすることで、画像を表示しないブラウザは、この IMG 要素を無視できます。

alt 属性を指定しないと、ファイル名や「画像」、"image" などの無意味な文字が表示(読み上げ)されます。

title 属性

alt 属性と似た属性で title 属性も指定できます。 alt 属性は画像を表示しない場合のための代替テキストを指定しましたが、 title 属性は表示された画像の表題です。

例えば、画像を表示出来ない場合は何も表示せず、表示された場合は表題をつけたい場合があります。その場合は、空の alt 属性と title 属性を併用します;

<img alt="" title="家族の写真" src="./family.png">
<img alt="" title="ページ装飾用の水平線" src="./hbar.png">

画像は非常に有益な情報源になり得ますが、音声読み上げブラウザやテキストしか表示出来ない環境に対しては無意味な画像は良くあります。そのような場合に空の alt 属性は非常に有効です。

longdesc 属性

更に補足的な情報を外部文書として提供できる場合は、 longdesc 属性を利用します。但し、この属性をサポートしているブラウザは現在の所(11/2000)極少数です。

longdesc 属性の値は一般に URL で、画像に関する情報を提供する文書の URL を指定します。


画像を表示出来ないブラウザは多数有りますし、読み込みに時間がかかるので、表示しないように設定している場合も考えられます。画像が表示できなければ読めない、理解できないようなページは設計ミスです。どうしてもそうなってしまう場合は、代替テキスト・ページを提供するように心掛けましょう。

<<PREV | TOP | NEXT>>

SEO [PR] !uO z[y[WJ Cu