HTMLで画像を表示するときに、imgタグの中で「alt」と書かれているのを見かけることがあります。しかし、「alt属性には何を書けばいいの？」「空のaltでもいいの？」「title属性とは何が違うの？」「アイキャッチ画像やバナー画像にもaltは必要なの？」と疑問に感じる方も多いのではないでしょうか。alt属性は、画像の内容や役割をテキストで伝えるための属性で、画像が表示されないときや、スクリーンリーダーでページを読むときに重要な役割を持ちます。
この記事では、HTMLのalt属性の意味や基本的な書き方、title属性との違い、画像の種類ごとのalt設定例、SEOやアクセシビリティで意識したいポイントを初心者向けにわかりやすく解説します。実務で迷いやすいアイキャッチ画像・ロゴ・バナー画像・アイコンの扱いも紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。
HTMLのalt属性とは？
alt属性は、画像の代替テキストを指定するためのHTML属性です。imgタグに設定し、画像が表示されない場合や、スクリーンリーダーで画像内容を伝える場合に使われます。
alt属性の役割
alt属性は、画像が何を表しているのか、または画像がどのような役割を持っているのかをテキストで伝える役割があります。
<img src="classroom.jpg" alt="教室でプログラミングを学ぶ学生">この例では、画像の内容を「教室でプログラミングを学ぶ学生」と説明しています。alt属性は、画像を見ることができない状況でも、画像が伝えている情報を補うために重要です。
alt属性はimgタグに書く
alt属性は、画像を表示するimgタグの中に書きます。
<img src="html-logo.png" alt="HTMLのロゴ">imgタグでは、src属性で画像ファイルを指定し、alt属性で画像の代替テキストを指定します。src属性は画像の場所、alt属性は画像の意味や役割を伝えるためのものです。
alt属性は通常の画面には表示されない
alt属性に書いたテキストは、通常のブラウザ表示では画像の上に表示されません。画像が読み込めない場合や、スクリーンリーダーなどの支援技術でページを読む場合に使われます。
alt属性は、見た目を変えるためではなく、画像の意味をテキストで補うために設定する属性です。画像の説明を画面上に表示したい場合は、figcaptionタグや本文で説明する方法を検討しましょう。
HTMLでalt属性を使う方法
alt属性は、imgタグに「alt=”画像の説明”」という形で記述します。ただし、画像の目的によって、具体的な説明を書く場合と、空のalt属性を設定する場合があります。
基本的な書き方
alt属性の基本的な書き方は、「<img src=”画像URL” alt=”画像の説明”>」です。
<img src="school.jpg" alt="教室でプログラミングを学ぶ学生">この例では、画像を見られない人にも、どのような画像なのか伝わりやすくなります。alt属性は長く書けばよいわけではなく、画像がページ内で伝えている意味を簡潔に書くことが大切です。
意味のある画像には内容を説明するaltを書く
記事内容の理解に必要な画像には、画像の内容や役割が伝わるalt属性を設定しましょう。
<img src="html-structure.png" alt="HTML文書がheadタグとbodyタグで構成されている図">画像が本文の理解に関わる場合は、画像を見なくても意味が伝わる説明を書くことが大切です。図解やグラフのように情報量が多い画像は、alt属性だけで説明しきろうとせず、本文でも要点を補足しましょう。
装飾画像には空のaltを使うことがある
意味を持たない装飾画像には、空のalt属性を設定することがあります。
<img src="decoration.png" alt="">このように書くと、スクリーンリーダーが装飾画像を読み飛ばしやすくなります。装飾画像に無理やり説明を入れると、かえって読み上げの邪魔になる場合があります。
リンク画像にはリンク先が分かるaltを書く
画像がリンクになっている場合は、画像そのものの見た目よりも、リンク先や操作内容が分かる説明にすることが大切です。
<a href="/contact/">
<img src="contact-button.png" alt="お問い合わせページへ移動">
</a>リンク画像のalt属性は、クリックした後に何が起こるのかが伝わる内容にしましょう。「青いボタン」ではなく「資料請求ページへ移動」「お問い合わせフォームへ移動」のように、機能を伝えるのがポイントです。
alt属性とtitle属性の違い
初心者の方が混同しやすいのが、alt属性とtitle属性です。どちらもテキストを書く属性ですが、目的は大きく異なります。
alt属性は画像の代替テキスト
alt属性は、画像が表示されない場合や、画像を見られないユーザーに画像の意味を伝えるための代替テキストです。
<img src="seminar.jpg" alt="Web制作セミナーで講師が説明している様子">alt属性は、画像の内容や役割を代わりに伝えるためのものです。画像がページ理解に必要な場合は、alt属性を適切に設定しましょう。
title属性は補足情報を示す属性
title属性は、要素に関する補足情報を指定するグローバル属性です。ブラウザによっては、マウスを重ねたときのツールチップとして表示されることがあります。
<img src="seminar.jpg" alt="Web制作セミナーの様子" title="2026年6月開催のセミナー">ただし、title属性はスマートフォンやキーボード操作、スクリーンリーダー利用時に伝わりにくい場合があるため、重要な情報をtitle属性だけに頼るのは避けましょう。MDNでも、title属性はアクセシビリティ面で注意が必要な属性として説明されています。
alt属性とtitle属性の使い分け
alt属性とtitle属性は、次のように使い分けると分かりやすくなります。
- alt属性：画像が伝える内容や役割を書く
- title属性：要素の補足情報を書く場合に使う
- 重要な情報：title属性だけに入れず、本文やalt属性で伝える
画像の意味を伝える目的では、title属性ではなくalt属性を優先して設定するのが基本です。title属性はツールチップ目的で安易に使うのではなく、本当に補足情報が必要な場合だけ検討しましょう。
画像の種類別に見るalt属性の書き方
alt属性は、すべての画像で同じ書き方をするわけではありません。画像がページ内でどのような役割を持つかによって、適切な代替テキストは変わります。
アイキャッチ画像・ファーストビュー画像のalt
記事のアイキャッチ画像やファーストビューのメインビジュアルは、ページの印象を作る大切な画像です。ただし、必ず長いaltを入れればよいわけではありません。
<img src="html-learning-main.jpg" alt="ノートパソコンでHTMLを学習する人">アイキャッチ画像が記事内容を補足している場合は、画像の内容が分かるaltを設定しましょう。一方で、同じ情報がすぐ近くの見出しや本文で十分に説明されていて、画像が装飾に近い場合は、空のaltを検討することもあります。
「アイキャッチだから必ずキーワードを入れる」と考えるのではなく、その画像が読者に何を伝える役割なのかで判断しましょう。
ロゴ画像のalt
ロゴ画像では、会社名やサイト名が伝わるaltを設定するのが基本です。
<img src="logo.png" alt="忍者CODE">ロゴがトップページへのリンクになっている場合は、リンク先が分かるように書く方法もあります。
<a href="/">
<img src="logo.png" alt="忍者CODEトップページへ">
</a>ロゴ画像のaltは、ロゴの見た目ではなく、サイト名やリンクの役割が伝わる内容にしましょう。
バナー画像のalt
バナー画像は、実務でalt設定に迷いやすい画像です。特に、画像内に「無料相談はこちら」「今だけ30%OFF」などの文字が入っている場合は注意が必要です。
<a href="/campaign/">
<img src="campaign-banner.jpg" alt="今だけ30%OFFのWeb制作講座キャンペーンを見る">
</a>制作現場では、バナー画像に重要な文字情報が含まれている場合、その内容やクリック後の行き先が伝わるaltを書くのが基本です。画像内の文字が本文に書かれていない場合は、alt属性で必要な情報を補いましょう。
バナー画像に「詳しくはこちら」と書かれているだけの場合、altも「詳しくはこちら」だけにするとリンク先が分かりにくくなります。「無料相談ページへ移動」「キャンペーン詳細を見る」のように、行動や目的が分かる表現にするのがおすすめです。
アイコン画像・アイコンフォントのalt
検索アイコン、電話アイコン、SNSアイコンなどは、見た目だけではなく機能を伝えることが大切です。
<button type="button">
<img src="search-icon.png" alt="検索">
</button>アイコンフォントやSVGを使っていてimgタグではない場合は、alt属性ではなく、aria-labelやテキストを使って意味を伝えることがあります。
<button type="button" aria-label="検索">
<span class="icon-search"></span>
</button>アイコンが操作ボタンになっている場合、見た目だけで意味を伝えるのは避けましょう。「検索」「メニューを開く」「電話をかける」など、機能が分かる名前を用意することが大切です。
グラフ・図解画像のalt
グラフや図解のように情報量が多い画像は、alt属性だけで完全に説明しようとすると長くなりすぎます。
<img src="graph.png" alt="HTML学習者数が年々増加していることを示す棒グラフ">複雑な図表では、alt属性に要点を書き、詳しい説明は本文や表で補足するのがおすすめです。
alt属性とSEO・アクセシビリティの関係
alt属性は、アクセシビリティの観点で特に重要です。また、検索エンジンが画像内容を理解する手がかりの一つになるため、画像SEOを考えるうえでも適切に設定したい属性です。
画像を見られない人にも内容を伝えられる
スクリーンリーダーを使っている人は、画像そのものを見る代わりにalt属性の内容を聞くことがあります。
<img src="chart.png" alt="HTML学習者の増加を示す棒グラフ">alt属性を書くことで、画像を見られない状況でも情報を伝えやすくなります。これはWebアクセシビリティの基本でもあります。
画像が表示されないときの補足になる
通信環境や画像パスの間違いによって画像が表示されない場合、alt属性が代わりの説明として役立つことがあります。
画像ファイルの読み込みに失敗しても、alt属性があれば内容の手がかりを残せます。特に、ボタン画像やリンク画像のように操作に関わる画像では重要です。
画像SEOの手がかりになる
検索エンジンは画像の内容を理解するために、alt属性や周辺テキスト、ファイル名などを参考にすることがあります。
alt属性には、画像の内容や役割を自然な日本語で説明することが大切です。キーワードを入れる場合も、画像と関係のある範囲にしましょう。
SEO目的でキーワードを大量に詰め込むalt属性は、読者にも検索エンジンにも不自然に見えるため避けましょう。
公式情報も確認しておく
alt属性はアクセシビリティと関係が深いため、一次情報に近い資料も確認しておくと理解が深まります。
- W3C WAI Images Tutorial：画像の種類ごとの代替テキストの考え方を確認できます。
- W3C WAI alt Decision Tree：altを書くべきか、空altにするべきかの判断に役立ちます。
- MDN Web Docs img要素：imgタグやalt属性の仕様を確認できます。
迷ったときは、画像が「情報を伝える画像」「装飾画像」「リンクやボタンとして機能する画像」のどれに近いかを考えると判断しやすくなります。
alt属性を書く際の注意点
alt属性は短いテキストですが、書き方によって分かりやすさが大きく変わります。画像の目的を考えながら、必要な情報を自然に伝えることが大切です。
「画像」「写真」だけで終わらせない
alt属性に「画像」や「写真」だけを書くと、内容が伝わりません。
<img src="office.jpg" alt="画像">上記のようなaltでは、何の画像なのか分かりにくくなります。
<img src="office.jpg" alt="パソコンで作業するWeb制作チーム">このように、画像の内容が伝わる説明にしましょう。
長すぎる説明にしない
alt属性は、画像の内容を簡潔に伝えるためのものです。長文を入れすぎると読み上げ時に分かりにくくなることがあります。
alt属性は、必要な内容を短く自然にまとめることが大切です。詳しい説明が必要な図表では、本文側で補足する方法もあります。
画像内テキストを無視しない
バナーや図解の中に重要な文字が含まれている場合、その文字情報をどう伝えるかを考える必要があります。
<img src="banner.jpg" alt="無料体験レッスン受付中。今すぐ申し込む">画像内の文字が本文に存在しない場合、alt属性にも書かないと、画像を見られない人には重要情報が伝わらない可能性があります。制作現場では、バナー内の重要な文言やCTAをaltに反映するか、本文側に同じ情報を置くかを確認します。
画像の目的に合わせて書く
同じ画像でも、使う場所によってalt属性の書き方が変わることがあります。例えば、ロゴ画像がトップページへのリンクになっている場合は、ロゴの見た目ではなくリンク先が伝わるaltにします。
<a href="/">
<img src="logo.png" alt="サンプルサイトのトップページへ">
</a>alt属性は、画像がそのページでどのような役割を持っているかを考えて設定しましょう。
実務で使うalt属性のチェックリスト
実際のWeb制作では、alt属性を機械的に入れるのではなく、画像の役割を確認しながら設定します。制作会社やWeb制作現場では、公開前に次のようなポイントを確認することが多くあります。
公開前に確認したいポイント
- 画像が本文理解に必要なら、内容が伝わるaltになっているか
- 装飾画像なら、空のalt属性にして読み上げの邪魔をしていないか
- リンク画像なら、リンク先や操作内容が分かるaltになっているか
- バナー内の重要な文字情報が、altまたは本文で伝わっているか
- SEO目的で不自然にキーワードを詰め込んでいないか
- title属性だけに重要情報を入れていないか
alt属性は「画像の説明」ではなく、「その画像がページ内で担っている意味や機能」を伝えるものとして考えると実務でも判断しやすくなります。
制作現場でのプロのTips
バナー画像やCTA画像では、画像内に文字情報が入っていることがよくあります。例えば「無料相談はこちら」「期間限定キャンペーン」などです。
実際のWeb制作現場では、バナー画像に重要なテキストが含まれている場合、altにはその文字情報とリンク先の目的が伝わる内容を入れるのが基本です。ただし、画像内の文字がすぐ近くの本文に完全に書かれている場合は、重複して読み上げられないよう空altを検討することもあります。
大切なのは、画像を見られない人にも同じ行動や判断ができるかどうかです。alt属性はSEOのためだけではなく、ユーザー体験を落とさないための設定として考えましょう。
まとめ
本記事では、HTMLのalt属性について解説しました。
alt属性は、画像の代替テキストを指定するためのHTML属性です。画像が表示されない場合や、スクリーンリーダーで画像内容を伝える場合に役立ちます。
意味のある画像には内容や役割が分かるalt属性を設定し、装飾目的の画像には空のalt属性を使うことがあります。リンク画像では、クリック後の移動先や操作内容が伝わるaltにすることが大切です。
また、alt属性とtitle属性は役割が異なります。title属性は補足情報として使われることがありますが、スマートフォンや支援技術で伝わりにくい場合があるため、重要な情報をtitle属性だけに頼るのは避けましょう。
alt属性を書く際は、画像の内容だけでなく、その画像がページ内で果たしている目的を考えることが重要です。アイキャッチ画像、ロゴ、バナー画像、アイコン画像など、それぞれの役割に合わせて適切な代替テキストを設定しましょう。
