2. 概論代替テキスト
代替テキスト は、視覚情報をアクセシブルにするための第一の方法である。これによりユーザーのニーズに合うように、任意の感覚様式（たとえば、視覚、聴覚や触覚）を介してレンダリングできるのである。代替テキストを提供する情報は、様々なユーザーエージェントの様々な方法でレンダリングすることができる。たとえば、画像を見ることができない人は、代替テキストが合成音声を使用して音声で読み上げることができる。
適切な代替テキスト を判断するには、画像が文書に含まれている理由を考えることが重要である。その目的は何か？このように考えることは、ページの意図する読者に対する画像に関して何が重要かを理解するのに役立つ。すべての画像は、有用な情報を提供する、機能を実行する、美意識を高めるといったページ上に存在する理由を持つ。したがって、画像が何のために存在するのかを理解することは、適切な代替テキスト の記述を容易にする。
ユーザーが画像の代替テキストの恩恵を受けるシナリオの例
非常に低速な接続であり、画像を無効化して表示している。
視覚障害を持ち、音声ソフトウェアでテキストを扱う。
認知障害を持ち、音声ソフトウェアでテキストを扱う。
テキストのみのブラウザを使用する。
音声ブラウザによって読み出されているページを聞いている。
ダウンロードのコストを節約するために画像を無効化する。
画像を読み込む問題や画像のソースの誤りがある。
一般的な代替テキストのグッドプラクティス
画像と同じ情報コンテンツ を提供する。
画像がグラフィカルなリンクのような特定の機能を果たす場合、その機能性 に関する情報を提供する。
等価な値を伝達する一方、できるだけ簡潔にする。目的について記述する、または概観を提示するテキストは、多くの場合短いもので十分だろう。
コンテキストに応じて適切な代替テキストを記述する。異なる状況で同じ画像は、大きく異なる代替テキストが必要な場合がある。
冗長な代替テキストを避ける。この例は、alt属性において、文書内の同じテキストを繰り返すだけでなく、不要である。
3. 必要条件と推奨事項:alt
ハイパーリンク、またはbutton a 要素が、テキスト内容がないものの1つ以上の画像を含む場合、alt属性はリンクやボタンの目的を併せて伝えるテキストを含まなければならない 。
例1.1
この例では、ユーザーは、3つのリストから好みの色を選択するよう求められている。画像によってそれぞれの色は与えられるが、画像を表示できないユーザーのために、画像のalt属性の中に色の名前は含まれている。
レンダリング例:
コード例:
<ul>
<li><a href="red.html"><img src="red.jpeg" alt="赤" ></a></li>
<li><a href="green.html"><img src="green.jpeg" alt="緑" ></a></li>
<li><a href="blue.html"><img src="blue.jpeg" alt="青" ></a></li>
</ul>
例1.2
この例では、a要素のリンクはロゴを含む。リンクはW3Cのウェブサイトを指す。代替テキストはリンク先の簡単な説明である。
レンダリング例:
コード例:
<a href="http://w3.org">alt="W3Cウェブサイト" >
例1.3
この例では、a要素のリンクがプレビューアイコンを含む。リンクは印刷用スタイルシートを適用するページを指す。代替テキストはリンク先の簡単な説明である。
レンダリング例:
コード例:
<a href="preview.html">alt="印刷ページのプレビュー" >
関連技術とリソース
3.2 グラフィカルな表現: チャート、図、グラフ、マップ、イラスト完全な代替テキストをalt属性で提供してもよく 、または代替テキストをalt属性でまたはプログラムで関連付けられた要素で短い提供してもよく 、および同じ文書でまたはリンクされた文書でプログラムで関連付けられた長い代替テキストを提供してもよい。
alt属性で提供される代替テキストが、画像の代替 であることを理解しておくことが重要である。その一方で、alt属性の短い代替テキストが、画像がリンクの唯一のコンテンツである場合、プログラムで関連付けられた長い代替テキストを伴って、画像の説明やリンクになることができる。
以下のすべての例は使用の検討が可能であるが、各方法は長所と短所を持つ（4. 章の代替テキストを提供するための方法 を参照）。
例2.1
次の例では、alt属性のテキストを伴うフローチャート の画像を持ち、フローチャートに示す処理について説明する:
画像例:
コード例:
<p>機能しないランプを扱うプロセスを表すフローチャート:</p>
<p><img src="flowchart.gif" alt="ランプが機能しない場合、ランプが差し込まれているかどうかを確認する。差し込まれていない場合、ランプを差し込むランプを電源に接続しても動作しない場合、電球が焼き切れているかどうかを確認する。焼き切れている場合、電球を交換する。それでもまだ動作しない場合、新しいランプを購入する。" ></p>
例2.2
同じフローチャート 画像の別の例は、alt属性に含まれる簡潔な代替テキストを表示することで、この場合では代替テキストは、画像がリンクの唯一のコンテンツとしてリンク先の説明となる。リンクは、フローチャートで表されるプロセスの、同じ文書内での説明を指す。タイトルに目の見えるマウスユーザーに対するリンクを含んでいることに注意する。タイトルはリンクターゲットに関する情報を提供する。
コード例:
<p><a href="#d1" title="フローチャートの説明"> <img src="flowchart.gif" alt="壊れたランプのフローチャートの説明。" ></a> </p>
...
...
<div id="d1" >
<h2>壊れたランプのフローチャートの説明</h2>
<p>ランプが機能しない場合、差し込まれているかどうかを確認する差し込まれていない場合、ランプを差し込むランプを電源に接続しても動作しない場合、電球が焼き切れているかどうかを確認する。焼き切れている場合、電球を交換する。それでもまだ動作しない場合、新しいランプを購入する。</p>
</div>
例2.3
同じフローチャート 画像の別の例は、alt属性とテキストの長い代替テキストに含まれる簡潔な代替テキストを示し、画像とその説明の間にプログラムが解釈可能な 関係を提供するために含まれているfigure要素に使用される:
コード例:
<figure role="group" >
<p><img src="flowchart.gif" alt="機能しないランプを扱うプロセスを表すフローチャートである。"
例2.4
同じフローチャート 画像の別の例では、alt属性とテキストの長い代替テキストに含まれる簡潔な代替テキストを示し、figure要素を含むプログラムに関連付けられる。
注: 長い代替テキストは、順序付けられたリストを使用して構成される。
コンテキストの画像例:
ランプが動作しない場合:
ランプがプラグに差し込まれているかどうかを確認し、差し込まれていない場合は差し込む。
それでもまだ動作しない場合、電球が焼き切れているかどうかを確認する。焼き切れている場合、電球を交換する。
それでも動作しない場合、新しいランプを購入する。
コード例:
<figure role="group">
<img src="flowchart.gif" alt="機能しないランプを扱うプロセスを表すフローチャート。" >
<strong>ランプが機能しない場合:</strong><ol> <li> ランプがプラグに差し込まれているかどうかを確認し、差し込まれていない場合は差し込む。</li> <li> それでもまだ動作しない場合、電球が焼き切れているかどうかを確認する。</li> <li> Iれでも動作しない場合、新しいランプを購入する。</li> </ol>
</figure>
例2.5
この例では、グラフの画像があり、それは情報がデータセットとして事実伝達の代替テキストとして、グラフに示されている情報を提供することは不適切であろう。代わりに構造化された代替テキストを提供すべきである 。この場合、グラフ画像で表現されるデータを使用するデータテーブルの形式を使っている。グラフで簡単に識別される傾向をデータテーブルでも使用できるように、季節ごとに最高と最低の降雨量が表に含まれていることに注意する。
コンテキストの画像例:
国や季節ごとの平均降雨量（ミリメートル）。
UK
Japan
Australia
Spring
5.5（最高）
2.4
2（最低）
Summer
4.5（最高）
3.4
2（最低）
Autumn
3.5（最高）
1.8
1.5（最低）
Winter
1.5（最高）
1.2
1（最低）
コード例:
<p><img src="rainchart.gif" alt="国と季節ごとの降雨量（ミリメートル）を示す棒グラフ。"
関連技術とリソース
3.3 テキストの画像時には、画像はテキストのみを含み、そして画像の目的が、視覚効果とフォントの両方またはいずれか一方を用いるテキストを表示することにある。CSSを用いてのスタイル付けテキストの使用を強く 推奨するが、 それが不可能な場合、これらのケースのほとんどで、alt属性の内容は、画像自身で書かれるような、同じテキストで構成すべきである 。
例3.1
この例は、テキストの画像を"Get Happy!"と表示する。派手な色とりどりのフリーハンドスタイルで書かれている。画像は見出しの内容を構成する。この例では、画像の代替テキストは"Get Happy!"とすべきである。
画像例:
コード例:
<h1><img src="gethappy.gif" alt="Get Happy!" ></h1>
例3.2
この例では、テキストからなる広告画像であり、フレーズ"The BIG sale"が3回繰り返され、回を重ねるごとにテキストはより小さくかつより暗くなり、最後の行は "...ends Friday"と読む。この場合、画像の代替テキストは一度だけテキスト"The BIG sale"を含むことが推奨される。視覚効果とテキストの繰り返しは、画像が表示できないユーザーにとって不要であり、混乱を招く可能性がある。
画像例:
コード例:
<p><img src="sale.gif" alt="The BIG sale ...ends Friday." ></p>
長所:
短所:
テキストが画像で表現される場合、テキストは、ユーザーのニーズに合わせて変えることができない。
関連技術とリソース
テキストの画像よりもテキストを使用を推奨するWCAG 2.0による画像化された文字 の説明。
3.4 テキストを含む画像時には、画像はグラフおよび関連するテキストのようなグラフィックスを構成する。この場合、代替テキストに画像内のテキストを含めることを推奨する。
例4.1
円グラフと関連するテキストを含む画像を考えてみる。テキストの画像でなく、任意の関連するテキストを可能な限りテキストとして提供することを推奨する。これが不可能な場合は代替テキスト内のテキストが含まれる。
画像例:
コード例:
<p><img src="figure1.gif" alt="図1。雑誌カテゴリ別の記事の配布。円グラフ: Language=68%, Education=14% and Science=18%." ></p>
例4.2
同じ円グラフ の画像の別の例では、alt属性とテキストの長い代替テキストに含まれる簡潔な代替テキストを表示する。プログラムが解釈可能な 関係を提供するために、figure要素に使用可能なセマンティクスを追加するために使用される。
コード例:
<figure role="group" >
<img src="figure1.gif" alt="図1"
注:
上記の例4.2では、テキストラベルのコンテナに使用されるalt属性は画像を識別し、画像と画像を説明するテキストの間の暗黙の関連付けを提供する。その使用は、WCAG2.0[WCAG20 ]に準拠するが、HTML5 [HTML5]の故意の違反となる。
3.5 情報を追加しない、純粋に装飾的な画像純粋に装飾的な 画像は視覚的な機能強化や装飾、画像を表示できるユーザーへの美意識を超えた機能や情報を提供しない装飾である。これらは、それ自身に意味を持たず、ページのコンテンツ を提供しない。
空のalt属性（alt=""）または好ましいCSSの技法を使用することで、支援技術 によって無視されることができるので、純粋に装飾的な画像はマークアップされなければならない 。画像がユーザーに有益なコンテンツ を提供しない、またはコンテンツ の一層の理解を高めない場合、alt属性は空でなければならない 。
例5.1
ある人のブログの装飾バナーとして使用される画像の例だと、画像は何も情報を提供しないので、空のalt属性を持つべきである。装飾的な画像をインラインで含むことが受け入れられないことはないが、CSSを使用した画像を含むために純粋に装飾的であることが推奨される。
コンテキストの画像例:
クララのブログ
私のブログへようこそ...
コード例:
<p><img src="border.gif" alt="" width="400" height="30"></p>
<h1
関連技術とリソース
3.6 テーマを向上させる画像やページ内容の主題周囲のテキストで直接議論されないが、依然として一部の関連性を持つ画像はimg要素を使用して、ページに含めることが可能である。このような画像は単なる装飾以上のものであり、テーマやページ内容の主題を補強するので、内容の一部を相変わらず形成することがある。この場合、alt属性が存在しなければならない が、その値は空であってよい 。画像が密接にページ内容の主題に関連している場合で、リンクの内容である場合には、代替テキストは画像の内容の説明やリンク先のページのターゲットの記述を含めなければならない 。
例6.1
これはページ内容の主題に密接に関連するが、直接説明されない画像の一例である。その詩の暗唱ページで、詩に触発された絵の画像である。次の断片は例を示す。画像は、 "シャロットの貴婦人"と題した絵画であり、絵は詩に触発され、絵の主題は、詩から派生している。したがって、代替テキストが提供されることを強く推奨する。alt属性に画像の内容の短い説明があり、文の下に長い説明へのリンクがある。長い説明の最後に絵についての詳しい情報へのリンク もある。
画像例:
コード例:
<header><h1>シャロットの貴婦人</h1>
<h2>アルフレッド・テニスンの詩</h2></header>
<img src="shalott.jpeg" alt="長い髪をもつ若い女の絵で、木のボートに座っている" >
<p><a href="#des">絵の説明</a>。</p>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->
...
...
...
<p id="des">絵の女性は流れるような白いドレスを着ている。複雑にパターンの編み物の大部分は、側面に掛けられている。彼女の右手で、船を係留チェーンを掴んでいる。彼女の表情は悲しげである。彼女の前に置かれた十字架に、視線を向けている。その横に3つのろうそくがある。2つは消えている。
<a href="http://bit.ly/5HJvVZ">絵についての詳細</a>。 </p>
例6.2
画像の有用な代替テキストを記述することは必ずしも容易ではない。別のオプションは、画像についての詳しい情報へのリンクを提供することである。
同じ画像のこの例では、alt属性に含まれる簡潔な代替テキストがあり、画像の後にリンクがある。リンクは絵についての情報 を含むページを指す。
コンテキストの画像例:
シャロットの貴婦人 アルフレッド・テニソン卿による詩。
この絵について。
アルフレッド・テニスン卿の詩の完全朗読。
コード例:
<header><h1>シャロットの貴婦人</h1>
<p>アルフレッド・テニソン卿の詩</p></header>
alt="小さなボートに座る、白い流れるようなドレスの女性の絵。" >
<p><a href="http://bit.ly/5HJvVZ">この絵について。 </a></p>
例6.3
同様に、絵画に関する情報の外部ソースを指すリンクを含むため、この例は、前の例と似ている。違いは、画像とテキストの両方がリンクの内容として含まれていることである。
注: HTML5では、p要素のようにリンクが'ブロックレベル'要素を含むことができる 点でHTML4と異なっている。以下の例では、この変更を利用している。
コンテキストの画像例:
シャロットの貴婦人 アルフレッド・テニソン卿による詩。
アルフレッド・テニスン卿の詩の完全朗読。
コード例:
<header><h1>シャロットの貴婦人</h1>
<p>アルフレッド・テニソン卿による詩</p></header>
<figure>alt="小さなボートに座る、白い流れるようなドレスの女性の絵。" >
<p>この絵について。 </p></a>
例6.4
これは異なる文脈で使用されるのと同じ画像の別の例である。この場合、広告に中世をテーマにしたわずかな装飾を追加するために使用される。画像はページ内容への直接関係を負わないので、空のalt属性を使用するのが適切と見なされる。画像を表示できない一部のユーザーが画像が使用される文脈にかかわらず、画や写真の画像に関して提供される情報を持ち、また、画像の簡単な説明を提供することが適切と考えることができる。代替テキストを提供する場合についての決定は、使用状態の文脈に基づいているので、両方のオプションが準拠していると考えられるが、簡潔な代替テキストを提供することを推奨する。
コンテキストの画像例A:
中世の夜
キングストンの川岸で、ボーターバーで金曜日に私たちの中世の夜に参加ください。
例Aのコード:
<h1>中世の夜</h1>
<p><img src="shalott.jpeg" alt="" ></p>
<p>キングストンの川岸で、ボーターバーで金曜日に私たちの中世の夜に参加ください。</p>
コンテキストの画像例B:
中世の夜
キングストンの川岸で、ボーターバーで金曜日に私たちの中世の夜に参加ください。
例Bのコード:
<h1>中世の夜</h1>
<p><img src="shalott.jpeg" alt="小さなボートに座る、白い流れるようなドレスの女性の絵。" ></p>
<p>ボーターバーにて毎週金曜日晩に私たちの中世のテーマに参加ください。
テムズ川でのキングストンの川辺にて。</p>
注:
上記6.1節の多くは、コンテキスト内で'純粋に装飾的'と考えられる画像の代替テキストを含む。'純粋に装飾的'としての状態が自信を持って識別されず、代替テキストを利用する一部のユーザーは、提供された代替テキストを持ちたいという願望を表明している（Survey of Preferences of Screen Readers Users - Images とNow You See It, Now You Don't を参照のこと）。WCAG 2.0 [WCAG20 ]とHTML5 [HTML5]に準拠したこのコンテキストで使用する。準拠としての指定はHTML Living Standard [HTMLLS]の故意の違反となる。
関連技術とリソース
3.7 ユーザーを意図しない画像一般に、著者は、画像を表示する以外の目的でimg要素を使用することは避けるべきである。
img要素を画像を表示する以外の目的で使用する場合、たとえば、ページビューをカウントするサービスの一部として用いる場合、空のalt属性を含めなければならない 。このような場合、widthとheight属性は、両方ともゼロに設定すべきである。
例7.1
Webページの統計情報を収集するために使用されるimg要素の例を示す。alt属性は空である。
コード例:
<p><img src="http://server3.web-stat.com/count.pl?octafish.com"
width="0" height="0" alt="" ></p>
関連技術とリソース
3.8 アイコンアイコンは通常、プログラム、アクション、データファイルや概念を表す単純な絵である。アイコンは、視覚ブラウザのユーザーに一目で機能を認識するのを助けることを意図する。
ある場合、アイコンは同じ意味を伝えるテキストラベルを補足する。この場合、空のalt属性が提供されなければならない 。
他の場合、アイコンはテキストで伝達される必要があるテキストの内容に重点を追加する。このような場合、代替テキストが提供されなければならない 。
例8.1
この例では、サイトのホームページを指すリンクは、家のアイコン画像とテキスト"自宅"を含む。画像は、空のaltテキストを持つ。画像がこの方法で使用される場合、CSSを使用して画像を追加することが適切でもある。
コンテキストの画像例:
コード例1 - インライン画像:
<a href="home.html">
<img src="icon.gif" width="15" height="15" alt="" >ホーム</a>
コード例2 - CSS画像:
#home:before
{
content: url(home.png);
}
<a href="home.html" id="home">ホーム</a>
例8.2
この例では、警告アイコンを伴なう警告メッセージを表示している。アイコンは、メッセージの重要性を強調し、特定の内容型として識別する。画像がこの方法で使用される場合、CSSを使用して画像を追加することは適切でない。
コンテキストの画像例:
セッションの期限切れです。
コード例:
<p><strong><img src="warning.gif" width="15" height="15" alt="警告！" >
セッションの期限切れです。</strong></p>
例8.3
この例では、警告アイコンを伴なう警告メッセージを表示している。単語"警告！"はアイコンの次の強調テキストである。この場合、アイコンが冗長であるため、img要素は空のalt属性を持たなければならない 。また、CSSを使ってアイコンを追加することが適切だろう。
コンテキストの画像例:
警告！ セッションの期限切れです。
コード例:
<p><img src="warning.gif" width="15" height="15" alt="" >
<strong>警告！</strong>
セッションの期限切れです。</p>
3.9 写真の画像写真やグラフィックス画像は、視覚オブジェクトの表現、人、風景、抽象化などが含まれる。この非テキストコンテンツ は視覚的に大量の情報を伝えるか、晴眼者に特定の感覚的な体験 を提供できる。例としては、写真、絵画、図面やアートワークが含まれる。
画像に対する適切な代替テキストは簡単な説明、または識別名 である。すべての代替テキストのオーサリングの決定のように、画像に対して適切な代替テキストを書くことは人間の判断を必要とする。テキスト値は、画像が使用されるコンテキストとページ作者の文体の主観的なものである。したがって、特定の画像に対するaltテキストの'正しい'ものはない。非テキストコンテンツ の簡単な説明を与える簡潔な代替テキスト を提供に加えて、適切な有用である場合にも別のものを介して補足的コンテンツ の提供を意味する。
例9.1
この例は、写真共有サイトにアップロードした画像を示す。写真は風呂に座っている猫である。画像は、img要素のalt 属性を用いて提供される代替テキストを持つ。また、figure要素およびキャプションテキストを識別するためのfigcaption要素を使用したものでimg要素を含むことで、キャプションを提供する。一般的に推奨されないが、コード例2の代替テキストは画像の種類に関する情報"写真"を含み、著者がalt属性内容でそのような情報を含むことができる。
コンテキストの画像例:
ローラは、シャワーよりお風呂を好む。
コード例1:
<figure role="group">
<img src="1100670787_6a7c664aef.jpg" alt="Lolaという猫がバスタブの中で傘の下に座っている。" >
<figcaption>ローラは、シャワーよりお風呂を好む。</figcaption>
</figure>
コード例2:
<figure role="group">
<img src="1100670787_6a7c664aef.jpg" alt="Lolaという猫がバスタブの中で傘の下に座っている写真。" >
<figcaption>ローラは、シャワーよりお風呂を好む。</figcaption>
</figure>
例9.2
コンテキスト：一般的な用語ロールシャッハ・インクブロット性格テストを説明するページ上の画像。画像は、個々の解釈に主観的である抽象的な自由形式である。
コンテキスト内の画像の例：
個々の人格を評価するための"あいまいなデザイン"の解釈を用いることは、レオナルド・ダ・ヴィンチやボッティチェリにさかのぼるアイデアである。インクブロットの解釈は、19世紀後半から遊びの中心であった。しかし、ロールシャッハのものは、この種の最初の体系的なアプローチであった。
ロールシャッハテストにおける10枚のカードの最初のもの。
コード例:
<figure role="group">
<img src="Rorschach1.jpg" alt="抽象的な、自由形式のインクの染み。" >
<figcaption>ロールシャッハテストにおける10枚のカードの最初のもの。</figcaption>
</figure>
関連技術とリソース
3.10 ウェブカメラ画像ウェブカメラの画像は、自動で定期的に更新される静的な画像である。一般に画像は固定された場所からのものであり、それぞれ新しい画像がカメラからアップロードされるか、またはユーザーが更新された画像を表示ためにページを再読込する必要があるので、画像は自動的にページ上で更新してもよい。例としては、交通および天気カメラなどがある。
例10.1
この例はかなり典型的である。タイトルとタイムスタンプは画像に含まれ、自動的にウェブカメラのソフトウェアによって生成される。テキスト情報が画像に含まれていなかった場合、より良かっただろうが、テキスト情報は画像の一部であるように、画像は、テキスト情報が代替テキストとして提供されている必要がある。キャプションはまた、figureおよびfigcaption要素を使って供給される。画像はソッピース家近くの現在の天気の視覚情報を伝えるために提供されるが、ウェブカメラの画像が自動的に生成されアップロードされるので、地元の天気予報が提供されるリンクが、代替テキストとしての情報を提供することは実用的でないだろう。
alt属性のテキストは、音声ソフトウェアへのテキストによって知らせる場合にテキストをよりわかりやすくするために設計された、タイムスタンプの単調なバージョンを含む。気象条件と日時が変化するにもかかわらず、代替テキストはまた、変化しない画像で見られることの一部の側面の記述を含む。
注:
プログラムが解釈可能な 関係をも提供するfigure要素に使用可能なセマンティクスを追加するために使用される。代替テキストでのタイムスタンプ情報は、画像が更新されるたびに更新する必要があるだろう。これは、サーバーまたはクライアント側でスクリプトを使用して容易に達成することできる。
コンテキスト：ソッピース家の上からの視点で、毎時間ごとに更新される、北向きのウェブカメラの画像。
コンテキスト内の画像の例：
ノースキングストンへ向かう、ソッピース家の上からの眺め。
この画像は1時間ごとに更新されます。
テムズ川のキングストンの最新天気の詳細 を参照。
コード例:
<figure role="group" >
<img src="webcam1.jpg" alt="ソッピース家の気象カメラ。2010-04-21 11:51:34に撮影。前面に屋根の平らな部分の上に安全レールがある。近くに低層の工業用建物があり、向こうに平らなブロックがある。遠くに教会の尖塔がある。" >
<figcaption>ノースキングストンへ向かう、ソッピース家の上からの眺め。
例10.2
この例では、代替テキストの記述部分は、alt属性に含まれていない以外は実施例10.1と同じですが、それは、画像とfigureの間にプログラムが解釈可能な 関係を提供するために、図要素に使用して、イメージに関連付けられた段落になります。
"ノースキングストンへ向かう、ソッピース家の上からの眺め。前面に屋根の平らな部分の上に安全レールがある。近くに低層の工業用建物があり、向こうに平らなブロックがある。遠くに教会の尖塔がある。"
コンテキスト：ウェブカメラの画像は1時間ごとに更新され、ソッピース家の上からの視点で北向きである。
コンテキスト内の画像の例：
ノースキングストンへ向かう、ソッピース家の上からの眺め。前面に屋根の平らな部分の上に安全レールがある。近くに低層の工業用建物があり、向こうに平らなブロックがある。遠くに教会の尖塔がある。
この画像は1時間ごとに更新されます。
テムズ川のキングストンの最新天気の詳細 を参照。
コード例:
<figure role="group" >
<img src="webcam1.jpg" alt="ソッピース家の気象カメラ。2010-04-21 11:51:34に撮影。"
例10.3
前のカメラの例では、正しい時刻に依存し、日付と時刻の情報はイメージが更新されるたびに、スクリプトを介して挿入されている。これが不可能な場合は、代替テキストの代わりに画像が更新されるたびに変更されたテキスト情報の簡単な説明を含める必要がある。2つのバージョンは、1番目がalt属性の内容の一部として説明を含み、2番目が画像の下に長い代替テキストの一部として説明を含むものとして提供される。どちらの例も、画像とキャプションの間にプログラムが解釈可能な 関係を提供するためにfigure要素を使用する。
コンテキスト：ウェブカメラの画像は1時間ごとに更新され、ソッピース家の上からの視点で北向きである。
コンテキスト内の画像の例：
ノースキングストンへ向かう、ソッピース家の上からの眺め。前面に屋根の平らな部分の上に安全レールがある。近くに低層の工業用建物があり、向こうに平らなブロックがある。遠くに教会の尖塔がある。この画像は1時間ごとに更新されます。
テムズ川のキングストンの最新天気の詳細 を参照。
コード例1:
<figure role="group">
<img src="webcam1.jpg" alt="ソッピース家の気象カメラ。画像が撮影されたかを示す日付と時刻の情報が含まれています。"
コード例2:
<figure role="group">
<img src="webcam1.jpg" alt="ソッピース家の気象カメラ。" >
<figcaption id="s1">ノースキングストンへ向かう、ソッピース家の上からの眺め。
関連技術とリソース
3.11 単一の大きな画像を形成する画像のグループ画像が小さな画像ファイルに分割されている場合、再度完全な画像を形成するために共に表示され、画像の1つは、全体としての絵に適するだろう関連規則に従って設定されたalt属性を持たなければならず 、残りのすべての画像は、空のalt属性を持たなければならない 。
例11.1
この例において、PIP社 の会社のロゴを表す絵が2枚に分割されており、1枚目は文字"PIP"を含み、2枚目は単語"CO"をもつ。代替テキスト（ "PIPCO"）は、最初の画像ですべてである。
画像例:
コード例:
<h1><img src="pip.gif" alt="PIP CO" ><img src="co.gif" alt="" ></h1>
例11.2
この例において、PIP社 の会社のロゴを表す絵が2枚に分割されており、1枚目は単語"PIP"を含み、2枚目は短縮語"CO"をもつ。画像は、PIPCOのホームページへのリンクの唯一のコンテンツである。この場合、代替テキストはリンク先の説明でなければならない 。代替テキスト（ "PIP CO ホーム"）は、最初の画像ですべてである。
画像例:
コード例:
<h1><a href="pipco-home.html">
<img src="pip.gif" alt="PIP CO ホーム" ><img src="co.gif" alt="" ></a></h1>
例11.3
この例において、ボタンは、ユーザーが望む色の出力の種類を示すために、画像のセットを持つ。最初の画像は、代替テキストを提供するために使用される。
レンダリング例:
コード例:
<abbr title="red, green and blue."><button name="rgb">
<img src="red.jpg" alt="RGB" ><img src="green.jpg" alt="" ><img src="blue.jpg" alt="" ></button>
</abbr>
各画像はテキストの一部を表すため、このようにも書くことができる：
<abbr title="red, green and blue.">
<button name="rgb"><img src="red.jpg" alt="R" ><img src="green.jpg" alt="G" >
<img src="blue.jpg" alt="B" ></button></abbr>
しかし、画像は単一のボタンの視覚的表現を形成し、ユーザーは通常個々の画像と相互に作用しないため、画像のいずれかに代替テキストを追加することが最も適切である。
3.12 公開時に代替テキストが不明な場合一部のケースでは、画像が公開された文書に含まれるが、著者が適切な代替テキストを提供することができないかもしれない。そのような場合、最小の適合性要件は、画像にキャプションを提供することである。キャプションはfigcaption要素とalt属性を使用して提供されなければならない 。 alt属性は代替テキストのコンテナとして設計されている一方、figcaption要素はキャプションテキストのコンテナとして設計されているので、figcaptionの使用は、alt属性の使用の上で推奨される。実際にはalt属性があり、figcaption要素がうまくブラウザや支援技術でサポートされるような場合まで、画像に関する情報を提供するためのより一般的な方法を提供していく。
例12.1
例Aでは、ある人物が写真共有サイトに写真をアップロードし、キャプションが画像ファイル名を提供しつつ、alt属性の内容が画像"写真 1"を識別する。altまたはキャプションのどちらも、画像の適切な代替テキストを提供しないが、画像が識別され、暗黙的に用語"写真1"を介してキャプションに関連付けられている。例Bでは、キャプションは、代替テキストとして提供もできるキャプションを提供するように更新されている。どちらの例も、画像とキャプションの間にプログラムが解釈可能な 関係を提供するためにfigure要素を使用する。
コンテキストの画像例:
例A:
例Aのキャプションテキストは適切な代替テキストでなく、Webアクセシビリティガイドライン2.0に準拠していない。[WCAG20
写真 > Clara
clara.jpg、2010-11-12に撮影（写真1）。
コード例:
<figure role="group">
<img src="clara.jpg" alt="写真1" >
<figcaption>clara.jpg、2010-11-12に撮影（写真1）。 </figcaption>
例B:
写真 > Clara
寝室でのクララは、'電気の'おもちゃのギターを弾いている。本物の'ロックンロール'の女の子のように見える（写真1）。
コード例:
<figure role="group">
<img src="clara.jpg" alt="写真1" >
<figcaption> 寝室でのクララは、'電気の'おもちゃのギターを弾いている。本物の'ロックンロール'の女の子のように見える（写真1）。 </figcaption>
注:
上記のAとBの例で、alt 属性は、画像を識別するテキストラベル用のコンテナとして使用され、画像と画像を説明するテキストの間の暗黙の関連付けを提供する。figureとfigcaption要素のセマンティクスがブラウザや支援技術で実装されるまで、このコンテキストでのalt属性の使用はつなぎの技術として推奨される。その使用は、WCAG 2.0に準拠する。 [WCAG20 ]その使用は、HTML5 の故意の違反である[HTML5]。
3.13 CAPTCHA画像 CAPTCHA （キャプチャ）は、"Completely Automated Public Turing test to tell Computers and Humans Apart"（コンピュータと人間を区別する完全に自動化された公開チューリングテスト）の略である。CAPTCHA 画像は、コンテンツ がコンピュータではなく人間によってアクセスされていることを確認する、セキュリティ目的のために使用される。この認証は、画像の視覚的な検証を介して行われる。CAPTCHAは一般的に、文字や単語をもつ画像を提示し、ユーザーがそれを入力する。画像は通常、歪められており、文字を読解困難にするために適用されるノイズを持つ。
非テキストコンテンツ の目的を識別して説明する代替テキスト を提供し、知覚のさまざまな種類の出力モードを使用するCAPTCHAの代替形式を提供する。たとえば、視覚的な画像とともに音声代替手段を提供する。視覚的な画像のすぐ隣に音声のオプションを設置する。これは役立つが、それでもサウンドカードのない人、視聴覚障害者、一部の低聴力の人に対して問題である。もう一つの方法は、視覚的な画像とともに質問フォームを含めることである。これは役立つが、認知障害を持つ人々に対して問題となるかもしれない。
CAPTCHAのすべての形態は、障害をもつユーザーに対する入力への容認できない障壁を導入するため、CAPTCHAの代替品を使用することを強く推奨する。更なる情報は、W3CのInaccessibility of CAPTCHA で利用可能である。
例13.1
この例では、文字の歪んだ画像を使用するCAPTCHAのテスト を示す。alt属性での代替テキストは、画像コンテンツにアクセスできない場合にユーザーに対する手順を説明する。
画像例:
コード例:
<img src="captcha.png" alt="この画像を表示できない場合、音声の挑戦が続く。" >
<!-- 音声CAPTCHA オプションは、ユーザーに単語を聞いて入力することを許可する -->
<!-- 質問をする形式 -->
詳細な技術
3.14 ロゴ、 記号、旗、またはエンブレム多くのページは、会社、組織、プロジェクト、バンド、ソフトウェアパッケージ、国、またはその他団体を表すロゴ、 記号、旗、またはエンブレムを含む。
ロゴがリンクの唯一のコンテンツである場合、alt 属性はリンク先の簡単な説明を含まなければならない 。
例14.1
例:
コード例:
<a href="http://dev.w3.org/html5/spec/spec.html">
<img src="HTML5_Logo.png" alt="HTML5仕様" ></a>
例14.2
たとえばページの見出しのように、ロゴが団体を表すために使用されている場合、alt 属性はロゴによって表されるその団体の名前を含まなければならない 。 alt 属性は、伝えられているロゴであるという事実はないので、単語"ロゴ"のようなテキストを含むべきではない 。団体そのものである。
例:
コード例:
<abbr title="World Wide Web Consortium">
<img src="images/w3c_home.png" alt="W3C" >
</abbr>
例14.3
ロゴが表すものの名前の横にロゴが使用される場合、そのロゴは補足であり、そのalt 属性は空でなければならない 。
例:
コード例:
<p><img src="images/w3c_home.png" alt="" >
W3C (World Wide Web Consortium)</p>
例14.4
ロゴが表す題または団体を説明するテキストと同時にロゴが使用される場合、
ロゴは代替テキストを持つべきであり、ロゴとしての識別は、代替テキストに含まれるかもしれない。
例:
excerpt from Wikipedia
HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).
コード例:
<p><img src="HTML5_Logo.png"
alt="HTML5のロゴ：盾のように見える。上部にテキスト"HTML"と盾の表面に目立つ数字'5'とある。" ></p>
<p>excerpt from Wikipedia...</p>
3.15 インライン画像画像が文書内のテキストの流れの一部としてインラインで使用される場合、代替テキストは、画像が含まれている文のコンテキストで意味をなす単語またはフレーズでなければならない 。
画像例:
I
コード例:
I <img src="heart.png" alt="love" > you.
画像例:
My
コード例:
My <img src="heart.png" alt="heart" > breaks.
4. 代替テキストを提供するための方法HTMLネイティヴな方法
4.1 img要素のalt属性画像へ代替テキストを提供するための主な方法は、img要素のalt属性のテキストを含むことである。ユーザーが画像表示を無効にしているまたは画像ソース情報が正しくないため、グラフィカルブラウザにおいて、alt属性の内容は、一般に、画像が表示されない画像の存在の指標（枠領域および/または画像のアイコン）と一緒に表示される。通常、スクリーンリーダーなどの支援技術は、alt属性の内容に続いて、画像の存在を知らせるだろう。テキストベースのブラウザは、括弧で囲んでalt属性の内容を、または異なる色付きのテキストで、または画像へのリンク内容として、または画像の表示なしのテキストとして、または画像の表示をもつプレフィックス付きで表示してもよい。
例:
<img src="example.jpg" alt="代替テキスト。" >
長所:
ほとんどのグラフィカルおよび非グラフィカルなWebブラウザおよび支援技術の堅牢なサポート。
代替テキストは明示的に画像に関連付けられる。
alt属性の内容として代替テキストを含めることは、コンテンツのデフォルトの視覚表示に影響しない。
短所:
alt属性の内容は、役立つかもしれない一部のユーザーは利用できない。
alt属性の内容が長すぎる場合、一部のブラウザでの表示の問題を引き起こすかもしれない。
alt属性の内容が長すぎる場合、一部の支援技術で読み上げの問題を起こすかもしれない。
セマンティック構造は、alt属性の内容を追加することはできない。
4.1.1 alt属性の内容は、画像の代替か？この質問に対する答えは、画像と画像が使用されている文脈の内容に依存する：
画像が、alt属性の内容が画像に対してラベルにすることができる代替テキストのコンテナとして、alt属性を使用するためにあまりにも多くの情報を含む場合。このラベルは、画像を識別する簡単な説明であってもよい 。これは、プログラムで画像に関連付けられる、より完全な代替テキストを添付すべきである 。例2.3 を参照のこと。
画像が、alt属性の内容が画像に対するラベルであるべき 代替テキストのコンテナとしてalt属性を使用して伝えることができない構造化された情報を含む場合。このラベルは、画像を識別する簡単な説明であってもよい 。これは、プログラムで画像に関連付けられる構造化された代替テキストを添付すべきである 。例2.5 を参照のこと。
画像がテキストを表現するために使用され、著者の意図が、テキストの画像を使用することで視覚的なスタイルを実現することにある場合、alt属性の内容は、画像の代替として検討されるべきである 。3.3節 を参照のこと。
画像が装飾であり、いずれの情報も伝達しないことが著者の意図である場合、空のalt属性は、画像を安全に無視できることを示すものとして考慮されるべきである 。3.5節 を参照のこと。
画像をユーザーに表示しないことが著者の意図である場合、空のalt属性は、画像を安全に無視できることを示すものとして考慮されるべきである 。3.7節 を参照のこと。
画像が、直前または直後に代替テキストを持ち、画像と代替テキストが複雑でなく自然な場合、空のalt属性は、画像を安全に無視できることを示すものとして考慮されるべきである 。
画像がリンクの唯一の内容である場合、alt属性の内容は、リンク先の簡単な説明がされるべきである 。例1.1 を参照のこと。
画像がリンクのコンテンツであり、直前または直後にリンク先の簡単な説明がある場合、alt属性の内容は空であるべきである 。例8.1 を参照のこと。
構造化されたテキストの内容が含まれるリンクの内容である場合も、画像がテキストコンテンツがリンク先の記述である場合、alt属性の内容が空または、画像の代替テキストであってもよい 。テキストコンテンツがリンク先の説明でない場合、alt属性の内容はリンク先の簡単な説明であるべきである 。例6.3を参照のこと 。
4.1.2 空のalt属性alt=""の使用空またはnullのalt属性を使用することが適切である 状況：
画像が、純粋に装飾的 である。
画像が任意のユーザーに見られる ことを意図しない。
画像が、テキストまたは画像の直前または直後に、テキストとして意味を伝達されるグラフィカルシンボル として繰り返されるテキストで構成する。
画像が、単一の大きな画像に対して代替テキストとして役立つ代替テキストを持つ、グループ内の単一の大きな画像および他の画像の一つを形成する画像のグループ の一部である。
画像がリンクの内容として含まれており、リンク先を明確に説明する含まれる他のコンテンツ がある。
空またはnullのalt属性を使用することが適切でない 状況：
画像がfigure要素の中に含まれ、figcaption要素を用いて提供される関連するキャプションを持つ。空のalt属性を使用は、画像を一部のユーザーに見えないようにする。画像にキャプションがある場合、画像をユーザーによって検出可能にする必要があり、そうでなければキャプションの存在は一部のユーザーに何も意味しない。
画像はテキストと同じ文書では入手できない関連情報を含む。空のalt属性を使用は一部のユーザーから画像を非表示にし、画像を問い合わせる可能性を持つために、画像が検出可能にしなければならない。
画像は、関連情報、構造化テキストと同じ文書に使用できる代替解釈を含む。空のalt属性を使用は一部のユーザーからの画像を非表示にし、これは不適当であり、画像は無意味ではなく、ユーザーが短い代替テキストと長い説明の助けを借りて解釈できるかもしれない範囲の情報を含む。また、ブラウザでオフとなる画像を持つユーザーに対する代替テキストを提供しており、望むならば、画像を読み込み表示できる。空のalt属性が存在する場合、画像が存在するという表示が全くないかもしれない。さらに、画像の説明が文書で提供される場合、画像と説明文との間のプログラムの関連付け が必要とされ、画像での空のalt属性を使用は、効果的なプログラムの関連付けの割り当てを妨げる。
4.1.3 代替テキストはどのくらいの長さであるべきか？この質問への答えは、画像が使用されている文脈に大いに依存する。img要素のalt属性またはfigcaption要素を使用して提供される代替テキストに対する明確な正しいまたは間違った長さはないが、一般的なコンセンサスは、代替テキストが75から100文字（1から2文）を超える場合、それは簡潔な代替テキストと見なされるべきではなく、alt属性またはfigcaption要素（画像の代替テキストを提供する場合）を使用して示されるべきではない。
4.2 figureとfigcaption要素figureおよびfigcaption要素は、画像を含むコンテンツの多様性とともにキャプションを明示的に関連付ける方法を提供する。 figcaption要素内に含まれないfigure要素内の内容は、figcaption要素の内容によりラベル付けされる。 figcaptionのコンテンツは、alt属性を使用して提供する代替テキストの補助であってもよい：
figcaptionのコンテンツは、画像の代替テキストかもしれないし、alt属性を使用して提供する代替テキストを不要にするかもしれない。figcaptionのコンテンツが画像での視覚コンテンツに対する適切な代替テキストを提供する場合、これが唯一のケースになるだろう。
例A:
コード例 :
<img src="example.jpg" alt="一部が壊れた建物の壁に描かれる人物のような影と落書きのサインが、街灯の光に照らされている。" >
例B:
一部が壊れた建物の壁に描かれる人物のような影と落書きのサインが、街灯の光に照らされている（写真）。
コード例:
<figure> 一部が壊れた建物の壁に描かれる人物のような影と落書きのサインが、
街灯の光に照らされている（写真）。 </figcaption>
長所:
ブラウザや支援技術でサポートされる場合、figcaptionの内容が明示的に画像に関連付けられる。
短所:
figureおよびfigcaption要素は、今のところブラウザの大部分でサポートされるアクセシビリティでない。
figureとfigcaption要素が広くブラウザでサポートされるアクセシビリティおよび/または支援技術になるまで、figcaptionの内容が代替テキストがある場合、figure要素でrole="group"の使用し、alt属性で画像に対するラベルを提供することを推奨する。これらの推奨事項を、次の例で示す：
例C:
一部が壊れた建物の壁に描かれる人物のような影と落書きのサインが、街灯の光に照らされている（写真1）。
コード例:
<figure role="group" > alt="写真1" > (写真1)。
注:
上記の例Cでは、テキストラベルのコンテナに使用されるalt属性は画像を識別し、画像と画像を説明するテキストの間の暗黙の関連付けを提供する。figureとfigcaption要素のセマンティクスがブラウザや支援技術で実装されるまで、このコンテキストでのalt属性の使用はつなぎの技術として推奨される。その使用は、WCAG 2.0に準拠する。 [WCAG20 ]その使用は、HTML5 の故意の違反である[HTML5]。
4.2.1入れ子のfigure要素を使用する
それぞれ関連するキャプションを持つ関連する画像のグループがある場合、入れ子のfigureとfigcaption要素の使用を推奨する。
コンテキスト内の画像の例：
年月を経た城：それぞれ1423年、1756年、および1966年。 木のチャコール。作者不明、1423年頃。 キャンパスでの油性塗料。Eloisa Faulkner作、1756年。 フィルム写真。Séraphin Médéric Mieusement 作、1936年。
コード例:
<figure role="group">
<figcaption>年月を経た城：それぞれ1423年、1756年、および1966年。</figcaption>
<figure role="group">
<img src="castle-etching.jpg" alt="城は1つの塔と、その周りに高い壁を持つ。">
<figcaption>木のチャコール。作者不明、1423年頃。</figcaption>
</figure>
<figure role="group">
<img src="castle-painting.jpg" alt="城はこのとき、2つの塔と2つの壁を持つ。">
<figcaption>キャンパスでの油性塗料。Eloisa Faulkner作、1756年。</figcaption>
</figure>
<figure role="group">
<img src="castle-fluro.jpg"
さらなる情報
HTML5 Accessibility Chops: using nested figure elements
4.3 img要素のtitle属性title属性は、画像の代替テキストを提供するために使用してはならない 。 title属性を画像に対してキャプションを提供するために使用してはならない が、上記のように、キャプションを提供するためにfigureとfigcaption要素を使用する。
注:
すべてのユーザーが利用可能にすることを意図するマークアップコンテンツへのtitle属性の使用は禁止されている。なぜなら、このコンテキストの用法は、キーボードのみ、タッチデバイスのユーザーから隠されている、認知、精密な運動技能または視覚障害を持つユーザーにより少ない使用可能/使用不可なコンテンツをもたらすため。これは、HTML5 の故意の違反である。[HTML5]
5. 用語集アクセシビリティAPI
オペレーティング・システムおよび他のプラットフォームは、支援技術 へオブジェクト およびイベント についての情報を公開するインタフェースのセットを提供する。支援技術は、関連する情報を取得してそれらのウィジェット と対話するために、これらのインタフェースを使用する。この例は、Java Accessibility API [JAPI ]、Microsoft Active Accessibility [MSAA ]、the Mac OS X Accessibility Protocol [AXAPI ]、 Gnome Accessibility Toolkit (ATK) [ATK ]、IAccessible2 [IA2 ]がある。
アクセシブルな名前
アクセシブルな名前は、ユーザーインターフェイス要素の名前である。各プラットフォームのアクセシビリティAPI は、アクセス可能な名前のプロパティを提供する。アクセシブルな名前の値は、ユーザーインターフェイス要素の表示（たとえば、ボタン上に表示されるテキスト）または非表示（たとえば、アイコンを説明するテキストの代替）プロパティから導出されるかもしれない。
altテキスト
img要素のalt属性を使用して提供される代替テキストに対する口語的な用語。
支援技術
主流のユーザーエージェントによって用意される範囲を超える障害をもつユーザーの要求を満たすための機能を提供するための、ユーザーエージェントとして動作する、または主流のユーザーエージェントと同調するハードウェアおよび/またはソフトウェア。支援技術の詳細な説明 については、WCAG2.0用語集で提供される。
コンテンツ（Webコンテンツ）
情報および、コードまたはコンテンツの構造、プレゼンテーションおよびインタラクションを定義するマークアップを含む、Webブラウザなどのユーザーエージェントによってユーザーに伝達されるべき感覚的体験。
プログラム的関連付け
使用できない画像に遭遇した場合、支援技術を使用している人々が、画像の代替テキストを見つけることが可能でなければならない。これを達成するために、テキストは画像と"プログラム的に関連付けられる"ものでなければならない。これは、（使用できない）画像を得た場合、ユーザーが（使用できる）代替テキストを見つけるためにそれら支援技術を使用できるようにしなければならないことを意味する。
非テキストコンテンツ
プログラムが解釈可能な文字列でないすべてのコンテンツ、すなわち人間の言語で表現できないもの。
注：これは、アスキーアート（文字のパターン）、顔文字、リート語（文字置換を使用する）、およびテキストを表す画像を含む。
空のalt属性またはnull alt属性。
コンテンツのないalt属性：
<img src="null.gif" alt="" >
代替テキスト
非テキストコンテンツ にプログラム的に関連付けられているか、または非テキストコンテンツにプログラム的に関連付けられているテキストから参照されるテキスト 。プログラム的に関連付けられているテキストは、非テキストコンテンツからプログラムが解釈可能 な場所にあるテキストである。
6. 謝辞In no particular order and incomplete.
Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith, Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk, Rich Clark
Enabling funders
The development of this publication is being funded in part by The Paciello Group . The content of this publication does not necessarily reflect the views or policies of The Paciello Group, nor does mention of trade names, commercial products, or organizations imply endorsement by The Paciello Group.
セッションの期限切れです。
you.
