4.8.2 img 要素

Status: Last call for comments. ISSUE-66 (image-analysis) and ISSUE-30 (longdesc) block progress to Last Call

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

エンベッディッド・コンテンツ

この要素が usemap 属性を持つなら：インタラクティブ・コンテンツ

この要素を使うことができるコンテキスト：

エンベッディッド・コンテンツが期待される場所

コンテンツモデル：

Empty.

コンテンツ属性：

グローバル属性

alt

src

usemap

ismap

width

height

DOMインタフェース：

[NamedConstructor=Image(),
 NamedConstructor=Image(in unsigned long width),
 NamedConstructor=Image(in unsigned long width, in unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute boolean complete;
};

img 要素は、イメージを表します。

src 属性で指定されたイメージは、エンベッディッドコンテンツです。そして、alt 属性の値は、その img 要素のフォールバック・コンテンツです。

src 属性は必須です。そして、それは、非インタラクティブなイメージリソースを参照する妥当な URL でなければいけません。そのイメージリソースはアニメーションでも構いません。しかし、それは、ページであってもスクリプトであってもいけません。その要素のベース URI は、ドキュメントのアドレスと同じです。src 属性の値は、空の文字列であってはいけません。

イメージは、ゆえに、静的なビットマップ（例：PNG, GIF, JPEG）や、単一ページ・ベクター・ドキュメント（単一ページのPDF, SVG ルート要素を持った XML ファイル）や、アニメーション・ビットマップ（APNG, アニメーションGIF）や、アニメーション・ベクターグラフィック（宣言型 SMIL アニメーションを使った SVG ルート要素を持った XML ファイル）などが考えられます。しかし、スクリプトを伴った SVG ファイルや、マルチページの PDF ファイルや、インタラクティブ MNG ファイルや、HTML ドキュメントや、プレーンテキストドキュメントなどは除外されます。

alt 属性の値に関する要件については次の節で説明します。

img は、レイアウトツールとして使ってはいけません。特に、img 要素は、透明なイメージを表示するために使われるべきではありません。それは、意味を伝えることはありませんし、ドキュメントに何か役に立つものを加えるわけでもないからです。

usemap 属性が存在すれば、それは、そのイメージが関連のイメージマップを持っていることを表します。

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

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

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

image . width [ = value ]

image . height [ = value ]

これらの属性は、イメージがレンダリングされた実際に寸法を返します。もし寸法が不明なら、0 を返します。

これらをセットすることで、対応するコンテンツ属性を変更することができます。

image . complete

イメージがダウンロードされ、デコードされ、妥当と判明したら、true を返します。そうでなければ、false を返します。

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

img 要素を新規に生成します。その width と height 属性は、適用可能であれば、対応の引数に渡された値にセットされます。

<p>私は <img src="carouge.svg" alt=""> カルージュに住んでいました。</p>

<p>出身地： <img src="carouge.svg" alt="カルージュ"></p>

<p>カルージュには紋章があります。</p>
<p><img src="carouge.svg" alt="紋章には、木の前で座っているライオンが描かれています。"></p>
<p>これは、街中で飾り付けとして使われます。</p>

<p>カルージュには紋章があります。</p>
<p><img src="carouge.svg" alt=""></p>
<p>紋章には、木の前で座っているライオンが描かれています。
これは、街中で飾り付けとして使われています。</p>

<p>彼はフォルダーを拾い上げ、紙切れを放り込んだ。</p>
<p><img src="carouge.svg" alt="その紙には、盾のような形をした赤色の背景に、緑色の木、そして、舌を垂らした黄色のライオンが描かれています。そのライオンの尾はS字になっています。"></p>
<p>彼はそのフォルダーを見つめた。S だ！ずっと探してきた答え、それは、ただ単に S という文字だったのだ。どうして彼は今まで気づかなかったのだろう。今、すべてがひとつになった。ヘクターがライオンの尾へとたどりついた電話のコール、マルコが舌を出したその時 ...</p>

<p>ユーザーがアップロードした最新の紋章はこれです：</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="ユーザーがアップロードした紋章"></p>

<article>
 <h1>私の猫ちゃんたち</h1>
 <h2>フルフィー</h2>
 <p>フルフィーは私の一番のお気に入りです。</p>
 <img src="fluffy.jpg" alt="彼女は毛糸の玉で遊ぶのが好きです。">
 <p>彼女は、ホントにかわいいの。</p>
 <h2>マイルズ</h2>
 <p>私のもう一匹の猫です。マイルズは食っちゃ寝そのものなんです。</p>
</article>

<article>
 <h1>写真撮影</h1>
 <h2>室内で動いている被写体を写す</h2>
 <p>ここでのコツは、その被写体の移動速度と移動距離をどうやって予想するかを知っておくことです。</p>
 <img src="fluffy.jpg" alt="飛び去る猫や、毛糸の玉と戯れる猫は、このテクニックを使えば、かなり上手に撮影できます。">
 <h2>夜間の自然</h2>
 <p>これを達成するには、最高に感度の良いフィルムか、強力なフラッシュライトが必要となるでしょう。</p>
</article>

<article>
 <h1>私について</h1>
 <h2>私のペットたち</h2>
 <p>私はフルフィーという名前の猫と、マイルズという名前の犬を飼っています。</p>
 <img src="fluffy.jpg" alt="私の猫、フルフィーは、忙しいったらありゃしない。">
 <p>私の犬、マイルズと私は、一緒に長い散歩に出かけるのが好きです。</p>
 <h2>音楽</h2>
 <p>私たちの散歩の後で、私は心を空にしてバッハを聴くのが好きです。</p>
</article>

<article>
 <h1>フルフィーと毛糸</h1>
 <p>フルフィーは、毛糸と遊ぶのが好きな猫です。彼はジャンプするのも好きです。</p>
 <aside><img src="fluffy.jpg" alt="" title="フルフィー"></aside>
 <p>彼は朝に遊び、晩にも遊びます。</p>
</article>

4.8.2.1 イメージの代替として作用するテキストを提供するための要件

Status: Controversial Working Draft. ISSUE-31 (missing-alt) blocks progress to Last Call

alt 属性の要件は、次の節で説明するとおり、そのイメージが何を表すものなのかに依存します。

4.8.2.1.1 イメージだけを含むリンクやボタン

ハイパーリンクとなる a 要素や button 要素が、一つ以上のイメージを含み、テキストコンテンツを持たないとき、その alt 属性には、リンクやボタンの目的を一緒に伝えるテキストを含めなければいけません。

<h1>あなたの色を選択してください</h1>
<ul>
 <li><a href="green.html"><img src="green.jpeg" alt="緑"></a></li>
 <li><a href="blue.html"><img src="blue.jpeg" alt="青"></a></li>
 <li><a href="red.html"><img src="red.jpeg" alt="赤"></a></li>
</ul>

<button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

<button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>

<button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

4.8.2.1.2 グラフィック表現を伴ったフレーズや段落：チャート、図表、グラフ、地図、挿絵

時には、グラフィカルな形式を使えば、もっとはっきりと伝えられることがあります。例えば、フローチャート、図表、グラフ、方向を示す簡単な地図です。このようなケースでは、img 要素を使ってイメージを与えることができます。しかし、それでも、内容は劣りますが、テキスト版も与えて、イメージを見ることができないユーザー（例えば、接続が非常に遅い、テキスト限定ブラウザーを使っている、ハンドフリー車用音声ウェブブラウザーで読み上げられているページを聞いている、単に目が不自由、といった理由）にも、そのメッセージが伝わるようにしなければいけません。

そのテキストは、alt 属性で与え、src 属性で指定されたイメージと同じメッセージが伝わるようにしなければいけません。

代替テキストがイメージの置き換えとなり得ることが重要なのです。イメージの説明ではないのです。

<p>Tokenizer で扱うデータはネットワークから来るものがほとんどですが、スクリプトから来ることもあり得ます。</p>
<p><img src="images/parsing-model-overview.png" alt="Network はデータを Tokenizer 段階へ引き渡し、そのデータは Tree Construction 段階へ引き渡されます。ここから、データは、DOM と Script Execution の両方へ行きます。そして、document.write() を使って、Tokenizer へデータを引き渡します。"></p>

<!-- これは正しいやり方です。 -->
<p>
 あなたは、家の西にある何もない野原に立っています。
 <img src="house.jpeg" alt="家は白色で、板張りの玄関ドアがあります。">
 ここに小さな郵便受けがあります。
</p>

<!-- これは間違ったやり方です。 -->
<p>
 あなたは、家の西にある何もない野原に立っています。
 <img src="house.jpeg" alt="板張りの玄関ドアがある白色の家">
 ここに小さな郵便受けがあります。
</p>

4.8.2.1.3 代替のグラフィック表現を伴った短いフレーズやラベル：アイコン、ロゴ

ドキュメントにはアイコン形式で情報を入れることができます。アイコンは、ビジュアルブラウザーのユーザーが、ひと目で機能を認識できるのに役立つよう考えられたものです。

いくつかのケースでは、アイコンは、同じ意味を伝えるテキストラベルに対して補足的なものです。これらのケースでは、alt 属性は必須ですが、空でなければいけません。

<nav>
 <p><a href="/help/"><img src="/icons/help.png" alt="">ヘルプ</a></p>
 <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
 設定ツール</a></p>
</nav>

別のケースでは、そのアイコンが何を意味するかを説明するテキストが、アイコンの隣にない場合もあります。そのアイコンは見ればすぐに分かるはずです。このようなケースでは、同等のテキストラベルが、alt 属性で与えられなければいけません。

<body>
 <article>
  <header>
   <h1>『レミーのおいしいレストラン』 <i>Best Movie of the Year</i> アワード受賞</h1>
   <p><img src="movies.png" alt="映画"></p>
  </header>
  <p>ピクサーがまたもや <i>Best Movie of the Year</i> アワードを受賞しました。
  この12年間で8回目の受賞となりました。</p>
 </article>
 <article>
  <header>
   <h1>最新の TWiT エピソードをオンラインで</h1>
   <p><img src="podcasts.png" alt="ポドキャスト"></p>
  </header>
  <p>最新の TWiT エピソードが投稿されました。ここでは、iPhone についてもっと学べるだけでなく、テック・ニュース・ストーリーも聞くことができます。今週は、パネリストが、彼らの iPhpne のアップルのロゴがどれくらいピカピカ光っているのかを比べます。</p>
 </article>
</body>

多くのページでは、ロゴ、記号、フラグ、エンブレムを含んでおり、会社、組織、プロジェクト、バンド、ソフトウェアパッケージ、国、といった特定の実体を表します。

例えば、ページヘッダとして、ロゴが実体を表すために使われているなら、alt 属性は、そのロゴによって表されている実体の名前を含んでいなければいけません。alt 属性は、単語 "ロゴ" といったテキストを含んではいけません。そのロゴが伝えていることは、それがロゴだということではなく、その実体そのものだからです。

ロゴが表す実体の名前が、ロゴの隣で使われているなら、そのロゴは補足的なものです。その alt 属性は空でなければいけません。

ロゴがただ単に装飾的な材料として使われているだけなら（ブランディングとして、または、例えば、そのロゴが属する実体に言及する記事でのサイドイメージとして）、純粋に装飾的なイメージに関する下記のエントリが当てはまります。ロゴが実際に話題の対象となっているのなら、それは、代替のグラフィック表現（ロゴ自身のこと）を伴ったフレーズや段落（ロゴの説明）として使われており、前述の最初のエントリが当てはまります。

<h1><img src="XYZ.gif" alt="The XYZ company"></h1>

<article>
 <h2>News</h2>
 <p>We have recently been looking at buying the <img src="alpha.gif"
 alt=""> ΑΒΓ company, a small Greek company
 specializing in our type of product.</p>

 <aside><p><img src="alpha-large.gif" alt=""></p></aside>
 <p>The ΑΒΓ company has had a good quarter, and our
 pie chart studies of their accounts suggest a much bigger blue slice
 than its green and orange slices, which is always a good sign.</p>
</article>

<p>Consider for a moment their logo:</p>

<p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p>

<p>How unoriginal can you get? I mean, oooooh, a question mark, how
<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p>

4.8.2.1.4 印刷効果グラフィックにレンダリングされたテキスト

ときどき、テキストだけから構成されたイメージがあります。そのイメージの目的は、テキストのレンダリングに使われる実際の印刷効果を強調ことではなく、テキストそのものを伝えることです。

このようなケースでは、alt 属性は必須ですが、イメージそのものに書かれたものと同じテキストで構成されなければいけません。

<h1><img src="earthdayheading.png" alt="Earth Day"></h1>

4.8.2.1.5 前後のテキストのグラフィック表現

多くのケースでは、イメージは実際には補足的なものに過ぎず、その存在は、ただ単に前後のテキストを補強するに過ぎません。このようなケースでは、alt 属性は必須ですが、その値は空文字列でなければいけません。

イメージを削除したとしても、そのページが不便になることがなく、そのイメージが含まれていることで、ビジュアルブラウザーを使うユーザーが概念をもっと簡単に理解できるようになるのであれば、一般的には、そのイメージは、このカテゴリーに属します。

<p>Network はデータを Tokenizer 段階へ引き渡し、そのデータは Tree Construction 段階へ引き渡されます。ここから、データは、DOM と Script Execution の両方へ行きます。そして、document.write() を使って、Tokenizer へデータを引き渡します。</p>
<p><img src="images/parsing-model-overview.png" alt=""></p>

<!-- title="" 属性を使う -->
<p>Network はデータを Tokenizer 段階へ引き渡し、そのデータは Tree Construction 段階へ引き渡されます。ここから、データは、DOM と Script Execution の両方へ行きます。そして、document.write() を使って、Tokenizer へデータを引き渡します。</p>
<p><img src="images/parsing-model-overview.png" alt=""
        title="パースモデルのフローチャート表現"></p>

<!-- <figure> と <legend> を使う -->
<p>Network はデータを Tokenizer 段階へ引き渡し、そのデータは Tree Construction 段階へ引き渡されます。ここから、データは、DOM と Script Execution の両方へ行きます。そして、document.write() を使って、Tokenizer へデータを引き渡します。</p>
<figure>
 <img src="images/parsing-model-overview.png" alt="Network が Tokenizer に誘導し、それが Tree Construction に導きます。Tree Construction は2つの項目へ誘導します。1つ目は Script Execution です。それは、document.write() を経由して Tokenizer に戻します。Tree Construction が誘導する2つ目の項目は DOM です。 DOM は Script Execution に結びつきます。">
 <legend>パースモデルのフローチャート表現</legend>
</figure>

<!-- これは間違ったものです。こうしないでください。代わりに、前述の例のようにしてください。 -->
<p>Network はデータを Tokenizer 段階へ引き渡し、そのデータは Tree Construction 段階へ引き渡されます。ここから、データは、DOM と Script Execution の両方へ行きます。そして、document.write() を使って、Tokenizer へデータを引き渡します。</p>
<p><img src="images/parsing-model-overview.png"
        alt="パースモデルのフローチャート表現"></p>
<!-- 絶対にイメージのキャプションを alt="" 属性に入れないこと！ -->

<p>何十億ものページをカバーした研究によると、2007年では、62% のウェブドキュメントが Quirks レンダリングモードで呼び出され、30% 程度が Almost Standard モードで、9% 程度が Standard モードで呼び出されました。</p>
<p><img src="rendering-mode-pie-chart.png" alt=""></p>

4.8.2.1.6 情報を何も加えない純粋に装飾的なイメージ

一般的に、イメージは、それが特にページ固有とはいえないような装飾的なものなら、例えば、サイト全体のデザインスキームの一部となるようなイメージであれば、そのイメージは、そのサイトの CSS で指定されるべきです。ドキュメントのマークアップで指定するべきではありません。

しかし、前後のテキストで話題にされているわけではないけれども、多少の関連性があるのであれば、装飾的なイメージは、img 要素を使ってページに組み込むことができます。このようなイメージは装飾的ではありますが、それでもなお、コンテンツを形成しています。このようなケースでは、alt 属性は必須ですが、その値は空文字列でなければいけません。

<h1>シャロット姫</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>

4.8.2.1.7 リンクを持たない一つの大きな図柄を形成するイメージグループ

つなぎ合わせて表示することで完成するよう、図柄が小さなイメージファイルに分割されたとき、そのイメージのひとつの alt 属性には、全体の図柄に適切となる関連のある規則をセットしなければいけません。そして、残りのイメージすべての alt 属性には、空文字列をセットしなければいけません。

<h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>

<p>評価: <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.8.2.1.8 リンクを持つひとつの大きな図柄を形成するイメージグループ

一般的には、リンクを使うのであれば、イメージを分割するかわりにイメージマップを使うべきです。

しかし、イメージが実際に分割され、分割された図柄の構成要素に、ただ一つのコンテンツリンクとなるものがあるなら、そのリンクごとに、そのイメージのうち一つのイメージの alt 属性に代替テキストを入れ、そのリンクの目的を表すようにしなければいけません。

<h1>教会</h1>
<p>あなたは空飛ぶスパゲッティ・モンスターに遭遇しました。どちら側のニョロニョロに救い手を差し伸べたいですか？</p>
<p><a href="?go=left" ><img src="fsm-left.png"  alt="左側"></a
  ><img src="fsm-middle.png" alt=""
  ><a href="?go=right"><img src="fsm-right.png" alt="右側"></a></p>

4.8.2.1.9 コンテンツのキーとなる部分

いくつかのケースでは、イメージがコンテンツの重要な部分となることがあります。例えば、フォト・ギャラリーの一部となるページなどが考えられます。そのイメージは、それを含んだページの核心となります。

コンテンツのキーとなるイメージに対して、どのように代替テキストを提供するべきかは、そのイメージの出所によります。

一般的なケース

詳細な代替テキストが提供できるとき、例えば、そのイメージが、雑誌論評における一連のスクリーンショットや、連載マンガや、写真に関するブログエントリにある写真なら、そのイメージの代用として提供することができるテキストが、alt 属性のコンテンツとして提供されなければいけません。

新 OS のスクリーンショットのギャラリーにある一つのスクリーンショットです。いくらかの代替テキストを持ちます：

<figure>
 <img src="KDE%20Light%20desktop.png"
      alt="デスクトップは青色です。左側に沿って、reading System, Home, K-Mail, などのアイコンが2列にわたって並んでいます。一つのウィンドウが開いており、そのメニューは、そのウィンドウにフィットできないなら、2行に改行されます。そのウィンドウの上段には、アイコンのリストがあり、その舌にはアドレスバーがあります。左端に沿って、タブのためのアイコンのリスト、下段にはステータスバー、中には2つのペインがあります。そのデスクトップは、スクリーンの下にバーがあり、その中には、いくつかのボタンがあります。ページャー、起動アプリケーションのリスト、時計です。">
 <legend>KDE デスクトップのスクリーンショット</legend>
</figure>

財務レポートの中にあるグラフです：

<img src="sales.gif"
     title="売上グラフ"
     alt="1998年から2005年にかけて、年々、次の割合で売上増となりました：624%, 75%, 138%, 40%, 35%, 9%, 21%">

"売上グラフ" というのは、売上グラフには不適切な代替テキストだということに注意してください。キャプションにとって良いテキストというのは、置き換えのテキストとしては、一般的には、ふさわしくないでしょう。

完全な説明ができないイメージ

あるケースでは、代替テキストが実用的ではないのに提供されているといった性質を持ったイメージが考えられます。例えば、不明瞭なもの、複雑なフラクタル、繊細な地形マップなどが考えられます。

このようなケースでは、alt 属性には適切な代替テキストを入れなければいけませんが、簡単なもので構いません。

イメージの正確な姿を表すことができるテキストがないことがあります。例えば、ロールシャッハのインクブロットテストを分かりやすく説明できるといえるテキストはまずありません。しかし、説明は、それがたとえ簡潔だったとしても、ないよりあった方がましです：

<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="左右対称の形状で、縁はぼやけています。中心に小さな割れ目があります。中心から少しだけ離れたところに2つの大きい割れ目があります。2つのよく似た割れ目がそれらの下にあります。輪郭は、下半分と比べて上半分で広がっています。中心より上で、両サイドに上の方に高く伸びたところがあります。, and the center extending below the sides.">
 <legend>ロールシャッハのインクブロットテストの10枚のうち最初のカードの黒色の輪郭</legend>
</figure>

次は、代替テキストの利用法としては、非常に悪いものであることに、注意してください：

<!-- これは悪い例です。これをコピーしないでください。 -->
<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="ロールシャッハのインクブロットテストの10枚のうち最初のカードの黒色の輪郭">
 <legend>ロールシャッハのインクブロットテストの10枚のうち最初のカードの黒色の輪郭</legend>
</figure>

このように代替テキストにキャプションを入れると使い勝手が悪くなります。なぜなら、それは、事実上、イメージを見ることができないユーザー向けのキャプションを複製し、彼らを2度も愚弄するのです。もし彼らがすでにそのキャプションを読んだり聞いたりしたなら、 それ以上はもう何も彼らを助けることはないのです。

完全に説明ができないイメージのもう一つの例として、フラクタルがあります。これは、定義上、複雑さ極まりないものです。

次の例は、マンデルブロ集合のイメージの完全な景観に対する代替テキストを提供する、ひとつの可能性を示しています。

<img src="ms1.jpeg" alt="マンデルブロ集合は、正方向に実軸上に尖点を持ったカーディオイドとして現れます。それは、同じ中央線に沿って横に並べられたさらに小さい球を伴います。それは、負方向にそれに接しています。これら2つの形状は、さらに小さいさまざまなサイズの球によって囲まれています。">

どんなコンテンツか分からないイメージ

残念なケースとして、利用可能な代替テキストが全く無いこともあります。イメージが関連の代替テキストなしに自動的に取得された（例：Webcam）、または、そのページは、ユーザー提供の画像を使うスクリプトによって生成されているが、ユーザーが適切または役に立つ代替テキストを提供しなかった（例：写真共有サイト）、または、ウェブ制作者自身でも、その画像が何を表しているのか分からない（例：自身のブログで写真を共有している目の不自由な写真家）、といった理由のいずれかによるものです。

このようなケースでは、alt の値は省略することができますが、次の条件のうち一つに一致しなければいけません：

• title 属性が存在し、空ではない値を持っている。
• img 要素が figure 要素の中にある。ただし、その figure 要素は legend 要素を含み、その legend 要素は要素間ホワイトスペース以外のものを含む。
• img 要素がそのセクションの中の唯一の段落の一部となっている。そして、それは、そのセクションの中で alt 属性を持たない唯一の img 要素で、そのセクションは関連の見出しを持つ。

このようなケースは、必要最小限とするべきです。もし、実際の代替テキストを提供できる可能性がウェブ制作者にかすかにでもあるならば、alt 属性を省略することは、受け入れられないでしょう。

写真共有サイトでの写真で、そのサイトがキャプション以外のメタデータを持たないイメージを受け取った場合：

<figure>
 <img src="1100670787_6a7c664aef.jpg">
 <legend>シャボン玉が私たちの周りの至る所に行き渡っていました。</legend>
</figure>

このようにマークアップすることもできます：

<article>
 <h1>シャボン玉が私たちの周りの至る所に行き渡っていました。</h1>
 <img src="1100670787_6a7c664aef.jpg">
</article>

しかし、それぞれのケースで、イメージの重要な部分の詳細説明がユーザーから取得され、ページに組み込まれるにこしたことはありません。

目の不自由なユーザーのブログで、そのユーザーが撮影した写真が掲載されています。当初、そのユーザーは、自分が撮影した写真が何なのか分からないでしょう：

<article>
 <h1>私は写真を撮りました</h1>
 <p>私は今日外出して、写真を撮りました！</p>
 <figure>
  <img src="photo2.jpeg">
  <legend>やみくもにですが、自宅の正面玄関から撮った写真です。</legend>
 </figure>
</article>

しかし、ゆくゆくは、そのユーザーは、彼の友人から、そのイメージの説明を受けるかもしれません。そうなれば、代替テキストを入れることができるでしょう：

<article>
 <h1>私は写真を撮りました</h1>
 <p>私は今日外出して、写真を撮りました！</p>
 <figure>
  <img src="photo2.jpeg" alt="写真には、自宅の窓の縁から吊り下げられたハチドリの餌箱が写っています。半分しか写っていませんが、周りに鳥はいません。背景は、ピンぼけした木でいっぱいです。餌箱は木製で、金属製の扉があり、ピーナッツがあしらわれています。窓の縁も木製で、白でペイントされており、ライトブルーの縞があります。">
  <legend>やみくもにですが、自宅の正面玄関から撮った写真です。</legend>
 </figure>
</article>

イメージの全体の要点をテキストで説明できないというものが、ときにはありますが、ユーザーは説明を用意するべきです。例えば、CAPTCHA 画像の要点は、ユーザーがグラフィックを文字通りに読むことができるかどうかを見ることです。ここでは、CAPTCHA をマークアップする一つの方法をご覧頂きます（title 属性に注目してください）：

<p><label>この画像には何て書いてありますか？ 
<img src="captcha.cgi?id=8934" title="CAPTCHA">
<input type=text name=captcha></label>
(もしこの画像を見ることができないなら、 <a
href="?audio">audio</a>テストを代わりに使うことができます。)</p>

もうひとつの例として、イメージを表示し、正しい代替テキストを使ってページを生成する目的で、代替テキストを尋ねる、といったソフトウェアが考えられるでしょう。このようなページは、次のように、イメージのテーブルを入れることになるでしょう：

<table>
 <thead>
  <tr> <th> イメージ <th> 説明
 <tbody>
  <tr>
   <td> <img src="2421.png" title="640 x 100 のイメージ、ファイル名は 'banner.gif'">
   <td> <input name="alt2421">
  <tr>
   <td> <img src="2422.png" title="200 x 480 のイメージ、ファイル名は 'ad3.gif'">
   <td> <input name="alt2422">
</table>

この例でも、title 属性に、可能な限り役に立つ情報を入れていることに注目してください。

まったくイメージを使うことができないユーザーもいます（例えば、非常に遅い接続環境だったり、テキスト専用ブラウザーを使っていたり、ハンドフリーの車用音声ウェブブラウザーで読み上げられたページを聞いている、といった理由です）。そのため、前例のように、alt 属性に利用可能な代替テキストがなく、それを利用可能にすることもできないとき、代用のテキストを提供するよりはむしろ、省略してしまうことが許されています。ウェブ制作者側の努力の欠如は、alt 属性の省略の理由として許されません。

4.8.2.1.10 ユーザー向けではないイメージ

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

img 要素がイメージ表示以外の目的、例えば、ページビュー計測サービスの一部として使われているなら、alt 属性は空文字列でなければいけません。

このようなケースでは、width と height 属性にはともに 0 をセットするべきです。

4.8.2.1.11 イメージを見ることができると分かっている特定の人向けの e-mail やプライベートなドキュメント

この節は、公にアクセスできるドキュメントや、対象の読者が必ずしも著者に個人的に知られているわけではないようなドキュメントには、あてはまりません。つまり、ウェブサイトや、パブリックなメーリング・リストへ送信される e-mail や、ソフトウェアの説明書などは、あてはまりません。

イメージを見ることができると分かっている誰かに向けたコミュニケーション（HTML e-mail など）にイメージが、含まれるとき、その alt 属性を省略することができます。しかし、そのようなケースでも、代替テキストを入れることが強く推奨されます（前述のエントリで説明したように、イメージの種類に応じて適切となる代替テキスト）。そうすることで、その e-mail は、ユーザーがイメージをサポートしないメールクライアントを使っている、または、その e-mail が、イメージを簡単に見ることができない可能性がある別のユーザーに転送される、といった場合でも使いものになるのです。

4.8.2.1.12 全般的なガイドライン

代替テキストを書く最も全般的な規則は、次の通りです：すべてのイメージを、その alt 属性のテキストで置き換えても、ページの意味が変わらないようにすること

一般的に、代替テキストは、イメージを含めることができなかったなら何が書かれていただろうと考えることで、書くことができます。

この結果として、alt 属性の値には、イメージのキャプション, タイトル, 説明と見なすことができるようなテキストを決して入れるべきではありません。 イメージに代わって、ユーザーが利用できる代用のテキストを入れることが想定されています。イメージを補足することを意味しているのではありません。title 属性は補足情報に使うことができます。

代替テキストについて考える一つの方法として、誰かに電話越しで、イメージを含んだページを、イメージが存在していることを言わずに伝えるとして、あなたなら、それをどうやって読み上げるだろうと、考えてみるのも良いでしょう。通常は、あなたがイメージの代わりに言うことは何でも、代替テキストを書くに当たって、良いスタートとなります。

※ 原文：http://www.w3.org/TR/2009/WD-html5-20090825/text-level-semantics.html#the-img-element