img要素のalt属性に何を記述すればよいか、WAIによるチュートリアルにその答えがありました

img要素のalt属性に何を記述すればよいか、悩むことはありませんか？

その一つの答えがWAIによるチュートリアルにありました。画像にテキストが含まれている場合はどうすればよいか、リンクやボタンとして使用している画像なのか、装飾的な画像のaltは空で本当によいのか、などWAIによる方針が分かります。

An alt Decision Tree

下記は各ポイントを意訳したものです。
※WAIのライセンスに基づいて翻訳しています。

• はじめに
• 1. 画像にテキストは含まれていますか?
• 2. 画像はリンクやボタンで使用されていますか？
• 3. 画像は現在のページやコンテキストに意味を与えていますか？
• 4. 画像は装飾的なものですか？
• 5. 上記以外の画像の用途ですか？

はじめに

このディシジョンツリー（決定木）では、さまざまな状況における<img>要素のalt属性の使い方を説明します。

画像の種類によっては、装飾用にCSSの背景画像を使用したり、テキスト画像の代わりにWebフォントを使用するなど、代替アプローチを検討してください。

1. 画像にテキストは含まれていますか?

いいえ: 2へ

はい、画像に含まれているテキストは、実際のテキストで付近に表示されています。

alt属性は空にしてください。参考: 装飾画像

はい、画像に含まれているテキストは、視覚効果のためだけに表示されています。

alt属性は空にしてください。参考: 装飾画像

はい、画像に含まれているテキストには、特定の機能（アイコンなど）があります。

alt属性で画像の機能を伝えてください。参考: 機能的画像

はい、画像に含まれているテキストは、画像以外には存在しません。

alt属性には画像のテキストを含ませてください。参考: テキスト画像

2. 画像はリンクやボタンで使用されていますか？ また画像がなければ、リンクやボタンが何をするものなのか理解するのは不可能ですか？

いいえ: 3へ

はい

alt属性でリンク先または実行するアクションを伝えてください。参考: 機能的画像

3. 画像は現在のページやコンテキストに意味を与えていますか？

いいえ: 4へ

はい、シンプルなグラフィックまたは写真の画像です。

alt属性は意味が分かるように画像の簡単な説明を記述してください。参考: 情報量の多い画像

はい、グラフや複雑な情報を含む画像です。

画像に含まれる情報をページ内の他の場所に含めてください。参考: 複雑な画像

はい、実際のテキストと重複するコンテンツが近くにあります。

alt属性は空にしてください。参考: 機能的画像: 冗長

4. 画像は装飾的なものですか？ それともユーザー向けではありませんか？

いいえ: 5へ

はい

alt属性は空にしてください。参考: 装飾画像

5. 上記以外の画像の用途ですか？ どのようなaltテキストを提供すべか不明ですか？

このディシジョンツリーはすべてのケースを網羅しているわけではありません。代替テキストの提供に関する詳細情報は、WAIの画像チュートリアルを参照してください。