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

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

画像に代替テキストを追加するには、主に3つの方法があります。

• alt 属性を使用する、つまり <img alt="drawing of a cat" src="...">を使用します。
• aria-label を使用する、つまり <img aria-label="drawing of a cat" src="...">
• aria-labelledby 属性を使用する、つまり <img arialabelledby="someID" src="...">を使用します。

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

代替テキストを書くときは、その目的が視覚障害のあるユーザーに画像の内容と目的に関する情報を伝えることであるということを念頭に置いてください。視覚障害のあるユーザーは、目の見えるユーザーが画像自体から得るのと同じくらい多くの情報を代替テキストから得ることができるはずです。代替テキストには、画像の意図、目的、意味を伝える必要があります。

代替テキストを書くときは、次の質問を念頭に置いておくと役立ちます。

• なぜここに非テキストコンテンツがあるのでしょうか?
• どのような情報が表示されていますか?
• それはどのような目的を果たしますか?
• テキスト以外のコンテンツを使用できない場合、同じ情報や機能を伝えるためにどのような言葉を使用しますか?

属性に含まれるすべてのテキストが有用であることを確認してください。「チャート」、「画像」、「図」などの単語や画像ファイル名はあまり役に立たない傾向があるため、代替テキストには使用しないでください。

装飾要素

情報を提供しない画像や、画像がページコンテンツで説明されているために代替テキストを必要としない画像には、「null」 alt 属性を使用して指定します。 alt=""一部の開発者は、代替が必要ないと判断する画像に対して、誤って属性 alt を完全に省略します。これは、スクリーンリーダーなどの支援技術がソース属性(ファイル名)を代替テキストとして読み取ることが多いため、支援技術のユーザーにとっては役に立ちません。支援技術に画像を無視するように指示するには、「空白の代替テキスト」属性を使用します alt=""。

例：

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