alt属性

1. alt属性の概要と目的

alt属性（Alternative Text Attribute）は、HTMLの <img> タグなどに指定し、画像の内容をテキストで説明するための属性です。

Webページを閲覧している際、ネットワークの不具合や画像の読み込みエラーによって画像が表示されない場合や、視覚障害のあるユーザーがスクリーンリーダー（音声読み上げソフト）を利用してWebページを閲覧する場合に、画像がどのような内容であるかを正確に伝える役割を持ちます。

この章では、alt属性 がどのようなものなのか、また、なぜ知っておく必要があるのかを確認します。

alt属性とは？

alt属性 とは、HTMLの画像要素（<img>）に対して、その画像の代わりとなるテキスト（代替テキスト）を指定する属性です。

例えば、次のようなHTMLコードを考えてみます。

<img src="logo.png" alt="サイトのロゴマーク">

通常、ブラウザは src で指定された画像を読み込んで表示します。しかし、何らかの理由で画像が表示されない状況では、ブラウザは alt属性 に指定された「サイトのロゴマーク」というテキストを画像の代わりに表示します。

また、スクリーンリーダーを使用しているユーザーに対しては、画像そのものではなく alt属性 のテキストが読み上げられます。

このように、画像の内容をテキストとして補足し、すべてのユーザーが情報を正しく得られるようにする点が alt属性 の大きな特徴です。

alt属性はどのような場面で登場するのか？

alt属性 は、HTMLで画像を挿入するあらゆるWebページやドキュメント作成の場面で登場します。

例えば、次のような場面が代表的な利用例です。

画像の読み込み失敗時： 接続環境の悪化やリンク切れなどにより画像が表示されないとき、代替テキストとして表示される。
音声読み上げ（アクセシビリティ）： 視覚障害のあるユーザーがスクリーンリーダーでWebページを閲覧する際、画像の内容を音声で理解できるようにする。
検索エンジン最適化（SEO）： 検索エンジンのクローラーが画像の内容をテキストとして認識し、画像検索などのインデックス登録に役立てる。

Web開発者やマークアップエンジニア、Webデザイナーにとって、アクセシビリティと品質を担保するために不可欠な属性です。

2. alt属性の仕組み・規格・主な特徴

alt属性 は、HTMLの仕様（WHATWG HTML Living Standard）において、<img> タグや <area> タグ、<input type="image"> タグで使用できる標準的な属性として定義されています。

ここでは、具体的な記述方法や、文脈に応じた適切な使い分けを確認します。

alt属性は原則として必須

まず押さえておきたいのが、alt属性 は <img> において原則として必須の属性であるという点です。仕様上、省略が許されるのは、<figure> 内で <figcaption> によって内容が説明されている場合など、ごく限られた条件のみです。

ここで重要なのが、「alt を書かないこと」と「alt="" と空で書くこと」は、まったく意味が違うという点です。

alt=""：「この画像には伝えるべき情報がない」という明示的な宣言。支援技術は画像の存在ごと読み飛ばします。
alt 自体がない：画像の意味が不明なままとなり、スクリーンリーダーは代替情報を探してファイル名やURLを読み上げてしまうことがあります。

装飾画像に対して「読み上げさせたくないから属性ごと省く」という判断は誤りで、正しくは alt="" を明示します。

代替テキストの基本的な記述ルール

alt属性 に記述するテキストは、画像が持つ意味や役割を簡潔に表現する必要があります。判断に迷ったときは、次のルールを目安にするとよいでしょう。

「画像をテキストに置き換えても同じ情報が伝わるか」を基準にする： 見た目の描写ではなく、その画像がページ上で果たしている役割を書きます。
「〜の画像」「写真：」などの前置きは不要： スクリーンリーダーは画像であることを自動的に読み上げるため、こうした語は冗長になります。
画像内に文字がある場合は、その文字を代替テキストに含める： バナーやボタン画像など、画像内のテキストが情報の中心である場合は、その文言をそのまま記述します。
簡潔にまとめる： 代替テキストは一息で読み上げられる程度の長さが目安です。詳細な説明が必要なグラフなどは、本文や <figcaption>、表などで情報を補います。
本文と重複させない： 直前・直後の本文に同じ説明がある場合は、二重に読み上げられてしまうため alt="" とすることも検討します。

