img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

代替テキスト


代替テキストとは?

  ie6 nn7 op8

img要素のalt属性に代替テキストを指定すると、画像・フォーム・アプレットを表示できない(または表示しない)ユーザー、
フォーム非対応のブラウザを使っているユーザー、視覚障害のあるユーザー、音声合成装置のユーザー等の助けになります。
IEでは画像等にカーソルを乗せるとツールチップのようにポップアップしますが、NNやOPでは単なるツールチップとしてではなく、
画像等が非表示の時に代替テキストが表示されます。
説明文を表示するツールチップはtitle属性でIE・NN・OP、全てで表示できます。
title属性を設定すると、画像か文字列かを問わずユーザーに対して説明文を表示することができます。
IEではalt属性とtitle属性が共に存在する場合は、 title属性値をポップアップするようになっています。

次のページ alt="次のページ" title="click"
次のページ 画像が表示されないため、代替テキストとして“次のページ”が表示
alt 無し title="click" (titleのみポップアップ)
画像非表示 alt 無し (titleのみポップアップ)


<img src="****.gif" alt="代替テキスト" title="説明文">
<img src="****.gif" alt=""> 必要の無い画像には空のaltで。

注:
リンク画像に代替テキストがない場合、音声変換ソフトでは、リンク先のアドレスを読んでしまいます。リンクボタンなどのリンク画像にも代替テキストを使用しましょう。
意味のない画像の代替テキストには、空白を入力し、音声変換ソフトで読み飛ばすようにしましょう。


alt属性もtitle属性も両方を付けるのが よりアクセシビリティが良く、バリアフリーなサイトとなります。(^^)