ホームページへ画像を載せるとき、「alt属性には何を書けばよいのだろう」「検索されたい言葉を入れたほうがよいのだろう」と迷うことがあります。alt属性は、画像が見えない状況でも、その画像が担っていた意味や機能を伝えるためのものです。検索順位を上げるためのキーワード欄ではありません。
大切なのは、画像だけを見て説明文を作ることではなく、その画像がページ内でどんな役割を持っているかを確かめることです。同じ写真やロゴでも、飾りとして置かれている場合と、リンクや説明の一部として使われている場合では、適切なaltが変わります。
この記事では、専門用語をできるだけ減らし、「その画像がなくなったら何が伝わらなくなるか」という視点から判断手順を整理します。写真、ロゴ、ボタン、文字入り画像、グラフの例に加え、WordPressで既存ページを直すときの確認場所も紹介します。
alt属性とは、画像が担う意味や機能を文字で補うもの
altは「alternative text（代替テキスト）」を指定するHTMLの属性です。画像を読み込めないときや、画面の内容を音声で読み上げる機能を利用するときに、画像が伝えていた情報を補います。たとえば、電話予約へ進む画像だけのボタンなら、見た目の説明より「電話で予約する」のように操作の目的を伝えるほうが役立ちます。
一方、すぐ近くの本文と同じ内容を示す飾り写真なら、説明を重ねる必要がない場合があります。すべての画像へ詳しい説明を書くことが正解ではありません。必要な画像には必要な情報を入れ、装飾や重複する画像は読み上げを増やさない、という切り分けが重要です。
Googleも画像の内容だけでなく、altや画像の周囲にある文章、ページ全体の文脈などを手がかりにします。ただし、altを書けば検索順位や流入が必ず上がるという意味ではありません。まず利用者にとって意味が通る状態を整え、その結果として検索エンジンにも画像の役割を理解しやすくする、と考えるのが安全です。
4つの質問で画像の役割を判断する
altを考える前に、次の4つの質問を上から順に確認します。これは画像を4種類に固定する分類ではありません。複数に当てはまる場合は、画像がないと失われる意味や操作のうち、ページの目的にとって重要なものを優先します。どれにも明確に当てはまらない場合も、個別の文脈で判断します。画像ファイル名や検索キーワードを先に考えると、ページ内での役割からずれやすくなります。
- 画像がリンクやボタンの中で使われ、その画像がないとリンク先や操作を理解しにくいか。
画像だけを押して別ページへ進む、電話する、資料を開くなど、その画像が目的を伝える機能を担うなら、見た目ではなくリンク先や操作を伝えます。例は「料金表を見る」「電話で予約する」です。同じリンク内に通常の文字があり、それだけで目的が分かる場合は、画像を空のaltにして重複を避けることもあります。 - 画像の中に、近くの本文にはない重要な文字があるか。
営業時間、申込期限、イベント名など、読む必要がある文字を画像だけに載せている場合は、その意味が失われないようにします。長い文章はaltへ詰め込まず、本文にも同じ情報を置く方法を優先します。 - 画像が、近くの本文にはない情報を伝えているか。
商品写真、作業工程、比較図、グラフなどが判断材料になっているなら、ページの目的に必要な範囲で説明します。複雑な図表は短いaltに加え、本文や表で同等の内容を伝えます。 - 画像が装飾、またはすぐ近くの文章と同じ内容か。
内容を足していない飾り画像や、隣の見出しをそのまま絵にした画像なら、空のaltを使い、読み上げが重ならないようにします。
空のaltは「書き忘れ」ではなく、装飾を伝える指定
装飾画像には、HTMLで alt="" と指定します。これはalt属性そのものを省略することとは違います。空のaltは「この画像から追加で伝える情報はない」という意思表示です。読み上げ機能では画像が読み飛ばされやすくなり、利用者が同じ内容を何度も聞かずに済みます。
たとえば、「お客様の声」という見出しの横に置いた引用符のイラスト、文章の区切りに置いた模様、本文で説明済みの内容を雰囲気として見せる写真などが候補です。ただし、写真が施工前後の違いや商品の色を伝えているなら、装飾ではありません。見た目の種類だけで決めず、そのページで情報を担っているかを確かめます。
また、画像を表示するためのコードにalt属性が存在しない状態は、空のaltと同じではありません。既存ページを確認するときは、入力欄が空かどうかだけでなく、実際に出力されたHTMLに alt="" があるかを確認すると確実です。
写真、ロゴ、ボタン、文字入り画像、グラフの書き分け
ここからは、よくある画像を「見える内容」「周囲の文章」「リンクの有無」「画像がなければ失われる情報」の順に見ていきます。提案するaltは、そのまま全ページへ流用する定型文ではありません。周囲の文章に合わせて調整してください。
写真：ページの判断材料になっている範囲を伝える
店舗紹介ページに店内写真があり、近くの本文には「相談スペースがあります」とだけ書かれているとします。写真から、入口から相談席まで段差がないことが分かり、それが来店判断に必要なら、「入口から段差なく入れる2席の相談スペース」のように、意味のある特徴を伝えます。
反対に、同じ写真が会社紹介の背景として置かれ、近くの文章ですでに店内の様子を十分説明しているなら、空のaltが適切なこともあります。「明るくておしゃれな店内」のような主観だけを足すより、そのページで必要な情報が何かを考えます。
ロゴ：単独表示か、リンクの機能があるかを分ける
会社名を示すために単独で置いたロゴなら、altは会社名で足ります。ロゴの形や色を詳しく説明する必要は通常ありません。すぐ隣に同じ会社名が文字で表示されているなら、重複を避けるため空のaltを検討します。
ヘッダーのロゴがトップページへのリンクになっている場合は、画像とリンクを一体として考えます。リンクの読み上げ名がほかにないなら、「Bäm トップページ」のように、ブランド名と移動先が分かる表現が候補です。同じリンク内に通常の文字がある、またはリンク自体に読み上げ用の名前が設定されている場合は、画像のaltを空にして重複を避ける設計もあります。
画像だけのリンクやボタン：見た目より操作を伝える
電話の受話器アイコンだけで発信するボタンなら、「受話器のアイコン」ではなく「電話で問い合わせる」とします。PDFの料金表を開く画像なら、「紙のイラスト」ではなく「料金表PDFを見る」としたほうが、押した後に何が起こるか分かります。
ただし、ボタン内に「お問い合わせ」と通常の文字があり、横の矢印画像は飾りである場合、矢印には空のaltを指定します。「お問い合わせ、右矢印」のように不要な読み上げを足さないためです。
文字入り画像：重要な文字を画像の外にも置く
キャンペーンの画像に開催日、対象者、申込期限がまとめられている場合、画像だけで完結させると、画像を見られない人や小さな画面で文字を読みにくい人へ情報が届きません。短い見出し程度ならaltで補えますが、条件や日付が複数あるなら、本文にも同じ内容を通常の文字で掲載します。
たとえば、画像のすぐ後に「相談会は○月○日、対象は開業準備中の方、申込は○月○日まで」のような案内があるなら、画像はその案内と重複するため空のaltにできます。本文がない場合は、まず本文へ情報を移すことを優先します。altへ長い広告文を詰め込むだけでは、読みにくさが残ります。
グラフや複雑な図：短いaltと同等の本文を組み合わせる
グラフは「棒グラフ」だけでは結論が伝わらず、すべての数値をaltへ並べると読みづらくなります。altでは図の目的や要点を短く示し、本文やHTMLの表で、比較対象、変化、数値、注意点を伝えます。
たとえば、問い合わせ経路別の月次件数を示すグラフなら、altは「4月から6月の問い合わせ経路別件数を比較したグラフ」とし、その後の本文で「検索経由は各月○件、紹介経由は各月○件。期間が短いため長期傾向とは断定しない」と説明します。図だけを見なくても同じ判断ができる状態が目標です。
同じ画像でも、置かれた文脈でaltは変わる
altは画像ファイルに永久に固定される説明ではありません。同じ画像を別の場所で使うと、役割が変わることがあります。画像だけを一覧にして一括入力するより、実際のページで前後の文章とリンクを見ながら決める必要があります。
| 使われ方 | 画像がなければ失われるもの | altの考え方 |
|---|---|---|
| 会社紹介で単独表示するロゴ | 会社名 | 会社名を入れる |
| トップページへ戻るリンクのロゴ | リンク先・操作 | ブランド名とトップページへの移動を伝える |
| すぐ隣に会社名が文字であるロゴ | 追加情報なし | 空のaltを検討する |
よくある間違いと、安全な直し方
検索されたい言葉を繰り返す
地域名やサービス名を画像の役割と関係なく繰り返すと、利用者にとって意味の薄い文章になります。まず画像が伝える情報や操作を自然な日本語で書きます。周囲の本文ですでに検索意図へ答えていれば、altへ同じ語を重ねる必要はありません。
すべてを「画像」「写真」「ロゴ」で始める
読み上げ環境では画像であることが別に伝わる場合があるため、「画像：」「写真：」を毎回付ける必要は通常ありません。ただし、図の種類が理解に必要な場合は「売上推移の折れ線グラフ」のように含めても構いません。形式名が判断に役立つかで決めます。
画像内の文字をすべてaltへ写す
短いロゴ名やボタン名なら成立しますが、チラシや図表の全文をaltへ詰め込むと読みにくくなります。長い内容は本文、見出し、箇条書き、表などへ移し、画像を見なくても情報を確認できるようにします。
同じ画像だから同じaltを使い回す
画像が同じでも、商品一覧では商品名、事例記事では施工箇所、リンクでは移動先が重要になることがあります。ページごとに役割を確認します。内容が重複する場所では空のaltになることもあります。
空欄をすべてエラーと考える
装飾画像の alt="" は正しい選択肢です。問題なのは、判断せずに空欄へした状態と、alt属性が出力されていない状態を区別できていないことです。修正時には「なぜ空なのか」を確認できるようにします。
WordPressでは「メディア」と「ページ上の画像」を分けて確認する
WordPressでは、画像をメディアライブラリへ登録したときの代替テキストと、投稿や固定ページに配置した画像ブロックの設定が、いつも同じ状態で反映されるとは限りません。テーマ、ブロック、再利用パターン、プラグインなどによって出力方法が変わるためです。
メディアライブラリの代替テキストは、新しく画像を挿入するときの初期値として使われることがあります。最終的な判断は、画像を置いた投稿・固定ページの画像ブロックで行います。新しく画像を置くときは、まずメディアライブラリで対象画像を特定し、代替テキスト欄を確認します。その後、実際の投稿編集画面で画像ブロックを選び、そのページで必要なaltになっているかを確認します。過去に配置済みの画像は、メディアライブラリだけを書き換えても、既存ページのHTMLが自動で更新されない場合があります。
また、WordPressの「タイトル」「キャプション」「説明」「代替テキスト」は役割が異なります。キャプションは画面に見える補足、代替テキストは画像が担う意味や機能を補うものです。ファイル管理用のタイトルをそのままaltへ複製せず、各項目を使う目的に合わせます。
ヘッダーのロゴ、テーマ設定の背景画像、CSSで表示する装飾、外部プラグインが出力するスライダーなどは、本文の画像ブロックとは別の場所で管理されることがあります。この場合は、公開ページのHTMLと読み上げ名を確認し、必要ならテーマや制作担当者へ相談します。管理画面のどこか一か所を直せばすべて反映される、と決めつけないことが大切です。
公開後は、ブラウザの開発者ツールで対象画像の <img> 要素を確認できます。ChromeやEdgeでは、公開ページ上の画像を右クリックし、「検証」を選ぶ方法があります。表示名や操作方法はブラウザによって異なるため、難しい場合は制作担当者へ確認します。
- 公開ページで画像の前後の文章とリンクの有無を見る。
- 4つの質問を順に確認し、画像がないと失われる重要な意味や操作を判断する。
- WordPressのメディアライブラリと、実際の画像ブロックをそれぞれ確認する。
- 公開後の通常URLでHTMLのaltと、画像が表示されない場合の意味の通り方を確認する。
画像ファイル名とは役割を分ける
画像ファイル名も、画像を整理し、内容を推測するための小さな手がかりにはなります。しかし、ファイル名とaltは同じ項目ではありません。ファイル名は画像資産の識別、altはページ内で画像が担う意味や機能の補完が中心です。
既存サイトで公開済み画像のファイル名を変更すると、画像URLや参照先へ影響する可能性があります。altを直す作業と同時に、安易にファイル名やURLまで変えないようにします。画像ファイル名の付け方や変更時の注意点は、画像ファイル名の付け方を解説した記事で別に確認できます。
公開前に確認したいチェックリスト
- 画像がリンクやボタンなら、移動先や操作が伝わるか
- 画像内だけにある重要な文字を、本文でも確認できるか
- 情報を伝える写真や図なら、必要な要点がaltまたは本文にあるか
- 複雑な図表は、短いaltに加えて同等の説明や表があるか
- 装飾や重複する画像は
alt=""になっているか - alt属性の省略と、意図した空のaltを区別できているか
- 同じ画像を使い回す場合も、各ページの文脈を確認したか
- WordPressのメディアと画像ブロックを両方確認したか
- 公開後の通常URLで、実際に出力されたHTMLを確認したか
迷ったら、画像がない状態で意味が通るかを確かめる
altには、どのサイトにも当てはまる一つの正解文があるわけではありません。まず画像を一時的に見えないものとして考え、近くの文章とリンクだけで、利用者が内容を理解し操作できるかを確認します。足りない情報があればaltや本文で補い、すでに十分なら重複を減らします。
既存ページの画像が多く、どこから見直せばよいか迷う場合は、問い合わせや申込みに近いページから確認すると進めやすくなります。Bämでは、画像だけでなく見出し、本文、ボタンの関係も見ながら、伝わりにくい箇所を一緒に整理します。対応範囲は相談時に確認します。
