画像には代替テキストが必要です

情報を伝えているすべての <img> 要素には短い説明的な代替テキストがあり、そしてすべての装飾的な <img> 要素には空の alt 属性 (例: alt="") があることを確認します。

画像に代替テキストを追加する主な方法は三つあります:

• <img alt="drawing of a cat" src="..."> のように alt 属性を使用する。
• <img aria-label="drawing of a cat" src="..."> のように aria-label を使用する。
• <img arialabelledby="someID" src="..."> のように aria-labelledby 属性を使用する。

代替テキストの書き方のヒント

代替テキストを書くときは、画像の内容と目的を全盲のユーザーに伝えることが目的だということを忘れないでください。目の見えるユーザーが画像単体から得る情報と同じだけ、全盲のユーザーは代替テキストから情報を得られるべきです。代替テキストは画像の意図、目的、そして意味を提供するべきです。

代替テキストを書くときは、次の点に注意すると良いでしょう:

• 非テキストコンテンツはなぜここにあるのでしょうか？
• それはどのような情報を提示しているのでしょうか？
• それはどのような目的を果たしているのでしょうか？
• もし非テキストコンテンツを使用できない場合、同じ情報あるいは機能を提供するために、どのような言葉を使うでしょうか？

属性の中に含まれるすべてのテキストが役に立つものであることを確認しましょう。「チャート」「画像」「図」などの単語や、画像のファイル名は通常あまり役に立たないため、代替テキストの中で使用されるべきではありません。

装飾的な要素

情報を提供しない、あるいはページのコンテンツ内で説明されているため代替テキストを必要としない画像には、"null" な alt 属性を (alt="" を用いて) 提供しましょう。一部の開発者は、代替が必要ないと思われる画像については、誤って alt 属性を省略してしまう場合があります。スクリーン・リーダーなどの支援技術は、代替テキストとしてソースの属性 (つまりファイル名) を読み取ることが多く、これは支援技術のユーザーには役に立ちません。支援技術に画像を無視するように伝えるには、「空の代替テキスト」属性を使用します: alt=""。

例:

<img src="line.jpg" alt="">