画像の代替テキストは全部に必要?alt属性を入れる画像・空にする画像の判断基準

WordPressへ画像を入れるたびに表示される「代替テキスト」。入力した方が丁寧だと思い、すべての画像へ説明を書いている方もいれば、よく分からないまま空欄にしている方もいるでしょう。
結論から言うと、どちらも一律では判断できません。代替テキストは、画像の名前を記録する欄でも、SEOキーワードを入れるための欄でもないからです。画像を見られない状況で、その画像が担っていた意味や機能をどう伝えるか。その必要性を一枚ずつ考えます。
この記事では、alt属性に文章を書く画像、空のaltを設定する画像、画像内の情報をHTML本文へ移した方がよいケースを整理します。通常のホームページとLPで、確認するときの注意点がどう変わるかも見ていきましょう。
代替テキストは、すべての画像を説明するためのものではありません
alt属性は、画像を表示できない場合や、スクリーンリーダーなどでページを利用する場合に、その画像の代わりとなる情報を伝えるためのものです。大切なのは、画像の見た目を細かく実況することではありません。
同じ画像でも、掲載する場所や目的によって適切なaltは変わります。人物写真が単なる雰囲気づくりなら空のaltが候補になりますが、代表者を紹介するための写真なら、誰の写真かが意味を持つ場合があります。
まずは、次の3つの状態を分けてください。
| HTML上の状態 | 意味 | 主な用途 |
|---|---|---|
alt="施工後の店舗外観" |
画像に代わる情報がある | 画像にしかない意味や内容を伝える |
alt="" |
alt属性はあるが、内容は空 | 装飾画像や、周囲の文章と内容が重複する画像を読み上げから外す |
| alt属性自体がない | 代替テキストが用意されていない | 装飾画像を示す方法としては使わない |
W3CのWeb Accessibility Initiative(WAI)でも、ページへ情報を追加しない装飾画像や、隣接する文章と内容が重複する画像には、空のalt=""を設定するよう案内しています。alt属性そのものを省略すると、支援技術によってはファイル名が読み上げられる可能性があるため、空のaltとは区別が必要です。
なお、HTMLソースによっては<img src="image.jpg" alt>と表示されることがあります。HTMLでは、属性名だけを記述する「空属性構文」の値は空文字として扱われるため、このaltは意味としてalt=""と同じです。
迷ったら、画像を消したときに何が失われるかを確認します
画像が内容と関係しているかどうかだけでは、altの要否を決められません。判断しやすくするため、次の順番で確認します。
1.画像にしかない情報があるか
画像を非表示にしたとき、読者の判断に必要な情報が失われるなら、その情報を代替する必要があります。商品写真の色や形、施工前後の変化、検索順位、グラフの傾向などが該当します。
短い言葉で同じ意味を伝えられる画像なら、altへ簡潔に記載できます。ただし、比較表やグラフの内容をすべてaltへ詰め込むと、かえって理解しにくくなります。複雑な情報はHTMLの表や本文として掲載し、画像には短い説明を添える方が自然です。
2.同じ情報が近くの文章に書かれているか
画像が示す内容を、見出しや本文ですでに十分説明している場合、同じ文章をaltでも繰り返す必要はありません。スクリーンリーダーでは似た情報が続けて読み上げられ、かえって冗長になるためです。
例えば、制作実績の画像の隣に、業種、制作内容、改善結果までテキストで書かれているなら、画像は視覚的な補強としてalt=""にできる場合があります。画像が実績と関係していても、その画像にしかない情報がなければ、空のaltは手抜きではありません。
3.画像そのものに操作上の役割があるか
画像だけで構成されたリンクやボタンでは、見た目の説明よりも、移動先や実行される操作を伝えます。家の形をしたアイコンなら「家のアイコン」ではなく、「ホームへ」のように機能を表す考え方です。
一方、同じリンク内に「ホームへ」という文字があり、画像がその横に添えられているだけなら、画像のaltは空にして重複を避けられます。画像単体で機能を担うか、周囲のテキストで機能が分かるかが分かれ目です。
通常のホームページでは、空のaltが適切な画像も多くなります
企業ホームページでは、サービス内容、実績、強み、代表者情報などをHTMLテキストで説明し、その印象を補うために写真やイラストを配置することがよくあります。この設計なら、画像を見られなくても本文だけで意味が成立するため、空のaltが適切な画像は自然に増えます。
ただし、「ホームページの画像はほとんど空でよい」と決めてしまうのも正しくありません。スタッフの顔と名前を対応させる写真、商品の外観、施工箇所、地図、図解など、画像が読者の理解や判断に関わるケースもあります。
空のaltが多いこと自体が正解なのではなく、重要な情報をHTMLテキストでも伝えられるように設計した結果として、画像が視覚的な補助に回っている状態が望ましいと考えます。
LPは画像が訴求を担いやすいため、より慎重な確認が必要です
LP(ランディングページ)は、一つの商品や行動へ向けて情報を順番に見せるページです。画像内へキャッチコピーや実績数値を入れたり、比較や変化を図解したりすることが多いため、画像を消したときに情報が欠けやすくなります。
特に、次の画像は一枚ずつ確認したいところです。
- Before/Afterの変化を示す画像
- 問い合わせ数や売上などの実績数値を画像内だけに書いたもの
- 複数プランや競合サービスとの比較表
- お客様の声を画像化したもの
- サービスの流れや仕組みを示す図解
- 漫画やイラストの中で悩みと解決策を説明しているもの
- 画像内にしか存在しないキャッチコピーや注意事項
これらの情報を長いaltへ押し込めば解決するとは限りません。申込みを判断するうえで重要な内容なら、最初からHTMLの見出し、本文、表として掲載する方が、画像を見られない人だけでなく、スマートフォンで読む人や検索エンジンにも伝わりやすくなります。
つまり、LPで必要なのは「すべてのaltを埋めること」ではなく、「画像だけに重要な訴求を閉じ込めていないか」を確認することです。
実務では「書く・空にする・本文へ移す」の3択で考えます
| 画像の例 | 判断の目安 | 対応例 |
|---|---|---|
| 見出し横の雰囲気写真 | ページの意味を追加しない | 空のalt |
| 説明文に添えた同内容のアイコン | 近くの文字と役割が重複する | 空のalt |
| 人物紹介の顔写真 | 誰の写真かが判断材料になる | 人物名など、文脈上必要な情報を書く |
| 商品や施工状態を示す写真 | 見た目そのものに意味がある | 重要な特徴を簡潔に書く |
| 制作実績の画面 | 制作内容と成果が隣接テキストで説明済み | 空のalt。画像にしかない事実があれば本文へ追加 |
| 比較表やグラフ | 短いaltだけでは情報を再現できない | 要点を本文へ、詳細をHTMLの表や説明として掲載 |
| 画像だけのリンクやボタン | 画像が操作を成立させている | 移動先や操作内容を書く |
この分け方なら、「関連画像だから書く」「写真だから空にする」といった機械的な処理を避けられます。同じ画像でも、掲載場所が変われば判断が変わる点には注意が必要です。
SEOのためにキーワードを詰め込む必要はありません
Googleは、altテキスト、画像の周辺にある文章、画像認識などを使って、画像の内容を理解すると説明しています。そのため、画像検索を含むSEOでaltが判断材料になることは事実です。
しかし、検索キーワードを不自然に並べることは推奨されていません。Googleも、alt属性へのキーワードの詰め込みは利用者の体験を損ね、スパムとみなされる可能性があると案内しています。
SEOを意識する場合も、先に考えるべきなのは画像の役割です。情報を伝える画像なら、文脈に合った短い代替テキストを書く。装飾や重複であれば空にする。この判断を崩してまでキーワードを入れる必要はありません。
WordPressでは、入力欄より実際のページを確認します
WordPressのメディアライブラリには代替テキストの入力欄がありますが、すべての画像へ何かを登録すれば作業完了というわけではありません。同じ画像を別の文脈で再利用すれば、必要な代替テキストも変わる可能性があるからです。
SWELLを含むWordPressテーマやブロックを使う場合は、最終的に公開ページのHTMLでalt属性がどのように出力されているかを確認します。装飾画像として空欄にした結果がalt=""またはaltなら、空のaltとして扱われます。反対に、alt属性自体が出力されていなければ、別の状態です。
また、画像内にしかない重要な情報を見つけたときは、代替テキストだけで解決しようとせず、本文の構成まで見直します。この確認は、画像設定というより、ページ全体の情報設計と品質管理の一部です。
全部に入れることより、必要性を判断することが大切です
代替テキストを一件も設定しないことと、すべての画像へ説明を書くことは、方向こそ逆でも、画像の役割を確認していない点では同じです。
画像を消したときに情報や機能が失われるか。周囲の文章で同じ内容が伝わっているか。複雑な情報を画像だけに任せていないか。この3点を見るだけでも、判断はかなり整理できます。
hakubi codeでは、代替テキストの有無だけを機械的に確認するのではなく、ページの情報が画像を見られない状況でも伝わるか、不要な重複が生まれていないかまで確認します。ホームページやLPの構成、文章、表示品質を含めて見直したい場合は、お問い合わせフォームからご相談ください。

