WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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

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

解説

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

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

事例

事例 1

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

コード例:


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

事例 2

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

参考リソース

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

HTML 4.01 IMG element

HTML 4.01 alt attribute

検証

チェックポイント

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

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

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

判定基準

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

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。