文脈に応じた適切な指定方法

alt属性 の値は、その画像がWebページ上でどのような役割を持っているかによって使い分けます。

情報を持つ画像（グラフや図解など）： 画像が伝えている内容を簡潔にテキスト化する。
リンクに含まれる画像： リンク先の遷移先や目的をテキスト化する（例：alt="トップページへ戻る"）。
装飾目的の画像（意味を持たないアイコンなど）： スクリーンリーダー等で読み上げる必要がないため、空の alt="" を指定して読み飛ばさせる。

同じ画像であっても、使われる文脈によって適切な代替テキストは変わります。例えば同じロゴ画像でも、ヘッダーでトップページへのリンクになっている場合は alt="〇〇株式会社トップページ"、本文中の装飾として置かれている場合は alt="" が適切、といった具合です。

記述・構造の具体例

実際のHTMLコード内で alt属性 がどのように記述されるのか、基本的な例を確認します。

【記述・構造（または設定）のイメージ】

※実際のコード、記法、あるいは実装時の基本的な記述例です。

<!-- 情報を持つ一般的な画像 -->
<img src="sales-chart.png" alt="2026年第1四半期の売上推移グラフ">

<!-- 装飾目的の画像（空のaltを指定） -->
<img src="decoration-line.png" alt="">

<!-- リンクアイコンの画像 -->
<a href="/cart/"><img src="cart-icon.png" alt="ショッピングカートを見る"></a>

このように、画像の用途に合わせて適切な alt属性 を設定することで、ブラウザや支援技術に対して正確な情報を伝えることができます。

3. alt属性が使われる理由・メリットと活用シーン

alt属性 が利用される大きな理由は、画像という視覚的な情報を補完し、アクセシビリティやユーザビリティを大きく向上させられるからです。

特に、Webアクセシビリティの基準（WCAGなど）を満たす上でも欠かせない要素となっています。

alt属性を使うメリット

alt属性 を適切に設定することで、次のようなメリットが得られます。

アクセシビリティの向上： 視覚障害を持つユーザーがスクリーンリーダーを通じて画像の内容を把握できるようになる。
ネットワークエラー時のフォールバック： 画像が表示されなくても、テキストによって何が掲載されていたのかをユーザーが理解できる。
SEO（検索エンジン最適化）の効果： 検索エンジンのクローラーが画像の内容を正しく理解しやすくなり、画像検索での露出向上につながる。

ただし、SEOを意識するあまり代替テキストにキーワードを詰め込むのは逆効果です。検索エンジン側もキーワードの羅列を避けるよう案内しており、何よりスクリーンリーダーの利用者にとっては意味の通らない文字列が読み上げられることになります。あくまで「画像の代わりになる説明」を書いた結果として、SEO上の効果も得られると考えるのが適切です。

alt属性が活用される場面

実際のWeb制作やシステム運用では、以下のようなシチュエーションで重要視されます。

コーポレートサイト・ECサイトの製品画像： 商品の写真や仕様図など、購入判断に必要な情報をテキストとしても補足する。
オウンドメディアやブログの記事内画像： 記事内容を補足する図表や写真について、文脈に沿った説明を付与する。
アクセシビリティ監査・品質管理： 公共性の高いWebサイトや企業の公式サイトにおいて、JIS X 8341-3やWCAGのガイドラインに準拠するための必須チェック項目として扱われる。

4. alt属性の導入・運用時の注意点と課題

alt属性 はシンプルな仕組みである一方、運用時によくある誤った設定や、アクセシビリティを損なう原因となる落とし穴が存在します。

ここでは、実務上注意すべきポイントを説明します。

よくあるミス・設定ミス

よくある問題の一つが、すべての画像に対して「画像」「写真」「image」といった意味のない単語や、ファイル名をそのまま alt属性 に入力してしまうミスです。

また、情報を持たない単なるデザイン上の装飾画像に alt 自体を付け忘れてしまい、スクリーンリーダーが画像ファイル名（例：bg-header-01.jpg）をそのまま読み上げてしまうトラブルも頻発します。

