画像のaltの設定の仕方（代替テキストの提供の仕方）カンタンフローチャート

2025年 3月 7日　Posted　遠藤(フロントエンドエンジニア)

コンテンツに画像を用いる際、画像のalt属性を設定することは当たり前のようになっていますが、普段ただなんとなくaltを設定していて、さまざまな状況においてどのように設定したらいいか分からない人もいるのではないでしょうか。

今回は画像のaltの設定の仕方（代替テキストの提供の仕方）について説明します。

altについてはW3CがAn alt Decision Tree（日本語訳：altディシジョンツリー） というコンテンツを公開し、altの設定の仕方を説明しているので参考になるかと思います。
ディシジョンツリー（決定木）はいわゆるフローチャートのようなものです。

そのaltディシジョンツリーの内容を基にして、筆者なりの補足なども含めてaltの設定の仕方についてフローチャート形式でカンタンにまとめます。次の質問に沿って進めてみてください。

1. 対象の画像は単純な装飾目的やイメージ画像で、その画像がなくてもコンテンツ内容の理解には影響はないですか？

画像が単なる装飾やイメージ画像であるか、その画像に意味があるかどうか確認ください。

いいえ:

次の項目へ

はい：

空のaltを設定します。

alt=""

2. 対象の画像は複雑な図表やチャート画像ですか？

画像が複雑な図表やチャート画像でaltを一言で簡単に表すのが難しいかどうか確認ください。

いいえ:

次の項目へ

はい：

画像の簡単なタイトルをaltに設定し、画像の内容を説明するテキストを画像の前後に設置します。

詳しくは複雑な図表やチャート画像のalt属性の設定の仕方にまとめていますのでご確認ください。

3. 対象の画像の近くに画像の内容と重複するテキストがありますか？

いいえ:

次の項目へ

はい：

空のaltを設定します。

alt=""

4. 対象の画像は文字を含んでいますか？

いいえ:

次の項目へ

はい：

以下の状況に応じて判断ください。

4-1. 画像内の文字が意味を持たない場合

alt=""

4-2. 画像内の文字がアイコンなど特定の機能を持つ場合

alt="文字を拡大する"

4-3. 画像内の文字がその画像以外の場所にはない場合

• 文字画像
• 画像内の説明テキストがある

などで、その文字が画像以外の場所にはない場合、画像内の文字をそのままaltに設定します。

alt="たこはかわいい"

alt="自動的に行動履歴や対応ログを取得が可能"

5. 対象の画像はリンクまたはボタンの中で使用されていますか？
その画像がなければ、リンク先またはボタンの機能を理解するのは困難ですか？

いいえ:

次の項目へ

はい：

リンク先の情報またはそのボタンの機能をaltに設定します。

alt="オクトパスランド"

alt="ホーム"

alt="検索"

6. 対象の画像は単純なグラフィックや写真ですか？

はい：

画像の意味が伝わるように簡単な説明をaltに設定します。

alt="株式会社大塚ビジネスサービス"

alt="メールアドレス"

alt="製品A"

おまけ

同内容はPDFにもまとめていますので必要に応じてご確認ください。