img 要素

4.7.1 img 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
フォーム関連要素
この要素が usemap 属性を持つ場合: インタラクティブ・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
エンベッディッド・コンテントが期待される場所
コンテントモデル:
コンテント属性:
グローバル属性
alt - 画像が利用できないときに利用する代替テキスト
src - リソースのアドレス
crossorigin - 要素がクロスオリジンのリクエストをどのように扱うか
usemap - イメージマップに使われる名前
ismap - 画像がサーバーサイドのイメージマップかどうか
width - 水平方向の寸法
height - 垂直方向の寸法
text/html におけるタグの省略:
終了タグはありません。
指定可能な ARIA role 属性 の値:
alt 属性の値が空 ((alt="") の img 要素では presentation ロールのみ。そうでなければあらゆるロール値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
[NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;

           attribute DOMString crossOrigin;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
};

img 要素は画像を表します。

src 属性によって与えられた画像はエンベッディッド・コンテントです。alt 属性の値は、画像を扱うことができない、または、画像のロードを無効にしている人向けに、同等のコンテンツを提供します。

alt 属性の値に関する要件は、次のセクションで説明されています。

src 属性は必須で、ページを持たずスクリプトも持たない非インタラクティブな画像リソースを参照する潜在的にスペースで囲まれた空でない妥当な URL を含まなければいけません。ただし、アニメーションは許されます。

前述の要件は、静的なビットマップ(例:PNG, GIF, JPEG)や、単一ページ・ベクター・ドキュメント(単一ページのPDF, SVG ルート要素を持った XML ファイル)や、アニメーション・ビットマップ(APNG, アニメーションGIF)や、アニメーション・ベクターグラフィック(宣言型 SMIL アニメーションを使った SVG ルート要素を持った XML ファイル)などの画像を指しています。しかし、スクリプトを伴った SVG ファイルや、マルチページの PDF ファイルや、インタラクティブ MNG ファイルや、HTML ドキュメントや、プレーンテキストドキュメントなどは除外されます。 [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

img 要素は、レイアウトのための道具として使われてはいけません。とりわけ、img 要素は、透明な画像を表示するために使われるべきではありません。これは、意味をほとんど伝えることがなく、ドキュメントに何も役に立ちません。


The crossorigin 属性は CORS 設定属性 です。この役割は、canvas と組み合わせて使う際に、クロスオリジンのアクセスを許すサードパーティのサイトからの画像を許可することです。


img は常に次の状態の 1 つに入ります:

利用不可
ユーザーエージェントは、画像データを何も取得していません。
部分的に利用可能
ユーザーエージェントは、画像データの一部を取得しました。
完全に利用可能
ユーザーエージェントは、すべての画像データを取得し、少なくとも画像の寸法を入手できています。
破損
ユーザーエージェントは、入手可能なすべての画像データを取得したけれども、デコードができず画像の寸法すら得られなかった (たとえば、画像が壊れていたり、サポートしていないフォーマットだったり、データをまったく取得できなかったりした場合) 。

img 要素が 部分的に利用可能な状態か 完全に利用可能な状態のいずれかの場合、それは利用可能と言います。

img 要素は最初は利用不可です。

img 要素が利用可能な場合、それは、幅がその画像の本来の幅で、高さがその画像の本来の高さで、見た目がその画像の本来の見た目となるペイントソースを提供します。

スクリプティングが無効ブラウジングコンテキストでは、ユーザーエージェントは、すぐに画像を取得することもできますし、オンデマンドで画像を取得することもできます。スクリプティングが有効ブラウジングコンテキストでは、ユーザーエージェントは、すぐに画像を取得しなければいけません。

すぐに画像を取得するユーザーエージェントは、img 要素が src 属性とともに生成されるときは必ず、同期的にその要素の画像データをアップデートしなければいけません。すぐに画像を取得するユーザーエージェントは、また、img 要素に src または crossorigin 属性がセット、変更、削除されるときも必ず、その要素の画像データをアップデートしなければいけません。

オンデマンドで画像を取得するユーザーエージェントは、img 要素が画像データを必要とするとき (つまりオンデマンドで) は必ず、その要素の画像データをアップデートしなければいけませんが、その img 要素が src 属性を持つ場合と、その img 要素が利用不可状態にある場合に限ります。img 要素の src または crossorigin 属性がセット、変更、削除されるとき、ユーザーエージェントがオンデマンドで画像を取得するだけなら、その img 要素は利用不可状態に戻らなければいけません。

img 要素それぞれは最終選択ソースを持ちます。これは最初は null でなければいけません。そして、現在のピクセル密度を持ちます。これは最初は未定義でなければいけません。

img 要素が 1.0 でない現在のピクセル密度を持つとき、その要素の画像データは、その解像度が CSS ピクセルあたりのデバイスピクセルで、現在のピクセル密度だったかのように扱われなければいけません。

たとえば、現在のピクセル密度が 3.125 なら、それは、CSS インチあたり 300 デバイスピクセルあることを意味します。ゆえに、画像データが 300x600 なら、その本来の寸法は 96 CSS ピクセル x 192 CSS ピクセルとなります。

Document オブジェクトそれぞれは、利用可能な画像のリストを持ちます。このリストの各画像は、絶対 URLCORS 設定属性モード、そして、そのモードが No CORS でないなら、オリジンから構成されるタプルによって識別されます。ユーザーエージェントは、一つの Document オブジェクトの利用可能な画像のリストから別のものに、いつでもエントリーをコピーすることができます (たとえば、Document が生成されるとき、ユーザーエージェントは、別の Document にロードされたすべての画像を、それに追加することができます)。しかし、そうするとき、この方法でコピーされたエントリーのキーを変えてはいけません。ユーザーエージェントは、いつでもそのようなリストから画像を削除することもできます (たとえば、メモリーを節約するため)。

ユーザーエージェントが img 要素の画像データをアップデートすることになったとき、次の手順を実行しなければいけません:

  1. img 要素を利用不可状態に戻します。

  2. フェッチアルゴリズムのインスタンスがまだこの要素で実行中なら、そのアルゴリズムを中止し、そのアルゴリズムによって生成された未解決のタスクをすべて破棄します。

  3. img 要素の現在の画像データがあれば、それを忘れます。

  4. ユーザーエージェントが画像をサポートできない、または、画像のサポートが無効になっているなら、これらの手順を中止します。

  5. そうでなければ、その要素に src 属性が指定されており、その値が空文字列でないなら、selected source を、その要素の src 属性の値とし、selected pixel density を 1.0 とします。そうでなければ、selected source を null とし、selected pixel density を未定義とします。

  6. img 要素の最終選択ソースselected source とし、その img 要素の現在のピクセル密度selected pixel density とします。

  7. selected source が null でないなら、次の副手順を実行します:

    1. selected source を、要素に対して、解決します。それが成功しなければ、これらの手順を中止します。

    2. key を、絶対 URLimg 要素の crossorigin 属性のモード、そして、そのモードが No CORS でないなら、Documentオリジンから構成されるタプルとします。

    3. 利用可能な画像のリストに key のエントリーが含まれているなら、その img 要素を、完全に利用可能な状態にセットし、その画像の見た目を適切にアップデートし、その img 要素で load という名前のシンプルなイベントを発出するタスクをキューイングして、これらの手順を中止します。

  8. 非同期に安定状態を待ち、このアルゴリズムを呼び出したタスクが継続できるようにします。同期セクションは、このアルゴリズムが同期セクションは終わったと言うまで、このアルゴリズムの残りのすべての手順から構成されます。(同期セクションの手順は ⌛ でマークされています。)

  9. ⌛ この img 要素に対してこのアルゴリズムの別のインスタンスが、このインスタンスの後に開始されたなら (たとえ、それが中止してもう実行していなくてもです)、これらの手順を中止します。

    最後のインスタンスだけが効力を持ちます。これは、たとえば、srccrossorigin 属性が相次いでセットされるときのように、複数のリクエストを避けるためです。

  10. selected source が null なら、要素を破損状態にセットし、その img 要素で error という名前のシンプルなイベントを発出するタスクをキューイングして、これらの手順を中止します。

  11. img 要素で loadstart という名前の進捗イベントを発出するタスクをキューイングします。

  12. ⌛ 以前の手順から導かれた絶対 URL潜在的に CORS 可能なフェッチをします。mode には、要素の crossorigin コンテント属性の現在の状態を、origin には、img 要素の Documentオリジンを、そして、default origin behaviour には taint をセットします。

    このようにして得られたリソースがあれば、それが img 要素の画像データとなります。それは、CORS 同一オリジン、または、CORS クロスオリジンのいずれかになります。これは、その画像自身のオリジンに影響します (たとえば、canvas で使われるとき)。

    画像をフェッチしたら、そのリソースがフェッチ (以降で定義されています) されたときにネットワーキング・タスクソースによってキューイングされるタスクが実行されるまで、その要素のドキュメントの load イベントを遅らせなければいけません。

    ゆえに、残念なことに、ユーザーのローカルネットワークの初歩的なポートスキャンに使うことができてしまいます (特にスクリプティングとの組み合わせです。たとえ、実際にはスクリプティングがそのような攻撃を実行する必要がなくてもです)。ユーザーエージェントは、この攻撃を軽減するために、前述より厳密なクロスオリジンのアクセス制御を実装することができますが、残念ながら、そういったポリシーは通常は現存のウェブコンテンツと互換性がありません。

    リソースが CORS 同一オリジンなら、画像がフェッチされている間にネットワーキング・タスクソースによってキューイングされるタスクそれぞれは、その img 要素で progress という名前の進捗イベントを発出しなければいけません。

  13. これで同期セクションは終わりですが、フェッチアルゴリズムからのデータを失うことなく、非同期に残りの手順を継続します。

  14. できる限りすぐに、次のリストのうち最初に適したエントリーにジャンプします:

    リソースのタイプが multipart/x-mixed-replace の場合

    画像がフェッチされている間にネットワーキング・タスクソースによってキューイングされる次のタスクは、img 要素の状態を、潜在的に利用可能にセットしなければいけません。

    画像がフェッチされている間にネットワーキング・タスクソースによってキューイングされるタスクそれぞれは、画像の見た目をアップデートしなければいけません。しかし、新たなボディーパートがやってきたら、前の画像を置き換えなければいけません。一つのボディーパートが完全にデコードされたら、ユーザーエージェントは、その img 要素の状態を、完全に利用可能にセットし、その img 要素で load という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。

    progressloadend イベントは、 multipart/x-mixed-replace 画像ストリームでは発出されません。

    リソースのタイプとデータが、後述のとおりに、サポート画像形式に相当する場合

    画像がフェッチされている間にネットワーキング・タスクソースによってキューイングされる次のタスクは、img 要素の状態を、潜在的に利用可能にセットしなければいけません。

    画像がフェッチされている間にネットワーキング・タスクソースによってキューイングされるそのタスクと、それに続くそれぞれのタスクは、画像の見た目を適切にアップデートしなければいけません (たとえば、画像がプログレッシブ JPEG なら、パケットごとに画像の解像度を改善していくことができます)。

    さらに、リソースがフェッチされて、ネットワーキング・タスクソースによってキューイングされる最後のタスクは、追加で、次のリストのうち一致するエントリーの手順を実行しなければいけません:

    ダウンロードが成功し、ユーザーエージェントが画像の幅と高さを判定できた場合
    1. img 要素の状態を、完全に利用可能にセットします。

    2. 画像を、キー key を使って利用可能な画像のリストに追加します。

    3. リソースが CORS 同一オリジンの場合: img 要素で load という名前の進捗イベントを発出します。

      リソースが CORSクロスオリジンの場合: img 要素で load という名前のシンプルなイベントを発出します。

    4. リソースが CORS 同一オリジンの場合: img 要素で loadend という名前の進捗イベントを発出します。

      リソースが CORSクロスオリジンの場合: img 要素で loadend という名前のシンプルなイベントを発出します。

    そうでない場合
    1. img 要素の状態を、broken にセットします。

    2. リソースが CORS 同一オリジンの場合: img 要素で load という名前の進捗イベントを発出します。

      リソースが CORSクロスオリジンの場合: img 要素で load という名前のシンプルなイベントを発出します。

    3. リソースが CORS 同一オリジンの場合: img 要素で loadend という名前の進捗イベントを発出します。

      リソースが CORSクロスオリジンの場合: img 要素で loadend という名前のシンプルなイベントを発出します。

    上記に該当しない場合

    画像データが壊れていて画像の寸法が取得できない、または、画像データがサポートしているファイル形式でない場合: ユーザーエージェントは、その img 要素を、broken 状態にセットして、フェッチアルゴリズムによって生成されたペンディング中のタスクをすべて破棄してそのアルゴリズムを中止してから、その img 要素で error という名前のシンプルなイベントを発出するタスクをキューイングし、それから、その img 要素で loadend という名前のシンプルなイベントを発出しなければいけません。

ユーザーエージェントが要素 x に対して上記のアルゴリズムを実行している間は、その要素の Document からその要素 x への強い参照がなければいけません。たとえ、その要素が、その Document中にないとしてもです。

img 要素の状態が完全に利用可能であり、かつ、ユーザーエージェントがエラーなしにメディアデータをデコードできるなら、その img 要素は、完全にデコード可能である、言います。

画像のフェッチが成功したかそうでないのか (たとえば、応答コードが 2xx コードか、それに相当するものだったかどうか) は、画像のタイプとそれが妥当な画像かどうかを判定するときは、無視されなければいけません。

これによって、サーバーがエラー応答とともに画像を返しつつも、それらを表示できるようになります。T

ユーザーエージェントは、画像のタイプを判定するために画像スニッフィング規則を適用するべきです。official type には、その画像の関連の Content-Type ヘッダーを与えます。これらの規則が適用できないなら、その画像のタイプは、その画像の関連の Content-Type ヘッダーによって与えられたタイプとしなければいけません。

ユーザーエージェントは、img 要素で画像ではないリソース (たとえば、ルート要素が HTML 要素となる XML ファイル) をサポートしてはいけません。ユーザーエージェントは、画像リソースに埋め込まれた実行可能なコード (スクリプトなど) を実行してはいけません。ユーザーエージェントは、マルチページのリソース (PDF ファイルなど) の場合は最初のページしか表示してはいけません。ユーザーエージェントは、リソースがインタラクティブに振る舞うことができるようにしてはいけませんが、リソースのアニメーションなら問題ありません。

本仕様は、どの画像のタイプがサポートされるべきかについては指定しません。



img 要素が何を表すかは、src 属性と alt 属性に依存します。

src 属性がセットされ、かつ、alt 属性が空文字列にセットされている場合

この画像は、後ろにあるコンテンツを装飾ものか、補足するものかの、いずれかでで、そのドキュメントの中では、他の情報と重複しています。

この画像が利用可能で、ユーザーエージェントがその画像を表示するよう設定されているなら、この要素は、この要素の画像データを表します。

そうでなければ、この要素は何も表しません。そして、レンダリングからは完全に省略することができます。ユーザーエージェントは、画像は存在するけれども、レンダリングから省略されたという通知をユーザーに提供することができます。

src 属性がセットされ、かつ、alt 属性が空でない値にセットされている場合

この画像は、コンテンツの重要な部分となります。alt 属性は、テキストで、同等または代替となるものを与えます。

この画像が利用可能で、ユーザーエージェントがその画像を表示するよう設定されているなら、この要素は、この要素の画像データを表します。

そうでなければ、この要素は、alt 属性によって与えられたテキストを表します。ユーザーエージェントは、画像は存在するけれども、レンダリングから省略されたという通知をユーザーに提供することができます。

src 属性がセットされ、かつ、alt 属性がセットされていない場合

利用可能なテキストの同等または代替となるものはありません。

この画像が利用可能で、ユーザーエージェントがその画像を表示するよう設定されているなら、この要素は、この要素の画像データを表します。

そうでなければ、ユーザーエージェントは、レンダリングされていない画像があることを何かしらの形で表示するべきです。そして、ユーザーがリクエストしたり、そう設定されていたり、文脈情報をナビゲーションのレスポンスにて提供するよう求められたときは、次のとおりに生成される画像のキャプション情報を提供するべきです:

  1. 画像が figcaption 要素を子に持つ figure 要素の子孫で、figcaption 要素とその子孫を除いて、その figure 要素が要素間ホワイトスペースでない Text ノードの子孫も、その img 要素以外でエンベデッド・コンテントとなる子孫をまったく持たないなら、最初の figcaption 要素のコンテンツがキャプション情報となります。これらの手順を中止します。

  2. キャプション情報はありません。

src 属性がセットされていない、かつ、alt 属性が空文字列にセットされているか alt 属性がまったくセットされていない場合

この要素は何も表しません。

上記に該当しない場合

この要素は、alt 属性によって与えられたテキストを表します。

alt 属性は助言的な情報を表すことはありません。ユーザーエージェントは、title 属性のコンテンツと同じように、alt 属性のコンテンツを提供してはいけません。

ユーザーエージェントは alt 属性が存在しなくても埋め合わせが推奨されていますが、ウェブ制作者はそのような挙動に頼ってはいけません。画像の代替として振る舞うテキストを提供するための要件は後述します。

img 要素にコンテンツがあれば、それはレンダリングにおいては無視されます。


usemap 属性は、存在すれば、その画像は関連のイメージマップを持つことを示すことができます。

ismap 属性は、href 属性を持つ a 要素の子孫となる要素で使われたとき、その要素がサーバーサイトのイメージマップへのアクセスを提供することを、その存在を持って示します。これは、対応する a 要素でイベントがどのように扱われるのかに影響します。

ismap 属性は論理属性です。この属性は、href 属性を持つ a 要素を祖先に持たない要素に指定されてはいけません。

img 要素はディメンジョン属性をサポートします。

alt, src IDL 属性は、それぞれ同じ名前のコンテント属性を反映しなければいけません。

crossOrigin IDL 属性は、既知の値のみに限定して、crossorigin コンテント属性を反映しなければいけません。

useMap IDL 属性は、usemap コンテント属性を反映しなければいけません。

isMap IDL 属性は、ismap コンテント属性を反映しなければいけません。

image . width [ = value ]
image . height [ = value ]

これらの属性は、実際の画像のレンダリング寸法を返します。寸法が分からなければ 0 を返します。

値をセットして、対応するコンテント属性を変更することができます。

image . naturalWidth
image . naturalHeight

これらの属性は、本来の画像の寸法を返します。寸法が分からなければ 0 を返します。

image . complete

画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。

image = new Image( [ width [, height ] ] )

新たな img 要素を返します。widthheight 属性は、対応する引数に渡された値が適切なら、それらにセットされます。

IDL 属性 widthheight は、画像がレンダリングされており、ビジュアルメディアにレンダリングされているなら、画像のレンダリングされた幅と高さを CSS ピクセルで返さなければいけません。もし画像が利用可能だけれども、ビジュアルメディアにレンダリングされていないなら、画像の本来の幅と高さを CSS ピクセルで返さなければいけません。もし画像が利用可能ではないなら、0 を返さなければいけません。 [CSS]

設定の際には、それらは、それぞれ同じ名前のコンテント属性を反映するかのように振る舞わなければいけません。

IDL 属性 naturalWidthnaturalHeight は、画像が利用可能なら、画像の本来の幅と高さを CSS ピクセルで返さなければいけません。そうでなければ 0 を返さなければいけません。 [CSS]

IDL 属性 complete は、次の条件のどれかが true になるなら、true を返さなければいけません:

そうでなければ、この属性は false を返さなければいけません。

ゆえに complete の値は、スクリプト実行中に変わり得ます。

HTMLImageElement オブジェクトを生成するためにコンストラクタ Image(width, height) が提供されます (さらに、createElement() のような DOM の生成メソッドも使えます)。これがコンストラクタとして呼び出されたときは、HTMLImageElement オブジェクト (新たな img 要素) を返さなければいけません。width 引数が存在すれば、その新たなオブジェクトの width コンテント属性は width にセットされなければいけません。height 引数が存在したら、その新たなオブジェクトの height コンテント属性は height にセットされなければいけません。この要素のドキュメントは、呼び出されたコンストラクタのインタフェースオブジェクトが見つかる Window オブジェクトのブラウジングコンテキストアクティブドキュメントでなければいけません。

4.7.1.1 画像の代替としての役割を果たすテキストを提供するための要件

代替テキスト [WCAG] は、ビジュアル情報をアクセシブルにする基本的な方法です。なぜなら、これらは、ユーザーのニーズに合わせて、知覚によるあらゆるモダリティ (たとえば視覚、聴覚、触覚) を通してレンダリングされ得るからです。代替テキストを提供することで、多様なユーザーエージェントによって多様な方法で情報がレンダリングされることができるようになります。たとえば、写真を見ることができない人は、音声合成を使って、代替テキストを声に出して読んでもらうことができます。

画像の alt 属性はとても重要なアクセシビリティ属性です。有益な alt 属性のコンテンツを用意するために、ウェブ制作者は、画像が現れる文脈と、その画像がコンテンツの中に持つかもしれない効用を注意深く考慮することが求められます。ここに含められているガイダンスは、ウェブ制作者が画像を扱う最も一般的な方法を取り上げています。さらなるガイダンスとテクニックは、画像の代替テキストのリソースにて入手できます。

4.7.1.1.1 画像の代替テキストからユーザーが恩恵を得る状況の例
  • 接続がとても遅くて、画像を無効にしてブラウジングしている。
  • 視覚障害を持っており、音声変換ソフトを使っている。
  • 認識機能障害を持っており、音声変換ソフトを使っている。
  • テキストブラウザーを使っている。
  • 音声ウェブブラウザーを使ってページを読み上げてもらって聞いている。
  • ダウンロードによる料金を節約するために画像を無効にしている。
  • 画像のロードに問題がある、または、画像のソースが間違っている。
4.7.1.1.2 一般的なガイドライン

特定の場合を除き、alt 属性は指定されなければいけません。そして、その値は空であってはいけません。その値は、その画像の代替として適切に機能するものでなければいけません。alt 属性に対する個別の要件は、ページにおけるその画像の役割に依存しますが、それは次のセクションにて説明します。

適切な代替テキストを決めるためには、なぜその画像がページに入れられているかを考えることが重要です。その目的は何ですか?こう考えれば、あなたが、想定の読者にとって何がその画像で重要なのかを理解する助けになるでしょう。どんな画像でも、そのページに存在する理由があります。それは有益な情報を提供するのかもしれませんし、何かしらの効用を発揮するのかもしれませんし、インタラクティブな要素に何かしらのラベルを付けるのかもしれませんし、美を高めるのかもしれませんし、純粋に装飾的なものなのかもしれません。ゆえに、その画像が何のためにあるのかを知ることで、適切な代替テキストを書きやすくなります。

ハイパーリンクa 要素や button 要素がテキストコンテンツを持たず、1 つ以上の画像しか入れられていないなら、alt 属性にテキストを入れて、そのリンクやボタンの目的も一緒に伝えるようにします。

この例では、ユーザーが 3 つのリストから自分の好みの色を求められています。それぞれの色は画像によって与えられていますが、画像を見ることができないユーザーのために、色の名前が画像の alt 属性の中に入れられています:

HTML コードの例がブラウザーに表示されたもの。3 つのリンクそれぞれは矩形の画像を含んでいます:  1 つ目はテキスト 'blue' が書かれた青色の矩形、2 つ目はテキスト 'red' が書かれた赤色の矩形、3 つ目はテキスト 'green' が書かれた緑色の矩形です。

  <ul>
  <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
  <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
  <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
  </ul>
  

この例では、リンクにロゴが入れられています。そのリンクは、外部サイトである W3C ウェブサイトを指しています。代替テキストには、そのリンクのターゲットの簡単な説明を入れています。

リンクのコンテンツとして使われた W3C のロゴ。

  <a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C ウェブサイト">
  </a>
  

この例は、前の例と同じですが、そのリンクは W3C ウェブサイト上にある点が違います。代替テキストには、リンクのターゲットの簡単な説明を入れています。

リンクのコンテンツとして使われた W3C のロゴ。

  <a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C ホーム">
  </a>
  

ロゴ画像が使われている文脈によっては、代替テキストの一部として、その画像がロゴであることを示すほうが適切な場合もあります。セクション 4.7.1.1.19 ロゴ、記章、旗、エンブレムを参照してください。

この例では、リンクに印刷プレビューのアイコンが入れられています。そのリンクは、印刷用のスタイルシートを適用したバージョンのページを指しています。代替テキストには、そのリンクのターゲットの簡単な説明を入れています。

リンクのコンテンツとして使われた印刷プレビューのアイコン

  <a href="preview.html">
  <img src="images/preview.png" width="32" height="30" alt="印刷プレビュー">
  </a>
  

この例では、ボタンに検索アイコンが入れられています。そのボタンは検索フォームをサブミットします。代替テキストには、そのボタンが何をするのかについて簡単な説明が入れられています。

ボタンのコンテンツとして使われた検索アイコン。

  <button>
  <img src="images/search.png" width="74" height="29" alt="検索">
  </button>
  

この例では、PIP Corporation の会社ロゴが、連続した 2 つの画像に分けられており、1 つ目には PIP という単語を、2 つ目には CO という略語が入れられています。これらの画像は、PIPCO ホームページへのリンクの単一のコンテンツです。この場合、リンクのターゲットの簡単な説明が提供されます。これらの画像はユーザーには 1 つのエンティティとして提供されるため、その代替テキスト PIP CO home は、最初の画像の alt 属性に入れられています。

テキスト 'PIP' を入れた画像。テキスト 'CO' を入れた画像。

  <a href="pipco-home.html">
  <img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt="">
  </a>
  
4.7.1.1.4 グラフィック表現: チャート、図表、グラフ、地図、イラスト

たとえば、フローチャート、図表、グラフや、方向が表示された地図など、コンテンツがグラフィック形式で提供されていると、ユーザーにとって便利になります。また、グラフィック形式で提供されているコンテンツがテキスト形式で提供されていても、ユーザーにとって便利になります。こういったユーザーとは、画像を見ることができない人たちのことです (たとえば、接続がとても遅い、テキストブラウザーを使っている、ハンズフリーの自動車向け音声ウェブブラウザーを使ってページを読み上げてもらって聞いている、視覚障害を持っており、支援技術を使ってテキストを読み上げてもらっている、といった理由)。

次の例には、円グラフの画像がありますが、alt 属性のテキストで、その円グラフに表示されたデータを表しています:

ブラウザーシェア: Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%。

  <img src="piechart.gif" alt="円グラフ: ブラウザーシェア - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%。">
  

前の段落と同じことをグラフィック形式の画像で言う場合、alt 属性でその画像にラベルを付けます。

 <p>最近の調査によると、ラウザーシェアは、Firefox が 40%、Internet Explorer は 25%、Chrome は 25%、Safari は 6%、Opera は 4% です。</p>
 <p><img src="piechart.gif" alt="円グラフは前の段落のデータを表しています。"></p>

src 属性の値が不適切だったなどの理由で画像が利用可能でないときは、代替テキストによって、ユーザーに画像コンテンツの簡単な説明が提供されるのを見ることができます:

上記のコード断片の表示。

代替テキストが長い場合は、1 つか 2 つ以上のセンテンスをマークアップ構造に入れ、簡単な説明やラベルと関連の代替テキストに alt 属性を使うと便利でしょう。

これはフローチャートの画像の例です。短い代替テキストを alt 属性に入れています。この場合、画像はリンクの単一のコンテンツですので、その代替テキストは、リンクのターゲットの説明となります。このリンクは説明を指していますが、それは同じドキュメントの中にあり、フローチャートの中に表示されているプロセスの説明です。

フローチャート: 壊れたランプの対処

  
  <a href="#desc"><img src="flowchart.gif" alt="フローチャート: 壊れたランプの対処"></a>

  ...

  ...

  <div id="desc">
  <h2>壊れたランプの対処</h2>
  <ol>
  <li>ちゃんと差し込まれているかをチェックし、差し込まれていなければ差し込む。</li>
  <li>それでも機能しなければ、バルブが焼き付いていないかをチェック。焼き付いていたなら、そのバルブを取り替える。</li>
  <li>それでも機能しなければ、新しいランプを買う。</li>
  </ol>
  </div>

この例には、チャートの画像があります。alt 属性に平文の代替テキストとしてチャートに描かれた情報を提供するのは不適切でしょう。その情報はデータセットだからです。代わりに、チャートの画像の中に表現されているデータを使って、データ表の形式で構造化された代替テキストが画像の下に提供されています。

国と季節ごとにミリメートルで平均降水量を表示した棒グラフ。

季節ごとの最高と最低の降水量の表示が表に入られており、グラフですぐに識別できる傾向は、データ表からも分かります。

国と季節ごとのミリメートル平均降水量
United Kingdom Japan Australia
Spring 5.3 (highest) 2.4 2 (lowest)
Summer 4.5 (highest) 3.4 2 (lowest)
Autumn 3.5 (highest) 1.8 1.5 (lowest)
Winter 1.5 (highest) 1.2 1 (lowest)
  <figure>
  <figcaption>降水量データ</figcaption>
  <img src="rainchart.gif" alt="棒グラフ: 国と季節ごとのミリメートル平均降水量">
  <table>
  <caption>国と季節ごとのミリメートル平均降水量</caption>
  <tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr>
  <tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr>
  <tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr>
  <tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr>
  <tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr>
  </table>
  </figure>
  

figure 要素が棒グラフ画像とデータ表のグループ化に使われています。figcaption 要素は、グループ化されたコンテンツに対してキャプションを提供しています。

4.7.1.1.5 テキストの画像

ときには、画像にテキストしか含まれない場合がありますが、その画像の目的は、ビジュアル効果やフォントを使ってテキストを表示することです。テキストのスタイルには CSS を使うことが強く推奨されますが、そうできない場合は、alt 属性に画像と同じテキストを提供します。

この例は、装飾的で複数の色を使って手書き風に書かれたテキスト "Get Happy!" の画像を表示しています。この画像は見出しのコンテンツをマークアップしています。この場合、画像の代替テキストは "Get Happy!" となります。

Get Happy!

<h1><img src="gethappy.gif" alt="Get Happy!"></h1>

この例にはテキストから成る広告画像があります。フレーズ "The BIG sale" が 3 回繰り返され、徐々に小さく、そして、薄くなっていきます。最後の行には "...ends Friday" と書かれています。広告のように、この文脈での利用においては、画像の代替テキストには、テキスト "The BIG sale" を 1 つだけ入れることが推奨されます。なぜなら、繰り返しはビジュアル効果のためであり、画像を見ることができないユーザーにとってテキストの繰り返しは不必要であり、混乱を招くかもしれないからです。

The big sale ...ends Friday.

  <p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>
  

テキストの画像と一緒に写真などのグラフィックもある状況では、画像を見ることができるユーザーには意味が伝わる画像の説明に加えて、その画像の言葉も代替テキストに入れられているかを確認してください。そうすることで、その情報は、画像を見ることができないユーザーでも利用することができるようになります。

Unicode で表すことができない文字を表すために画像が使われるとき、たとえば、外字、異体字、新設された通貨記号などの新たな文字などの場合は、代替テキストは、同じことを言うのに一般的に使われる記法を取るべきです。たとえば、ひらがなやカタカナといった音声文字を使って、文字の発音を与えます。

1997 年を例に取ると、新たな通貨記号が画像を使って表されました。丸みを帯びた E のようですが、真ん中には 1 本ではなく 2 本の線が入っています。代替テキストには、その文字の発音が入れられています。

たったの euro 5.99!

<p>たったの <img src="euro.png" alt="ユーロ ">5.99!

Unicode 文字で識別できるなら、画像を使うべきではありません。画像が適切と言えるのは、Unicode を使うとそのままでは表現できないテキストのときだけです。たとえば、装飾だったり、文字が Unicode 文字セットにない場合 (外字の場合など) です。

デフォルトのシステムフォントが指定の文字をサポートしていないと、ウェブ制作者は画像を使いたくなるでしょうが、その場合は、ウェブフォントの方が画像よりも優れた解決策です。

彩飾写本では、その文字のいくつかにグラフィックスを使うこともあるでしょう。このような状況での代替テキストは、その画像を表す文字のみとなります。

Once upon a time and a long long time ago...

<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...
4.7.1.1.6 テキストを含んだ画像

画像によっては、画像がチャートのようなグラフと、それに関連するテキストからなる場合があります。このような場合は、画像の中のテキストを代替テキストに入れることが推奨されます。

円グラフと関連テキストを含んだ画像を考えてみましょう。可能な限り、関連のテキストを、テキスト画像ではなくテキストとして、すべて提供することが推奨されます。こうできないなら、その画像が伝える核心的な情報を添えて、代替テキストの中にテキストを入れてください。

Figure 1. Distribution of Articles by Journal 
  Category. Pie chart: Language=68%, Education=14% and Science=18%.

  <p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category. 
  Pie chart: Language=68%, Education=14% and Science=18%."></p>
  

これも、同じ円グラフの画像の例ですが、alt 属性の中に短い代替テキストが、テキストには長い代替テキストが入れられています。figurefigcaption 要素を使って、長い代替テキストと画像を結び付けています。alt 属性は、画像のラベル付けに使われています。

  <figure>
  <img src="figure1.gif" alt="Figure 1">
  <figcaption><strong>Figure 1.</strong> Distribution of Articles by Journal Category. 
  Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
  </figure>
  

前の例と較べてこの方法のほうが良いのは、代替テキストがいつでもすべてのユーザーに利用可能な点です。こうすることで、代替テキストの中で構造化マークアップを使うこともできるようになります。代替テキストが alt 属性を使って提供されと、そうすることができません。

4.7.1.1.7 ページのコンテンツの主題や題材を引き立てる画像

前後のテキストで直接的に語られていないけれども何かしらの関係性がある画像でも、img 要素を使ってページに入れることができます。このような画像は単なる装飾というわけではなく、ページのコンテンツの主題や題材を補強し、ゆえに、コンテンツの一部を形成しているのかもしれません。こういったケースでは、代替テキストを提供することが推奨されます。

これは、ページのコンテンツの素材に深く関連しながらも、直接的には言及されていない画像の例です。詩をもとに描かれた絵画の画像が、ページ上でその詩を物語っています。次のスニペットは例を示しています。画像は、"シャロットの妖姫" と題名が付けられた絵画ですが、この画像は詩をもとに描かれたもので、その題材は詩に由来しています。ゆえに、代替テキストを提供することが強く推奨されます。alt 属性には、画像のコンテンツの短い説明があり、画像の下には、ドキュメントの最後に配置された長い説明へのリンクがあります。長い説明の最後には、絵画についての詳しい情報へのリンクもあります。

アルフレッド・テニスンの詩のシャロットの妖姫をもとにした絵画

  <header>
  <h1>シャロットの妖姫</h1>
  <p>詩:アルフレッド・テニスン卿</p>
  </header>

  <img src="shalott.jpeg" alt="長い髪の女性が木造の小船に座っている絵画。">
  <p><a href="#des">絵画の解説</a>。</p>


  <!-- アルフレッド・テニスン卿の詩がすべて綴られている。  -->

  ...
  ...
  ...
  <p id="des">絵画に書かれている女性は白いドレスを着ています。大きくて複雑な模様を持つ
  織物が端からはみ出て垂れ下がっています。彼女は右手で小舟を係留している鎖を掴んでいます。彼女の表情は悲しげ
  です。彼女は前に横たわる十字架像を見つめています。その傍らに、3 本のロウソクがありますが 2 本は消えています。 
  <a href="http://bit.ly/5HJvVZ">絵画に関する詳細情報</a>。</p>
  

この例は、ページの主題の写真として、画像を識別する代替テキストの提供方法を示しています。

Portrait photo(black and white) of Robin, accompanied by a heading 'Robin Berjon' and a question
    'what more needs to be said?'
    <img src="orateur_robin_berjon.png" alt="Portrait photo(black and white) of Robin.">
    <h1>Robin Berjon</h1>
    <p>What more needs to be said?</p>
    
4.7.1.1.8 前後のテキストのグラフィック表現

多くの場合、画像は実際には補完的なものに過ぎず、その存在は単に前後のテキストを補強しているだけです。こういった場合には、alt 属性は存在しなければいけませんが、その値は空文字列でなければいけません。

一般的に、画像が削除されてもページの有用性が低下するわけではないけれども、画像を入れることで、ビジュアルブラウザーのユーザーが概念を大幅に理解しやすくなるなら、その画像はこのカテゴリーに入ります。

画像に対して役に立つ代替テキストを書くのはいつも簡単とは限りません。画像に関する説明や追加情報があるなら、それへのリンクを用意する方法もあります。

同じ画像を使ったこの例では、短い代替テキストが alt 属性に入れられており、画像の後ろにリンクがあります。このリンクは、絵画に関する情報を含んでいるページを指しています。

シャロットの妖姫
アルフレッド・テニスン卿の詩。

白いゆったりとしたドレスを来た女性が小舟に座っている絵画。

この絵画について。

アルフレッド・テニスン卿の詩のすべて

  <header><h1>シャロットの妖姫</h1>
  <p>詩:アルフレッド・テニスン卿</p></header>
  <figure>
  <img src="shalott.jpeg" alt="白いゆったりとしたドレスを来た女性が小舟に座っている絵画。">
  <p><a href="http://bit.ly/5HJvVZ">この絵画について。</a></p>
  </figure>
  <!-- アルフレッド・テニスン卿の詩がすべて綴られている。  -->
  
4.7.1.1.9 何も情報を加えない純粋に装飾的な画像

純粋に装飾的な画像は、見た目を良くしたり、飾り付けをしたり、綺麗にしたりしますが、これは、画像を見ることができるユーザーに美学的なものを超えて、何ら機能や情報を提供するものではありません。

純粋に装飾的な画像をマークアップするなら、支援技術がそれを無視できるよう、using 属性を空にしてください (alt="")。装飾的な画像をインラインに入れるのは受け入れられないわけではありませんが、純粋に装飾的な画像なら、CSS を使ってその画像を入れることが推奨されます。

これは、個人ブログ向けに装飾的なバナーとして使われている画像の例です。この画像は何も情報を提供しないため、alt 属性を空にして使っています。

クララのブログ

私のブログへようこそ...

  <header>
  <div><img src="border.gif" alt="" width="400" height="30"></div>
  <h1>クララのブログ</h1>
  </header>
  <p>私のブログへようこそ...</p>
  
4.7.1.1.10 インライン画像

文の中のテキストの流れの一環で画像がインラインで使われるときは、それが入れられた文の文脈に合わせた単語や段落を代替テキストとして提供してください。

I love you.

I <img src="heart.png" alt="love"> you.

My heart breaks.

My <img src="heart.png" alt="heart"> breaks.

絵が小さな画像に分割され、その絵が完全に復元されるようそれらが一緒に表示されるときは、それら画像のうち 1 つに alt 属性を使って、その絵の全体に対するガイダンスを代替テキストとして入れてください。そして、他の画像には空の alt 属性を入れてください。

この例では、PIP Corporation の会社ロゴを表す 1 つの絵が 2 つのピースに分割されています。最初には文字 "PIP" が、二つ目には 単語 "CO" が入れられています。代替テキスト PIP CO が、最初の画像の alt 属性に入れられています。

Image containing the text 'PIP'.Image containing the text 'CO'.

  <img src="pip.gif" alt="PIP CO"><img src="co.gif" alt="">
  

次の例では、レーティングが、3 つの塗りつぶされた星と、2 つの空の星として表示されています。代替テキストは "★★★☆☆" でも良いのですが、ウェブ制作者は、もっと便利にしようと、"5 段階中 3" という形式でレーティングを入れることにしました。これを最初の画像の代替テキストとしましたが、残りは空の alt 属性にしてあります。

5 段階中 3

  <p>Rating: <meter max=5 value=3>
  <img src="1" alt="5 段階中 3">
  <img src="1" alt=""><img src="1" alt="">
  <img src="0" alt=""><img src="0" alt="">
  </meter></p>
  
4.7.1.1.12 イメージマップ

img 要素が usemap 属性を持ち、それが href 属性を持つ area 要素を含んだ map 要素を参照しているなら、その img 要素は、インタラクティブ・コンテントだと見なされます。この場合は、必ず、alt 属性を使って、その画像に対して代替テキストを提供してください。

次の画像を考えてみましょう。これはカトゥーンバの地図ですが、2 つのインタラクティブな領域があり、カトゥーンバの北部と南部に対応付けられています:

カトゥーンバの地図

北カトゥーンバ 南カトゥーンバ

代替テキストは、画像の簡単な説明です。area 要素それぞれの alt 属性は、それぞれのリンク領域のターゲットページのコンテンツを説明するテキストを提供しています:

<p>北カトゥーンバと南カトゥーンバの売家を見る:</p>
 <p><img src="imagemap.png" width="209" alt="カトゥーンバの地図" height="249" usemap="#Map">

 <map name="Map"> 
 <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" 
 href="north.html" alt="北カトゥーンバの家">
 <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" 
 alt="南カトゥーンバの家" href="south.html">
 </map> 

一般的に、イメージマップは、画像を分割せずに複数のリンクを入れたい場合に使うべきです。

複数の画像を組み合わせて一つの絵を生成したいとき、1 つ以上の画像にリンクをセットしたいと思うことがあるかもしれません。リンクをセットする画像のそれぞれに alt 属性を用意して、リンクの目的を説明してください。

次の例では、"ワニアヒル" を表現するために複数の絵が使われています。これは、架空の生き物で、一部がワニで一部がアヒルという進化論の原理を無視したものです。このワニアヒルと触れ合うよう言われたら、注意が必要です...

ワニの怒っていかにも食いかかってきそうな頭アヒルの柔らかくてふさふさの体

  <h1>ワニアヒル</h1>
  <p>あなたは "ワニアヒル" と呼ばれる風変わりな生き物に出くわしました。
この生き物は怒っているようです。たぶん、優しく撫でてあげれば、おとなしくなるで
しょうが、ワニの部分を撫でないよう注意してください。でないと、激怒して獣と
化してしまいます。</p>
  <a href="?stroke=head"><img src="crocoduck1.png" alt="ワニの怒っていかにも食いかかってきそうな頭を撫でる"></a> 
  <a href="?stroke=body"><img src="crocoduck2.png" alt="アヒルの柔らかくてふさふさの体を撫でる"></a>  
  
4.7.1.1.14 Images of Pictures

絵やグラフィックスの画像は、物、人、風景、抽象画などのビジュアル表現を含みます。この非テキストコンテント [WCAG] は、目の見える人に対して、ビジュアルに大量の情報を伝えたり、特定の知覚経験 [WCAG] を与えることができます。例としては、写真、絵画、スケッチ、挿絵が挙げられます。

写真に適した代替テキストは簡単な説明や名前 [WCAG] です。代替テキストに何を書くかを決めるにあたり、写真に適した代替テキストを書くことは、人の判断が要求されます。テキストの値は、その画像が使われる文脈と、そのページの著者の書き方に左右されます。ゆえに、特定の画像に対して、alt テキストに何が '適切' だとか '正しい' というのは一概に言えません。非テキストコンテントに代替テキストを入れて簡単な説明を加えるだけでなく、適切であれば、他の手段を通して補足的なコンテンツを提供することも有益となるでしょう。

この最初の例は、写真共有サイトにアップロードされた画像を示しています。この写真は猫が浴槽の中で座っている写真です。この画像は、代替テキストが img 要素の alt 属性を使って提供されています。また、figure 要素の中に img 要素を入れることで、キャプションも提供されており、figcaption 要素を使って、キャプションのテキストを指定しています。

バスタブの中で傘の下で座っている猫のローラ。

ローラはシャワーよりお風呂のほうがお好み。

  <figure>
  <img src="664aef.jpg" alt="バスタブの中で傘の下で座っている猫のローラ。">
  <figcaption>ローラはシャワーよりお風呂のほうがお好み。</figcaption>
  </figure>
  

この例は、完全には説明しにくい画像の例です。それは、この画像のテーマの解釈がいろいろだからです。この画像には、alt 属性に代替テキストが入れられ、画像を見ることができないユーザーに、その画像がどんな感じなのかを伝えています。また、figure 要素の中に img 要素を入れて、キャプションも提供しています。figcaption 要素を使って、そのキャプションのテキストを特定しています。

明るい背景上の、抽象的で、自由造形で、左右対称で、黒のインクの染み。

ロールシャッハ・テストの 10 枚のカードの 1 枚目。

<figure>
  <img src="Rorschach1.jpg" alt="明るい背景上の、抽象的で、自由造形で、左右対称で、黒のインクの染み">
  <figcaption>ロールシャッハ・テストの 10 枚のカードの 1 枚目。</figcaption>
  </figure> 
4.7.1.1.15 ウェブカム画像

ウェブカム画像とは、定期的に自動的に更新される静的な画像のことです。通常は、画像は固定された場所からのもので、新たな画像がカメラからアップロードされるたびにページ上でその画像が自動的に更新されます。または、更新画像を見るためにユーザーはページを再読込する必要があるかもしれません。例としては、交通カメラ画像や天気画像が挙げられます。

この例は極めてありきたりです。自動的にウェブカムのソフトウェアによって画像が生成され、タイトルとタイムスタンプがその画像に入れられています。テキスト情報は画像の中に入れなかったほうが良いかもしれませんが、画像の一部にするなら、それも代替テキストの一部として入れてください。キャプションも figurefigcaption 要素を使って提供されています。ビル近辺の現在の天気を見せるために画像を提供しつつ、現地の天気予報へのリンクが提供されていますが、これは。ウェブカムの画像が自動的に生成されアップロードされるため、そういった情報を代替テキストとして提供しても、あまり役に立たないかもしれないからです。

alt 属性のテキストにタイムスタンプのバージョンが入れられていますが、これは音声読み上げソフトウェアがテキストを読み上げる際に理解しやすいようにするために考えられたものです。代替テキストには、画像から見ることができるものの中で、天気の状態と時刻が変わっても、変化がない部分に関しての説明が入れられています。

Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds. In the foreground are the safety
  rails on the flat part of the roof. Nearby ther are low rise industrial buildings, beyond those are block of flats. In the distance there's a
  church steeple.

ソップウィス・ハウスの屋上からの眺め。北キングストンの方を向いています。この画像は 1 時間ごとに更新されます。

テムズ川沿いのキングストンの最新の天気情報をご覧ください。

<figure>
  <img src="webcam1.jpg" alt="ソップウィス・ハウスのウェザーカム。撮影は 2010/04/21 11:51:34 です。
  手前にはアパートの屋根の上に安全柵があります。そばには低層の工業用建物があります。
  その向こうには何棟かのアパートがあります。遠くには教会の尖塔があります。">
  <figcaption>ソップウィス・ハウスの屋上からの眺め。北キングストンの方を向いています。この画像は 1 時間ごとに更新されます。</figcaption>
  </figure>
  <p>テムズ川沿いのキングストンの<a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">最新の天気情報</a>をご覧ください。</p>
  
4.7.1.1.16 代替テキストが公開時に入手できない場合

画像が公開ドキュメントに入れられたけれども、ウェブ制作者が適切な代替テキストを提供することができないことがあります。このような場合は、最低限、次の条件下で、figurefigcaption 要素を使って、画像に対してキャプションを提供してください:

  • img 要素を figure 要素の中に入れる
  • figure 要素に figcaption 要素を入れる
  • figcaption 要素に要素間ホワイトスペース以外のコンテンツを入れる
  • figcaption 要素とその子孫を除き、figure 要素に要素間ホワイトスペース以外の Text ノードを入れず、かつ、img 要素以外にエンベッディッド・コンテントの子孫を入れない。

言い換えると、figure のコンテンツは img 要素と figcaption 要素のみとし、figcaption 要素は (キャプションとなる) コンテンツを含まなければいけません。

このような場合は絶対最低限を維持するべきです。ウェブ制作者が本当の代替テキストを提供することができる可能性がほんの少しでもあるなら、alt 属性を省略することは許容できません。

これは、ある人が、写真共有サイトへ、多くの画像アップロードがあるなか、一枚の写真をアップロードする例です。ユーザーは画像に対して代替テキストやキャプションを提供しませんでした。このサイトのオーサリングツールは、自動的にキャプションを挿入しますが、その画像に役に立つ情報は何でも使います。この場合はファイル名と撮影日時です。

代替テキストが提供されていません

clara.jpg, 撮影日時:2010/11/12

  <figure>
  <img src="clara.jpg">
  <figcaption>clara.jpg, 撮影日時:2010/11/12</figcaption>
  </figure>
  

この例ですら、できる限り役立ちそうな情報を figcaption 要素に入れていることに注目してください。

次は、ある人が写真共有サイトに写真をアップロードする例です。彼女は画像にキャプションを用意しましたが、代替テキストは用意しませんでした。これは、そのサイトがユーザーに alt 属性に代替テキストを追加する機能を提供していないからなのかもしれません。

代替テキストが提供されていません

ベル王妃と一緒のエロイーザ

  <figure>
  <img src="elo.jpg">
  <figcaption>ベル王妃と一緒のエロイーザ</figcaption>
  </figure>
  

ときには、画像のあらゆる点でテキストの説明が取得できず、ユーザーに説明を用意してもらわなければいけない場合があります。たとえば、画像を表示し、詳細な代替テキストを入力してもらい、正しい代替テキストでページを書くようなソフトウェアです。そのようなページには、このように画像の表を入れることができるでしょう:

<table>
  <tr><tr> <th> 画像 <th> 説明<tr>
  <td>
  <figure>
  <img src="2421.png">
  <figcaption>画像 640 × 100, ファイル名 'banner.gif'</figcaption>
  </figure>
  <td> <input name="alt2421">
  <tr>
  <td> <figure>
  <img src="2422.png">
  <figcaption>画像 200 × 480, ファイル名 'ad3.gif'</figcaption>
  </figure>
  <td> <input name="alt2422">
  </table>

画像をまったく使うことができないユーザーもいるため (たとえば、盲目などの理由)、前述の例に関しては、alt 属性は、代替テキストがまったく手に入れられず、何も使えるものがない合に限り、省略が許されます。

4.7.1.1.17 ユーザー向けではない画像

一般的に、ウェブ制作者は、画像を表示する以外の目的で、img 要素を使うことを避けるべきです。

もし img 要素が画像を表示する以外の目的で使われているなら、たとえば、ページビューをカウントするサービスの一部などの場合は、空の alt 属性を使ってください。

img 要素がウェブページの統計を収集するために使われている例です。この画像は意味を何も持たないため、alt 属性は空です。

  <img src="http://server3.stats.com/count.pl?NeonMeatDream.com" width="0" height="0" alt="">
  

前述の例では、widthheight 属性を 0 にセットすることが推奨されます。

この例では、spacer.gif のような画像がコンテンツの位置調整に使われています。この画像は意味を何も持たないため、alt 属性は空です。

  <img src="spacer.gif" width="10" height="10" alt="">
  

コンテンツの位置調整には、img 要素ではなくて、CSS を使うことが推奨されます。

4.7.1.1.18 アイコン画像

アイコンは、通常はプログラム、アクション、データファイル、コンセプトなどを表す簡単な絵です。アイコンは、一目で機能が認識できるよう、ビジュアルブラウザーのユーザーを助けることを目的としています。

アイコンが、同じ意味を伝えるテキストの補足であるときは、空の alt 属性を使ってください。

この例には、サイトのホームを指しているリンクがあり、そのリンクには家のアイコン画像とテキスト "home" が入れられています。この画像の alt テキストは空です。このように画像が使われる場合は、CSS を使って画像を加えても良いでしょう。

A house icon next to the word 'home'.

  <a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a>
  
  #home:before
  { 
  content: url(home.png);
  }

  <a href="home.html" id="home">Home</a>
  

この例には、警告メッセージがあり、警告アイコンも入れられています。単語 "Warning!" は、アイコンのとなりにある強調テキストに入れられています。アイコンが伝える情報は冗長なため、img 要素には空の alt 属性を指定しています。

Warning!Warning! Your session is about to expire.

  <p><img src="warning.png" width="15" height="15" alt="">
  <strong>Warning!</strong> 
  Your session is about to expire</p>
  

アイコンがテキストにはない追加の情報を伝えるなら、代替テキストを与えてください。

この例には、警告メッセージがあり、警告アイコンも入れられています。アイコンはメッセージの重要度を強め、固有のタイプのコンテンツであることを明確化しています。

Warning!Your session is about to expire.

  <p><img src="warning.png" width="15" height="15" alt="Warning!">
  Your session is about to expire</p>
  
4.7.1.1.19 ロゴ, 記章, 国旗, 標章

多くのページは、ロゴ、記章、国旗、標章が入れられていますが、これらは、会社、組織、プロジェクト、バンド、ソフトウェアパッケージ、国などの実態を表します。適切な代替テキストとして考慮することができることは、あらゆる画像に言えることですが、その画像が使われる文脈や、文脈の中でそれが提供する機能に依存します。

ロゴがリンクの唯一のコンテンツなら、alt 属性に、該当のリンク先の簡単な説明を入れてください。

この例は、HTML 仕様へのリンクの唯一のコンテンツとして HTML5 のロゴが使われているところを見せています。

HTML 5.1 Nightly specification

  <a href="http://dev.w3.org/html5/spec/spec.html">
  <img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>
  

ロゴが、たとえばページの見出しとして、何かしらの実体を表すために使われているなら、そのロゴによって表されている実態の名前を代替テキストとして提供してください。

この例は、WebPlatform.org のロゴが使われているところを見せていますが、これは、それ自身を表すために使われています。

WebPlatform.org and other developer resources

  <h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources<h2>
  

この例の代替テキストには単語 "logo" を入れて、その画像のコンテンツの種類を説明しても良いでしょう。もしそうするなら、カギ括弧を使って、この情報を詳説することが推奨されます: alt="[logo] WebPlatform.org"

ロゴが、それが表しているものの名前のとなりで使われているなら、そのロゴは補足的なものです。その代替テキストはすでに提供されているわけですから、空の alt 属性を入れてください。

この例は、ロゴが、それが表す組織の名前のとなりに使われているところをを見せています。

WebPlatform.org

  <img src="images/webplatform1.png" alt=""> WebPlatform.org
  

ロゴが、そのロゴが表す主題や実体について解説するテキストとともに使われるなら、ロゴを言い表す代替テキストを提供してください。

この例は、ロゴが表す主題について解説するテキストのとなりでロゴを使うところを見せています。

HTML5 ロゴ: 盾のような形をしており、その上にはテキスト  で 'HTML' と書かれており、盾の正面には数字の '5' が際立っています。

HTML5 は、ワールドワイドウェブのコンテンツを構築し表示するための言語で、インターネットの中核技術です。これは HTML 標準の最新のバージョン(もともとは 1990 年に作られ、最後は 1997 年に HTML4 として標準化されました)で、現在は開発中です。その中心的な狙いは、最新のマルチメディアのサポートとともに、この言語を改良することですが、人にとって読みやすいままでありながらも、コンピューターやデバイス(ウェブブラウザー、パーサーなど)によっても理解できるものとしています。

  <p><img src="HTML5_Logo.png" alt="HTML5 ロゴ: 盾のような形をしており、その上にはテキスト
  で 'HTML' と書かれており、盾の正面には数字の '5' が際立っています。"></p>
  
  Information about HTML5
4.7.1.1.20 CAPTCHA 画像

CAPTCHA は、"Completely Automated Public Turing test to tell Computers and Humans Apart"(コンピュータと人間を区別する完全に自動化された公開チューリングテスト) の略です。CAPTCHA 画像は、コンテンツがコンピューターではなく人によってアクセスされているかを確認するセキュリティー上の目的に使われます。この認証は、画像の視覚確認を通してなされます。CAPTCHA は、一般的に、ユーザーが入力するべき文字や単語を伴う画像を提供します。その画像は、通常は、歪められたり、ノイズがちりばめられたりして、その文字を読みにくくします。

CAPTCHA のアクセシビリティを向上するために、画像の目的を特定し説明する代替テキストを提供し、その CAPTCHA の代替の形式を提供して、異なる種類の知覚に対応した出力モードを使ってください。たとえば、ビジュアル画像とともに、その代替としてオーディオも提供してください。ビジュアル画像のすぐ横にオーディオオプションを配置してください。こうしたとしても、依然、問題は残ります。たとえば、サウンドーカードがない人もいますし、耳が不自由な人もいますし、聞きづらい人もいるでしょう。ビジュアル画像をともに、その質問に答えることができるフォームも入れておくべきです。これでも認識機能障害の人には問題が残ります。

CAPTCHA はどんな形式であろうがームが、障碍を持つユーザーにとって、受け入れがたい障壁を招いてしまいますので、CAPTCHA には代替手段を用意することが強く推奨されます。詳細情報は、Inaccessibility of CAPTCHA でご覧頂けます。

この例は、CAPTCHA テストを見せていますが、歪んだ画像テキストを使っています。alt 属性の代替テキストは、その画像コンテンツにアクセスできない状況のユーザーのために説明を提供しています。

キャプチャには単語 'aides' と 'sprucest' が入れられています。これらの文字は歪められており、文字と背景の色は部分的に逆転しています。

サンプルコード:

<img src="captcha.png" alt="この画像が見れない場合は、オーディオで挑戦できます。"> 
  <!-- オーディオ CAPTCHA オプションによって、ユーザーは単語を聞いて入力 -->  
  <!-- できるようになります。 -->
  
4.7.1.1.21 マークアップジェネレーター向けのガイダンス

マークアップジェネレーター (WYSIWYG オーサリングツールなど) は、可能な限り、ユーザーから代替テキストを取得するべきです。しかし、多くの場合でそれが可能ではないことは分かっています。

リンクのコンテンツが画像だけになる場合、その画像に対して、マークアップジェネレーターは、リンク先を調べて、そのリンク先のタイトルやリンク先の URL を判定し、このように取得した情報を、代替テキストとして使うべきです。

キャプションを持つ画像に対して、マークアップジェネレーターは、figurefigcaption 要素を使って、その画像のキャプションを提供するべきです。

最後の手段として、実装者は、その画像は何も情報を付加しない純粋な装飾画像ながらも前後のコンテンツに固有なものだとみなして alt 属性を空文字列にセットするか、もしくは、その画像がコンテンツの重要な部分だとみなして alt 属性をまるごと省略するか、のいずれかとするべきです。

マークアップジェネレーターは、代替テキストを取得できなかった場合や、それゆえに alt 属性を省略した場合、その img 要素に generator-unable-to-provide-required-alt 属性を指定することができます。この属性の値は、空文字列でなければいけません。この属性が入れられたドキュメントは非準拠ですが、準拠チェッカーはこのエラーを何事もなかったかのように無視します。

これは、マークアップジェネレーターが、alt 属性を省略してエラーになってしまう代わりに、インチキまがいの代替テキストを提供する衝動に駆られないよう考えられたものです。なぜなら、最新の自動準拠チェッカーは、インチキまがいの代替テキストと正しい代替テキストを区別できないからです。

マークアップジェネレーターは、通常は、画像のファイル名を代替テキストとして使うことを避けるべきです。同様に、マークアップジェネレーターは、表示用ユーザーエージェント (ウェブブラウザーなど) から等しく入手可能なコンテンツから代替テキストを生成することは避けるべきです。

これは、ページが一度生成されてしまうと、通常は更新されないからです。一方で、後でそのページを読むブラウザーは、ユーザーによってアップデートすることができます。そのため、ブラウザーは、マークアップジェネレーターがページを生成した時に行ったこと以上に、最新できめ細やかな経験則手法を使えるかもしれません。

4.7.1.1.22 準拠チェッカー向けのガイダンス

準拠チェッカーは、alt 属性がない場合は、以下に挙げた条件のどれにも当てはまらない限り、エラーとして報告しなければいけません:

  • img 要素が、前述の条件を満たす figure 要素の中にある。

  • img 要素が (非準拠の) generator-unable-to-provide-required-alt 属性を持ち、その値は文字列である。alt 属性がない場合にエラーとして報告しない準拠チェッカーは、空の generator-unable-to-provide-required-alt 属性もエラーとして報告してはいけません。(このケースは、ドキュメントが準拠している場合を表しているわけではなく、ジェネレーターが適切な代替テキストを決定できなかった場合のみの話です。 — バリデーターはこの場合にエラーを表示することは求められません。なぜなら、このようなエラーは、マークアップジェネレーターが、純粋にバリデータを黙らせようと、でたらめな代替テキストを入れることを後押ししてしまうかもしれないからです。当然ながら、準拠チェッカーは、たとえ generator-unable-to-provide-required-alt 属性が存在していたとしても、alt 属性がなければエラーとして報告することができます。たとえば、マークアップジェネレーターを使った場合には不可避となるようなエラーも含めて、準拠エラーをすべて報告するようなユーザーオプションも考えられるでしょう。)


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-img-element