その他、次のようなミスも頻出します。

リンク画像に alt="" を指定してしまう： 画像のみで構成されたリンクの代替テキストを空にすると、リンクのラベルが完全に失われ、どこへ移動するリンクなのかが判別できなくなります。装飾画像のルールを機械的に適用してしまうと起こりがちな、影響の大きいミスです。
CMSの一括設定： 管理画面の初期設定や一括処理で、すべての画像に同じ代替テキスト（サイト名など）が入ってしまう。
画像内の文字を無視する： テキストを画像化したバナーで、画像内の文言が代替テキストに反映されていない。

セキュリティ・アクセシビリティ上の注意点

alt属性 自体がセキュリティ上の脆弱性を引き起こすことはありませんが、アクセシビリティの観点から不適切な記述を行うと、障害のあるユーザーにとって情報の取得が極めて困難になるという大きな課題が生じます。

【よくある失敗・注意点の例】

※実装時や運用時にやりがちなミス、またはアクセシビリティを大きく損なう状態の例です。

<!-- 悪い例：ファイル名や意味のない文字列をそのままaltに入れている -->
<img src="banner_2026_spring.jpg" alt="banner_2026_spring.jpg">

<!-- 悪い例：装飾用の線画やアイコンにaltを未設定（ファイル名が読み上げられる原因） -->
<img src="icon-star.png">

<!-- 悪い例：リンク画像のaltを空にしている（リンクの目的が伝わらない） -->
<a href="/contact/"><img src="btn-contact.png" alt=""></a>

<!-- 良い例：画像内の文言をそのまま代替テキストにする -->
<a href="/contact/"><img src="btn-contact.png" alt="お問い合わせはこちら"></a>

安全かつ適切に利用するための対策

alt属性 を正しく運用するためには、以下の対策が有効です。

画像の役割を判断する： 情報を持つ画像か、装飾目的の画像かを制作段階で明確にする。
装飾画像には空のaltを指定する： 情報を持たない画像には必ず alt="" を記述し、読み上げを適切にスキップさせる（属性ごと省略しない）。
冗長な表現を避ける： 「〜の画像」「〜の写真」といった不要な修飾語を避け、画像が伝えている本質的な内容を簡潔に記述する。
リンク内の画像は特に慎重に扱う： 画像のみのリンクでは、代替テキストがそのままリンクのラベルになることを意識する。
自動チェッカーの活用： 大規模なWebサイトや運用中のシステムにおいて、alt属性の未設定や不備を検知できるツールを導入し、定期的に監査を行う。

なお、自動チェックで分かるのは「altが設定されているか」「空になっていないか」といった形式面が中心です。内容が画像の役割に合っているかどうかは機械的には判定できないため、最終的には人の目による確認が欠かせません。

5. まとめと関連ツールのご案内

ここまで解説した alt属性 について、重要なポイントを振り返ります。

alt属性 は、HTMLの画像要素に対して画像の内容をテキストで説明するための標準属性である。
画像の読み込み失敗時や、スクリーンリーダーを利用する視覚障害のあるユーザーに対して代替情報を提供する。
<img> では原則として必須の属性であり、「属性を省略すること」と「alt="" と空で書くこと」は意味が異なる。
画像の役割（情報提供、リンク、装飾）に応じて、適切なテキストや空の alt="" を使い分ける必要がある。
ファイル名をそのまま入れたり、装飾画像にaltを付け忘れたり、リンク画像のaltを空にしたりすると、アクセシビリティ低下の原因になる。
検索エンジン（SEO）のクローラーに対しても画像内容を伝える役割を持つが、キーワードの詰め込みは避ける。

【お役立ちツールのご案内】

ここまで解説した alt属性 の仕組みやアクセシビリティ・品質管理の重要性を踏まえ、Webサイト内の画像に適切なalt属性が設定されているか手軽に監査・確認するために、当サイトでは 画像alt属性チェッカー を提供しています。

公開前のWebページや運用中のサイトにおけるalt属性の抜け漏れを効率的にチェックし、アクセシビリティ向上をサポートしますので、ぜひご活用ください。