HTML <img> alt属性

HTML <img> タグ

定義と使用法

alt 属性は必須属性で、画像が表示できない場合の代替テキストを規定します。

以下の理由でユーザーが画像を確認できない場合、alt属性は画像に代替情報を提供できます：

  • ネットワーク速度が遅い
  • src属性のエラー
  • ブラウザが画像を無効にしています
  • ユーザーがスクリーンリーダーを使用しています

HTML <img> alt属性は、画像が表示できない場合やユーザーが画像表示を無効にした場合に、ブラウザに表示される代替テキストを指定します。

すべてのドキュメントの画像にこの属性を使用することを強くお勧めします。画像が表示できない場合でも、ユーザーは失われたものについての情報を確認できます。さらに、障害者にとってalt属性は、画像の内容を理解するための唯一の方法となります。

ヒント：画像にツールチップを作成する場合は、以下を使用してください： title属性！

ヒントと注釈

注釈：alt 属性の値は、空間と記号を含む1024文字以内の文字列で、この文字列は引用符内に含まなければなりません。このaltテキストは特殊文字のエンティティリファレンスを含むことができますが、他のカテゴリのタグを含むことは許可されていません。特にスタイルタグを含むことは許可されていません。

注釈：ユーザーがimg要素にマウスを移動すると、Internet Explorerはalt属性の値を表示します。この動作は正しくありません。他のすべてのブラウザは規格に従っており、画像が表示できない場合にのみ代替テキストを表示します。

ヒント：画像にツールチップを作成する必要がある場合は、以下を使用してください： title属性。

例

例 1

<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />

実際に試してみてください

画像が表示できない場合、ブラウザはこのように代替テキストを表示します：

上海花の港 - 郁金香

また、ユーザーが画像の上にマウスを持っていくと、最新のブラウザはテキストボックス内に説明的なテキストを表示します。以下のコードは alt 属性に説明的なテキストを追加しています：

以下の写真にマウスを合わせて、対応する効果を見てください：

上海花の港 - 郁金香

赤い円に囲まれたテキストボックスは、ユーザーがマウスを画像に合わせたときに IE7 ブラウザが表示する効果です：

上海花の港 - 郁金香

例 2

代替テキストを指定した画像：

<img src="img_girl.jpg" alt="ジャケットを着たガール" width="500" height="600">

実際に試してみてください

文法

<img alt="text">

属性値

値 説明
text

画像の代替テキストを指定します。

alt テキストの使用原則：

  • 画像に情報が含まれている場合 - 画像の説明を alt で使用してください
  • 画像が a 要素内に含まれている場合 - 目標リンクの説明を alt で使用してください
  • 画像が装飾用のみの場合 - alt="" を使用してください

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML <img> タグ