WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.0 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

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

これは、次の達成基準に関連する達成方法である:

解説

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

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

事例

事例 1

ウェブサイト上にある画像は、無料のニュースレターへのリンクである。画像は次のような文字を含んでいる:「無料のニュースレター: 無料のレシピ、ニュースなどを入手しよう! 詳しくはこちら」 画像の代替テキストは、画像にある文字と一致している。

コード例:

<img src="newsletter.gif" alt="無料のニュースレター:
無料のレシピ、ニュースなどを入手しよう! 詳しくはこちら" />

訳注: 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

検証

手順

  1. コンテンツに含まれる img 要素それぞれを調べる。

  2. 意味を伝える img 要素それぞれが、alt 属性を含んでいる。

  3. 画像にコンテンツを理解するために重要な単語が含まれている場合、その単語がテキストによる代替に記述されている。

期待される結果

2. 及び 3. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。