alt属性は、画像が見えないときに、その画像が伝える情報や操作の目的を文字で補うためのものです。画像だけを説明するのではなく、前後の文章やリンクと合わせて、何を伝える必要があるかを決めます。
同じ写真やロゴでも、説明のために使う場合、リンクにする場合、飾りとして添える場合で、適切な代替テキストは変わります。この記事では、四つの質問、画像ごとの作例、WordPressでの確認手順を整理します。
alt属性が補う情報と、検索での扱い
altは、HTMLの画像要素に代替テキストを指定する属性です。画像を読み込めない場合や、画面を音声で読む機能を利用する場合に、画像が担っていた意味を伝えます。画像だけの電話ボタンなら、見た目の形より「電話で問い合わせる」という操作の目的が必要です。
Google「画像のSEOベストプラクティス」は、alt、画像の周りの文章、ページの内容などを使って画像のテーマを理解すると説明しています。画像と関係のある言葉を自然に使い、検索されたい地域名やサービス名を羅列しないようにします。altを書くだけで、検索順位や問い合わせの増加を保証することはできません。
四つの質問で、画像の役割を確かめる
まず、その画像を見られない場合に、何が伝わらなくなるかを考えます。次の質問はW3C WAI「altディシジョンツリー」を参考に、確認しやすい順序に整理したものです。画像を四種類に固定する分類ではなく、複数の役割がある場合は、そのページで必要な情報や操作を合わせて考えます。
- 画像がないと、リンク先や操作がわからなくなるか。画像だけのリンクやボタンは、移動先や実行することを伝えます。同じリンクの中に目的がわかる文字があれば、重複する画像の説明は省ける場合があります。
- 近くの本文にない、重要な文字が画像に入っているか。営業時間、開催日、申込条件などを、画像を見なくても確認できるようにします。長い情報は本文にも掲載します。
- 近くの本文にない、判断に必要な情報があるか。商品の色、作業の違い、図の関係など、読者に必要な内容を説明します。複雑な図表には、本文や表で詳しい情報を添えます。
- 装飾、または近くの文章と重複するだけか。追加の情報や機能を持たない画像には、空のaltを指定し、不要な読み上げを増やさないようにします。
どれにも明確に当てはまらない場合は、画像の用途を確認してから判断します。見た目が写真かアイコンかだけでは、altの有無を決められません。
空のaltと、alt属性の省略を分ける
装飾や重複する画像には、alt=""と指定します。空のaltは、その画像から追加で伝える情報がない場合の選択肢です。入力を忘れてalt属性自体がない状態とは異なります。
| 出力されたHTMLの状態 | 確認すること |
|---|---|
alt="相談スペースの丸いテーブルと2脚の椅子" | 画像が伝える、必要な情報に合っているか |
alt="" | 装飾または重複として、空にした理由があるか |
| alt属性がない | 必要な代替テキスト、または意図した空のaltを設定する |
「お客様の声」という見出しに添えた引用符や、文章を区切る模様は装飾の候補です。一方、施工前後の違いや商品の色を伝える写真は、情報を持っています。空欄の数だけを数えず、一枚ずつ使い方を確かめましょう。
写真・リンク・文字入り画像・図表の書き方
以下は書き方を考えるための作例です。自社の実績や実在する店舗の設備を示すものではありません。そのままコピーせず、画像と確認済みの事実に合わせて調整します。
写真は、ページの判断材料になる特徴を書く
相談スペースを紹介する写真で、本文には席の配置が書かれていない場合、「相談スペースの丸いテーブルと2脚の椅子」のように、見える特徴を説明できます。背景として置いた写真で、内容も近くの文章と重複するだけなら、空のaltを検討します。
段差の有無、利用できる設備、作業の安全性などは、写真の印象だけで断定しません。現地や担当者に確認した情報を本文でも説明します。「おしゃれ」「安心」といった主観だけを付け足さず、読者が必要な内容を選びます。
画像だけのリンクは、移動先や操作を伝える
W3C WAI「Functional Images」は、操作に使う画像の代替テキストには、その機能を伝えるよう案内しています。受話器だけの画像リンクなら「電話で問い合わせる」、料金表を開く画像リンクなら「料金表PDFを見る」などが候補です。
ボタン内に「お問い合わせ」という文字があり、矢印が装飾として添えてある場合は、矢印のaltを空にできます。画像を空にした結果、リンクやボタンの名前までなくならないよう、操作全体の読み上げ名を確認してください。
文字入り画像は、重要な情報を本文にも載せる
イベントの開催日、対象者、申込条件を画像だけに載せると、画像が見えない場合や小さな画面では情報を確認しにくくなります。短い文字はaltで補えますが、複数の条件がある案内は本文にも通常の文字で掲載しましょう。
画像と同じ案内を近くの本文で十分に伝えているなら、重複する画像を空のaltにする場合があります。ただし、画像に本文とは別の情報やリンクの機能があれば、それも確認します。長いチラシの文章をaltへすべて詰め込むことだけで済ませないようにします。
複雑な図表は、短いaltと詳しい説明を組み合わせる
W3C WAI「Complex Images」は、図を識別する短い説明と、図の重要な内容を伝える詳しい説明を組み合わせる方法を示しています。グラフなら、比較対象、期間、数値、変化、注意点を、本文やHTMLの表でも確認できるようにします。
「棒グラフ」だけでは比較内容が伝わりません。たとえば「問い合わせ経路ごとの件数を比較したグラフ」と短く示し、近くの本文や表で対象期間と各件数を説明します。短期間のデータから長期的な傾向や成果を断定しないことも大切です。
同じロゴでも、文脈とリンクによってaltが変わる
会社名を示すロゴ、トップページに戻るリンク、文字の横に添えたロゴでは、必要な代替テキストが異なります。隣に文字がある場合は、それが同じリンクの中にあるかも確認します。別のリンク外に会社名があるだけで、画像リンクの目的が伝わるとは限りません。
| 使われ方 | 確認するもの | altの候補 |
|---|---|---|
| 会社名を示す単独のロゴ | 画像が会社名を伝えている | 会社名 |
| 画像だけでトップページへ戻るリンク | ブランド名と移動先が伝わるか | ブランド名＋トップページ |
| 同じリンク内に会社名と移動先の文字がある | 文字だけでリンクの目的が伝わるか | 重複するロゴは空のaltを検討 |
| リンクのないロゴの近くに同じ会社名がある | 追加の情報がないか | 空のaltを検討 |
リンク自体に読み上げ用の名前が設定されている場合も、画像とリンクを合わせた出力を確認します。画像のaltだけを一括変更するより、実際のページで前後の文章と操作を見て判断する方法が確実です。
書くときに避けたい、重複と未確認の説明
- 関係のない言葉の羅列：地域名や商品名を、画像の内容と関係なく繰り返さない。
- 管理用の名前の流用：ファイル名やメディアのタイトルを、そのまま説明にしない。
- 「写真」「画像」だけの説明：読者に必要な内容が何かを伝える。形式が理解に必要なら、図やグラフという語を使う。
- 未確認の特徴：人の属性、場所、設備、効果などを、見た目やAIの推測だけで書かない。
- 過剰な読み上げ：本文で十分に伝えた内容を、長いaltで何度も繰り返さない。
WordPressは、メディア・記事・公開画面で確認する
WordPress.org「Image block」は、メディアライブラリの代替テキストを新しい挿入時の初期値とし、画像ブロックでの変更はその投稿やページに適用されると説明しています。すでに配置した画像を直すときは、メディアライブラリの変更だけで既存ページも直ったと判断しないようにします。
| 確認場所 | 確認すること |
|---|---|
| メディアライブラリ | 対象画像と登録された代替テキスト。新しく挿入するときの初期値。 |
| 投稿・固定ページの画像 | 前後の文章、リンク、画像ブロックの代替テキスト。その場所での役割。 |
| 公開ページ | 実際に出力されたaltと、リンク・ボタンの読み上げ名。 |
タイトルは画像の管理などに使う名前、キャプションは画面に表示する補足、代替テキストは画像の意味や機能を補うものです。入力欄の名称や配置は、WordPressの版、テーマ、使用するブロックによって違うため、現在の編集画面で確認します。
- 変更するページ、画像、現在のalt、変更理由を記録し、変更前の状態を残す。
- 画像が置かれた文脈から、必要な代替テキストか意図した空のaltを決める。
- その投稿・固定ページの画像設定を直し、保存後の内容を確認する。
- 通常の公開URLで、対象の画像要素と操作の名前を確かめる。
ヘッダーのロゴ、CSSの背景、スライダー、ページ作成プラグインの画像は、本文の画像ブロックと管理場所が異なる場合があります。重要な情報を背景画像だけで伝えず、本文の文字でも確認できるようにします。出力箇所がわからない場合は、対象のページと画像を制作担当者へ伝えてください。
画像ファイル名とURLは、altと別に管理する
ファイル名は画像データの識別、altはページ内の情報や機能を補うためのものです。altを直すために、公開済みの画像を別名で再登録する必要は通常ありません。URLが変わると、別のページや外部からの参照が残る場合があります。
現在の使用箇所を確認してから、必要な変更を計画します。命名や公開済み画像を変えるときの確認は、画像ファイル名の記事でも整理しています。容量や表示速度の確認は、サイト速度改善の記事をご覧ください。
保存後・公開後に確認するチェックリスト
- 写真や図の内容と、確認済みの事実が一致している。
- 画像を見なくても、前後の文章と代替テキストで必要な情報が伝わる。
- 画像だけのリンク・ボタンに、移動先や操作がわかる名前がある。
- 装飾や重複する画像は、理由を確認して空のaltを指定している。
- 複雑な図表や長い文字の画像は、同等の情報を本文や表でも確認できる。
- 保存したページと公開URLの出力が一致し、スマートフォンでも必要な説明を読める。
画像の前後の文章を読み、リンクを操作し、必要に応じて実際の読み上げ環境でも確認します。HTMLのaltがあることだけで、ページ全体のアクセシビリティが確認できたとは扱わず、見出し、操作、フォームなども目的に合わせて確かめます。
よくある質問
altは、すべての画像で埋める必要がありますか？
追加の情報や機能がある画像には、その役割に合う説明が必要です。装飾や重複だけの画像では、空のaltが適切な場合があります。alt属性の省略と、意図した空のaltを分けて確認してください。
文字数は、何文字にそろえればよいですか？
このページでは一律の文字数を指定しません。必要な内容や操作を短く伝え、複雑な図表や長い条件は本文や表に置きます。削りすぎて意味が失われていないかも確認しましょう。
AIが作った画像の説明を、そのまま使えますか？
確認してから使います。画像にない物や未確認の人・場所・効果を説明していないかを確かめ、前後の文章やリンクの役割に合わせて直します。画像だけを見た説明が、そのページで必要なaltになるとは限りません。
まとめ
altは、その画像がなくなると伝わらない情報や操作を補うために決めます。画像と前後の文章、リンクを一緒に確認し、装飾には空のalt、複雑な図には本文や表の説明を組み合わせましょう。WordPressでは、メディアの登録内容、ページ内の画像設定、公開画面の出力を別々に確かめます。
既存ページの画像が多く、確認する場所や順序に迷う場合は、現在のURLと対象画像をまとめてBämへご相談ください。画像だけでなく、見出し、本文、リンクとの関係も含めて整理します。対応範囲は相談時に確認します。
参考資料
- Google「画像のSEOベストプラクティス」（確認日：2026年10月6日）
- W3C WAI「altディシジョンツリー」（確認日：2026年10月6日）
- W3C WAI「Functional Images」（確認日：2026年10月6日）
- W3C WAI「Complex Images」（確認日：2026年10月6日）
- WordPress.org「Image block」（確認日：2026年10月6日）
