画像のalt属性の書き方｜入れるべき画像と、空にすべき画像の判断

alt属性について最も多い誤解は、すべての画像に説明を入れればよいというものです。実際には、装飾を目的とした画像に説明を入れると、読み上げで不要な情報が挟まり、かえって使いにくくなります。

判断の基準は画像の種類ではなく、その画像がページの内容として意味を持っているかどうかです。意味を持つなら説明を入れ、飾りなら空にする。この分岐を先に決めれば、書き方は自然に決まります。

この記事では、役割別の判断基準、書き方の型、キーワードを詰め込んではいけない理由、そして既存サイトの点検手順を整理します。

alt属性が使われる3つの場面

3つの場面のうち、設計の基準にすべきは1つ目です。読み上げたときに意味が通るかを基準にすると、結果として2つ目と3つ目も満たされます。逆に検索を基準にすると、読み上げに不向きな文言になりがちです。

説明を入れる画像と、空にする画像

4行目と5行目が判断のしどころです。空にする（altの値を空にする）ことは「何も設定しない」とは違います。空にすると、読み上げソフトはその画像を飛ばします。何も設定しないと、ファイル名が読み上げられることがあります。

5行目については、写真のすぐ下に「◯◯店の外観」というキャプションがある場合、altに同じ内容を入れると2回読み上げられます。この場合は空にしてください。

役割別の書き方の型

1. 内容を伝える画像：何が写っているかを簡潔に。「◯◯の施工後の様子」
2. リンクの画像：どこへ行くかを書く。「トップページへ」
3. ボタンの画像：何が起きるかを書く。「メニューを開く」
4. 図解・グラフ：読み取れる要点を書く。詳細は本文にも書く
5. 人物写真：役割を書く。「代表取締役の◯◯」

2番目と3番目は間違えやすい部分です。ロゴがリンクになっている場合、altに「会社のロゴ」と書くと、読み上げでは「会社のロゴ、リンク」となり、どこへ行くか分かりません。「トップページへ」のように、遷移先を書いてください。

4番目については、複雑なグラフの内容をaltだけで伝えるのは困難です。読み取れる結論を本文にも書いておくほうが、すべての閲覧者にとって親切です。

キーワードを詰め込んではいけない理由

altに検索キーワードを並べる手法が使われた時期がありますが、現在は避けるべきです。理由は2つあります。

• 読み上げで意味が通らない：「地域名 業種 安い おすすめ」が読み上げられる状態は、利用の妨げになる
• 検索エンジン側の評価にも寄与しない：不自然な詰め込みは、順位操作を目的とした行為として扱われうる

自然な文の中に商品名や地域名が入るのは問題ありません。「◯◯店の店内（東京都△△区）」は自然ですが、「東京 △△区 ◯◯ 安い 人気」は不自然です。読み上げて意味が通るかで判断してください。

画像を含むページ全体の設計については内部リンクの設計方法｜評価が集まるサイト構造の作り方も参考になります。画像単体より、ページの構造のほうが評価に影響します。

画像内の文字の扱い

キャッチコピーや料金表を画像にしているサイトは少なくありません。altにその文字を書けば読み上げには対応できますが、それでも画像より文字のほうが有利な点があります。

更新頻度の高い情報（料金、営業時間、キャンペーンの期間）を画像にすると、変更のたびに制作を依頼することになります。この運用コストは公開後に効いてきます。文字で組める部分は文字にしてください。

アイコンや図版をどこまで画像にするかの判断はアイコンとイラストの使い方｜使う基準と使わない基準で扱っています。

既存サイトを点検する手順

1. 主要ページの画像を洗い出す：ブラウザの検証機能で確認できる
2. altが未設定の画像を探す：まずここを埋める
3. ファイル名がaltに入っていないか確認する：意味のない文字列は書き換える
4. 装飾画像に説明が入っていないか確認する：空にする
5. リンク画像のaltが遷移先になっているか確認する
6. 更新頻度の高い画像内文字を洗い出す：文字への置き換えを検討する

2番目と3番目で大半が片づきます。特に、画像管理システムから自動で入る文字列（連番やファイル名）がそのままaltになっているケースは頻繁にあります。

画像の重さそのものが表示速度に影響する場合は、alt以前に画像の最適化が優先です。判断の順序はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。

他の要素との順序

デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。

よくある失敗

すべての画像に説明を入れる

装飾画像の説明は読み上げの妨げになります。飾りは空にしてください。

ファイル名をそのままにする

意味のない文字列が読み上げられます。未設定より悪い状態になることがあります。

ロゴのaltを「ロゴ」にする

リンクになっている場合、どこへ行くか分かりません。遷移先を書いてください。

キーワードを並べる

読み上げで意味が通らず、評価にも寄与しません。自然な文にしてください。

料金表を画像のままにする

更新のたびに制作が必要になります。文字で組める部分は文字にしてください。

よくある質問

altは何文字くらいが適切ですか

文字数の基準はありません。読み上げたときに長すぎないこと、その画像の意味が伝わることの2つで判断してください。1文で収まることが多くなります。

同じ画像が複数ページにある場合も個別に書きますか

役割が同じなら同じ内容で構いません。ただしリンク先がページによって違う場合は、遷移先に合わせて変えてください。

装飾画像を空にするのと、設定しないのは同じですか

違います。空にすると読み上げソフトはその画像を飛ばします。設定しない場合はファイル名が読み上げられることがあります。装飾なら明示的に空にしてください。

画像検索からの流入は期待できますか

商材によります。商品や施工事例のように、見た目で選ばれるものでは流入が発生します。ただしaltだけでなく、ページ全体の内容と画像の関連性が影響します。

動画やアイコンにも同じ考え方が使えますか

考え方は共通です。内容を伝えているなら説明が必要で、装飾なら不要です。どこまで対応するかの優先順位はWebアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方で扱っています。

まとめ

alt属性はすべての画像に説明を入れればよいものではありません。判断の基準は、その画像がページの内容として意味を持っているかどうかです。意味を持つなら説明を入れ、装飾なら空にする。装飾画像に説明を入れると、読み上げで不要な情報が挟まり、かえって使いにくくなります。

設計の基準にすべきは、読み上げたときに意味が通るかどうかです。ここを基準にすると、画像が表示されない場合の代替表示も、検索エンジンによる内容の判断も、結果として満たされます。逆に検索を基準にしてキーワードを並べると、読み上げに不向きな文言になり、評価にも寄与しません。

既存サイトの点検では、altが未設定の画像と、ファイル名がそのまま入っている画像を探すだけで大半が片づきます。あわせて、更新頻度の高い情報（料金、営業時間、期間）が画像になっていないかを確認してください。画像のままだと、変更のたびに制作の依頼が発生します。

当社ではホームページ制作において、更新しやすい構成を含めた設計をご相談いただけます。自社サイトの点検を進めたい場合は、資料をダウンロードのうえご活用ください。