img 要素の alt 属性を使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML ドキュメントで用いられている画像

これは達成基準 1.1.1: 非テキストコンテンツ (十分な達成方法) に関する達成方法である。

解説

img 要素を使用するときは、短いテキストによる代替を alt 属性に指定する。注記: この属性の値は「alt テキスト」ともいう。

画像がコンテンツを理解するために重要な文字を含むとき、代替テキストにはそれらの文字を含めなくてはならない。これにより、代替テキストはページ上で画像と同じ役割を果たすことができる。代替テキストは、画像自体の視覚的な特徴を説明する必要はないが、画像と同じ意味を伝えなければらないことに注意する。

訳注:

WAIC では H37-1 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H37-1 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

事例

事例 1

ウェブサイト上にある画像は、無料のニュースレターへのリンクである。画像はテキスト「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 はこの達成方法が検証した環境で広く動作すると判断している。

事例 2

ウェブサイト上にある画像は、ビルの間取り図を表現している。その画像は、各部屋の部分がインタラクティブに操作できるイメージマップである。代替テキストは「ビルの間取り図。各部屋の目的又は内容に関する詳しい情報は、部屋を選択してください。」である。「部屋を選択してください」という指示により、画像がインタラクティブであることを示している。

訳注:

WAIC では H37-2 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H37-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

HTML 4.01 IMG element

HTML 4.01 alt attribute

訳注:

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML §4.8.3 The img element 及び HTML §4.8.4.4 Requirements for providing text to act as an alternative for images を代わりに参照できる。

検証

手順

  1. コンテンツに含まれる img 要素それぞれを調べる。
  2. 意味を伝える img 要素それぞれが、alt 属性を含んでいることを確認する。
  3. 画像にコンテンツを理解するために重要な単語が含まれている場合、その単語がテキストによる代替に記述されていることを確認する。

期待される結果

2. 及び 3. の結果が真である。