alt属性とは？imgタグの代替テキストの書き方を初心者向けに解説

HTMLで画像を表示するときは img タグを使います。そのときによく出てくるのが alt 属性です。画像タグの例を見るとほぼ必ず書かれていますが、「何を書けばいいのか」「空でもいいのか」で迷いやすい属性でもあります。

結論からいうと、alt属性とは、画像が見えない・読み上げられる・読み込めないときに、画像の意味を文字で補うための属性です。SEOのためだけにキーワードを詰める場所ではなく、画像が伝えている内容をテキストで伝えるために使います。

まず見てください：alt属性は画像の意味を文字で補う
結論：alt属性は画像の代替テキストを書く場所
alt属性が必要な理由
alt属性の基本的な書き方
画像の種類ごとにaltの書き方を変える
実務で使うalt属性の例
title属性やファイル名との違い
alt属性でよくあるミス
まとめ

まず見てください：alt属性は画像の意味を文字で補う

alt属性の役割は、画像の代わりになる説明文を用意することです。まずは、imgタグにalt属性を書いたコードと、ブラウザ側で画像の意味がどう補われるかを並べて見てみましょう。

この画像で大切なのは、alt属性が「画像ファイルの名前」ではなく「画像が伝えている意味」を補う点です。左側の alt="ログイン画面の入力例" は、右側の画像が見えない・読み上げられる場面でも、何の画像なのかを伝えるための文章です。装飾だけの画像なら、例のように alt="" と空にすることもあります。

alt属性は「この画像が見えなかったら、何と説明すれば伝わるか」で考えると書きやすいです。

結論：alt属性は画像の代替テキストを書く場所

alt 属性は、imgタグに書く代替テキストです。代替テキストとは、画像そのものが使えないときに、画像の役割や内容を文字で伝えるための説明です。

<img src="contact-form.png" alt="問い合わせフォームの入力例">

この例では、画像が「問い合わせフォームの入力例」を示していることをalt属性で伝えています。画像ファイル名の説明ではなく、ページを読んでいる人にとって必要な意味を言葉にしている点が重要です。

alt属性が必要な理由

alt属性が必要な理由は、大きく3つあります。どれも「画像が見える人だけに情報が偏らないようにする」ためのものです。

画像が読み込めないときに内容を補える
スクリーンリーダーなどで画像の意味を伝えやすくなる
検索エンジンにも画像の内容を理解してもらいやすくなる

ただし、SEOだけを目的に不自然なキーワードを詰め込むのは逆効果です。alt属性は、あくまで画像の代わりになる説明です。ページの内容と関係ない言葉や、同じキーワードの連続は避けます。

alt属性の基本的な書き方

基本形は、imgタグの中に alt="説明文" を書きます。説明文は長すぎず、画像の意味が伝わる自然な日本語にします。

<img src="login-screen.png" alt="ログイン画面でメールアドレスとパスワードを入力する例">

このように書くと、画像が表示されない状況でも「ログイン画面の入力例を示す画像だ」と分かります。単に alt="画像" や alt="login-screen" とするより、読者にとって意味が伝わりやすくなります。

画像の種類ごとにaltの書き方を変える

alt属性は、すべての画像に同じテンションで説明を書けばよいわけではありません。画像がページ内でどんな役割を持っているかによって、書き方を変えます。

画像の種類	altの考え方	例
内容を伝える画像	画像から分かる重要な情報を書く	`alt="商品Aの正面写真"`
操作説明の画像	何の画面・手順を示すかを書く	`alt="会員登録フォームの入力例"`
リンクになっている画像	クリック先や操作の意味を書く	`alt="資料をダウンロードする"`
装飾だけの画像	空のaltにすることがある	`alt=""`

装飾画像に長い説明を入れると、読み上げ時に余計な情報が増えてしまいます。逆に、内容を伝える画像のaltが空だと、画像を見られない人に必要な情報が届きません。画像の役割を見て、説明するか空にするかを判断します。

実務で使うalt属性の例

ブログや企業サイトでは、alt属性を書く場面が多くあります。たとえば記事内の説明画像、商品写真、サービス紹介の図、操作手順のスクリーンショットなどです。

<img src="html-form-example.png" alt="HTMLフォームで氏名とメールアドレスを入力する例">

<img src="service-flow.png" alt="問い合わせから契約までの流れを示す図">

<img src="decoration-line.png" alt="">

1つ目と2つ目は、画像そのものが情報を持っているため説明を書いています。3つ目は装飾線のような画像を想定しているため、空のaltにしています。すべての画像へ機械的に文章を入れるのではなく、画像の役割に合わせるのがポイントです。

title属性やファイル名との違い

alt属性は、title属性や画像ファイル名とは役割が違います。混同しやすいので、ここで整理しておきます。

項目	役割	代替テキストとして使えるか
`alt`	画像の代替テキスト	使える。ここが本命
`title`	補足情報として表示されることがある	altの代わりにはしない
ファイル名	画像ファイルを識別する名前	読者向け説明とは別物

たとえば img001.png というファイル名では、画像の意味はほとんど伝わりません。title属性も補足には使えますが、alt属性の代わりとして考えないほうが安全です。