alt属性とは？画像の代替テキストの書き方と具体例

画像と説明文の準備を表すAI生成イメージです。実際の顧客資料や作業実績ではありません。

alt属性は、画像の代わりに内容や働きを伝える文字を指定するものです。画像に写っている物をすべて並べるのではなく、そのページで画像が何を伝えているかに合わせて書きます。この記事では、中小企業のWeb担当者向けに、書き方の具体例、空にする画像の判断、制作担当へ渡す修正メモと確認方法をまとめます。

alt属性とは、画像の役割を文字で伝えるもの

ホームページに写真を入れるとき、管理画面に「代替テキスト」という欄が出てくることがあります。そこに書く文章は、画像を見られない状況でも、画像が担っている情報や機能を理解できるようにするためのものです。画面の文章などを音声で伝えるスクリーンリーダーの利用者にとっても、内容を知る手がかりになります。

出典：画像の SEO ベスト プラクティス | Google 検索セントラル  |  Documentation  |  Google for Developers

HTMLで画像を置くimg要素には、alt属性で代替テキストを指定できます。たとえば、説明用の架空の製品写真なら「alt="作業台の脚を内側へ折りたたんだ状態"」のように書きます。ここでaltは属性の名前、引用符の中が代替テキストです。一般的に「altタグ」と呼ばれることもありますが、画像の指定に添える属性として捉えると整理できます。

代替テキストは、画像の下に表示するキャプションとは別です。キャプションは、出典や撮影条件などを画面上で説明するときにも使います。すぐ近くの文章がすでに画像の情報を十分に伝えている場合は、その関係も含めてaltを考えます。「説明文があるから常に不要」「画像があるから必ず説明を追加」と一律には決めません。

出典：An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

SEOの観点では、Googleは代替テキストだけでなく、画像を認識する仕組みやページの内容も使って画像のテーマを理解すると説明しています。検索エンジンには画像が全く分からないのでキーワードを詰めればよい、という考え方は適切ではありません。まず、ページを使う人に必要な情報が伝わる文章にします。

出典：画像の SEO ベスト プラクティス | Google 検索セントラル  |  Documentation  |  Google for Developers

書く前に、画像の役割と周りの文章を確認する

画像ファイルだけを開いて説明を考えると、ページで必要な情報が抜けたり、関係のない細部まで書いたりしがちです。掲載予定の見出し、本文、キャプションと一緒に見て、何のためにこの画像を置くのかを先に決めましょう。W3Cの画像ガイドも、画像を載せる理由や文脈によって扱いを判断する考え方を示しています。

出典：An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

出典：Informative Images | Web Accessibility Initiative (WAI) | W3C

この表は、写真・ロゴ・アイコンといったファイルの見た目だけで分類するものではありません。会社のロゴでも、単に名前を示す場合と、トップページへ戻るための唯一のリンク表示になっている場合では役割が変わります。写真も、製品の使い方を示すこともあれば、背景の雰囲気を整えるだけのこともあります。

制作担当に文章を頼む場合も、画像だけを渡すより「折りたたみ方を説明する節に使う」「資料ページへ進むリンクに使う」と用途を添えると判断しやすくなります。同じ写真を別のページで使うときは、説明をそのまま複製してよいかを見直します。画像ごとに違う文を書くこと自体が目的ではなく、掲載先の意味に合わせることが目的です。

alt属性の書き方を、同じ製品の例で考える

ここからの製品と掲載場面は、書き方を学ぶための架空の例です。実際の商品仕様や顧客の成果ではありません。「天板が白く、脚を内側へ折りたためる作業台」を、全体・収納状態・部品の拡大などで撮影したと想定します。各写真がページで伝える内容に合わせて、文案を考えてみます。実際の運用では、写真に写っていることや確認できる仕様だけを使ってください。

「製品画像」「写真1」「IMG_1234」のような名前だけでは、その画像を見られない人が、色の比較なのか収納の説明なのかを知ることはできません。一方で、背景の壁、床、撮影者の位置などをすべて書くと、肝心の特徴をつかみにくくなります。ページの説明を補う部分へ絞ります。

たとえば、収納方法の説明なのに「人気の高性能作業台、おすすめ、格安、業務用」と書いても、脚を折った状態は伝わりません。販売したい言葉と、画像の代わりになる言葉を混同しないようにしましょう。「人気」「安全」「使いやすい」といった評価や性能は、写真を見ただけで確かめられる情報でもありません。

必要な長さは、伝える情報によって変わります。本記事では、すべての画像に共通する最適文字数を設けません。Googleの画像SEOガイドが求めているのは、ページの内容に沿った役立つ説明であり、キーワードの羅列は避けるよう案内しています。文字数を埋めるより、前後の文章と合わせて過不足がないかを点検します。

出典：画像の SEO ベスト プラクティス | Google 検索セントラル  |  Documentation  |  Google for Developers

社内で確認するときは、画像をいったん見ずに「見出し→本文→代替テキスト→次の本文」の順で読んでみます。どの部分の話か分からなければ対象を補い、すでに説明した内容を長く繰り返していれば整理します。この読み合わせは内容を考えるための方法であり、実際の読み上げ環境での確認をすべて代用するものではありません。

リンク画像・文字入り画像・複雑な図の書き分け

画像を選ぶと別のページに進む場合、見た目だけの説明では操作の意味が伝わらないことがあります。たとえば「青い四角の中に白い矢印」では、どこへ移動するかが分かりません。画像だけがリンクの内容なら、「製品カタログのダウンロードページへ」のように行き先を説明します。実際にそのページへ移動する場合の例であり、直接ファイルを取得するリンクなら、その動作に合わせます。

