【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
img
要素の alt
属性を使用するこの達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML ドキュメントで用いられている画像
これは、次の達成基準に関連する達成方法である:
img
要素を使用するときは、簡潔なテキストによる代替を alt
属性に指定する。注記: この属性の値は「ALT テキスト」ともいう。
画像がコンテンツを理解するために重要な文字を含むとき、代替テキストにはそれらの文字を含めなくてはならない。これにより、代替テキストはページ上で画像と同じ役割を果たすことができる。 代替テキストは、画像自体の視覚的な特徴を説明する必要はないが、画像と同じ意味を伝えなければらないことに注意する。
訳注: WAIC では H37 に関するアクセシビリティ サポーテッド(AS)情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド(AS)情報: H37 も参照されたい。
ウェブサイト上にある画像は、無料のニュースレターへのリンクである。画像はテキスト「Free newsletter. Get free recipes, news, and more. Learn more.」を含んでいる。画像の代替テキストは、画像にあるテキストと一致している。
コード例:
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more." />
訳注: WAIC では H37-1 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H37-1 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。
ウェブサイト上にある画像は、ビルの間取り図を表現している。その画像は、各部屋の部分がインタラクティブに操作できるイメージマップである。代替テキストは「ビルの間取り図。各部屋の目的又は内容に関する詳しい情報は、部屋を選択してください」である。「部屋を選択してください」という指示により、画像がインタラクティブであることを示している。
訳注: WAIC では H37-2 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H37-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML 5.1§4.7.5. The img element 及び HTML 5.1§4.7.5.1. Requirements for providing text to act as an alternative for images を代わりに参照できる。
コンテンツに含まれる img
要素それぞれを調べる。
意味を伝える img
要素それぞれが、alt
属性を含んでいることを確認する。
画像にコンテンツを理解するために重要な単語が含まれている場合、その単語がテキストによる代替に記述されていることを確認する。
2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。