出典：Functional Images | Web Accessibility Initiative (WAI) | W3C

ただし、画像のあるリンクをすべて同じように扱うわけではありません。同じリンクの中に「製品カタログをダウンロード」という文字があり、横の矢印画像がそれ以上の情報を持たないなら、画像のaltを空にして重複を避ける方法があります。W3Cも、リンク内の文字がすでに目的を伝えている場合と、画像だけがリンクになっている場合を区別しています。

出典：Functional Images | Web Accessibility Initiative (WAI) | W3C

ここで大事なのは「近くに文字がある」だけで判断しないことです。画像の下に見出しがあっても、その見出しがリンクの外にある場合、画像だけのリンクを選ぶ場面では行き先の説明が足りないことがあります。リンクのまとまりが分からないときは、制作担当に「画像と文字は同じリンクに含まれていますか」と確認しましょう。

文字入り画像では、ほかに示されていない必要な文字情報を伝えます。たとえば「見学受付は平日」という案内が画像にしかないなら、その条件を伝える必要があります。見学ページへ進むリンクでもあるなら、条件と行き先が分かるように整理します。長い案内や重要な条件は、画像だけに閉じ込めず、ページ上の文章としても読める形を検討します。

出典：An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

グラフや工程図では、短いaltだけで全体を説明し切れないことがあります。W3Cは、画像を特定する短い説明と、重要な情報を伝える詳しい説明を組み合わせる方法を示しています。数値や順序、関係など、図を見ることで得られる内容を本文や表でもたどれるようにします。

出典：Complex Images | Web Accessibility Initiative (WAI) | W3C

「グラフ」「フローチャート」と種類を示すだけでは、何の図か分からないことがあります。また「数値は表参照」と書く場合は、その表を見つけられる案内と実際の表が必要です。図の題名や読み取ってほしい内容を整理し、どこで詳細を確認できるかを合わせて示しましょう。

装飾画像のaltは空にする。属性の省略とは区別する

区切り線や背景の模様など、見た目を整えるだけで情報や機能を持たない画像は、説明を足すとかえって読み進める妨げになることがあります。img要素で置いた装飾画像は、alt=""のように値を空にするのが基本です。W3Cの判断表でも、装飾のみの画像や、周囲の文字と情報が重複する場合に空の値を使う例が示されています。

出典：An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

「空の値を設定すること」と「alt属性自体を付けないこと」は別です。制作担当への依頼では「説明不要」だけで終わらせず、「装飾として扱い、alt=""になっているか確認」と書くと意図が伝わります。管理画面の入力欄が空でも、公開ページでどのようなHTMLになるかは、使っている仕組みで確認する必要があります。

反対に、問い合わせへ進む画像だけのボタンや、製品の違いを示す写真まで、一括で空にしてはいけません。ファイルが小さい、アイコンである、同じ画像を何度も使っている、といった理由だけでは装飾と判断できません。ページ内で必要な情報や操作が失われないかを見ます。

判断に迷う例があれば、「この画像を外しても本文の意味が変わらないか」「選べる場所の目的が分かるか」を分けて確認します。文章の意味は変わらなくても、操作用の画像を取り除くとリンクの目的が不明になることがあります。内容と機能の両方を確かめてから空にする、という順番を守りましょう。

設定したら、掲載ページで内容と使い方を確かめる

まずは、自社で内容を確認できる1ページを選び、画像の位置と用途を一覧にします。管理画面で代替テキストを設定できる場合は該当欄を使い、編集箇所が分からない場合は制作担当へ依頼します。WordPressなどを使っていても、画像を管理する場所と、記事に配置した画像の設定がどこまで連動するかは、実際の掲載箇所で確かめてください。

この表の記入例も架空のものです。実際の依頼では、対象ページと画像の位置を自社の情報に置き換えます。「すべての画像へ同じキーワードを追加」といった一括依頼よりも、まず1ページで判断をそろえ、その後にほかのページへ広げるほうが、意図を確かめながら進められます。

確認は、設定の有無と文章の妥当性を分けます。制作担当には、公開ページの該当するimg要素にaltがあり、指定した値または空の値が反映されているかを確認してもらいます。そのうえで、本文との重複、説明対象の取り違え、リンク先と説明の不一致を点検します。属性があるというだけで、説明が適切だとは判断できません。

PCとスマホで表示する画像やリンクの構成が変わるサイトでは、両方の掲載箇所を確認します。見た目で画像が読み込めることに加え、読み上げ環境でも情報や操作の目的が伝わるかを確認すると、入力した文章と実際の使われ方の違いを見つけられます。画面に画像が見えているだけでは、代替テキストの確認を終えたことにはなりません。

修正後の検索順位やアクセス数だけで、この作業の成否をすぐに決めないことも大切です。まず、必要な情報が伝わり、リンクの意味が分かる状態になったかを確認します。画像の説明を直せば一定期間で順位や問い合わせが増える、という保証はありません。SEO全体の点検へ進む場合は、関連記事の「SEO内部対策」で本文やリンクなども確認できます。

代替テキストの見直しは、サイト全体の使いやすさを点検する一部です。文字の読みやすさ、配置、リンクの分かりやすさも一緒に整理し、変更した箇所と確認日を残しましょう。更新依頼の伝え方は「ホームページ更新を外注する前に」の依頼書、画面の読みやすさは「見やすいホームページの作り方」でも具体化できます。

よくあるご質問