画像alt・とは？初心者にも分かる基本ガイド：画像代替テキストの意味と使い方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

画像alt・とは？初心者にも分かる基本ガイド

画像altとは、画像が表示されないときに代わりに伝えるテキストのことです。スクリーンリーダーを使う人や、画像の読み込みが遅くて表示されないときにも、内容を理解するための手がかりになります。

ウェブを使う誰もが見やすく便利にするためのアクセシビリティの第一歩です。さらに、検索エンジンに対する説明にも役立つことがあり、適切な alt を設定すると画像検索の成果にも影響します。ただし、キーワードを詰め込みすぎないことや、長すぎる説明は避けましょう。

基本的な使い方

画像を表す代表的なタグは img です。alt 属性を使って内容を伝えます。例として以下を参照します。実際にはこのように記述します：<img src='flower.jpg' alt='春の花が咲く庭' />。

良い alt テキストの作り方

簡潔で具体的に。画像が伝えたい情報をそのまま表すようにします。代替テキストは画像の「意味」を短く伝えることを目指します。長すぎると読み手が苦しくなるため、100文字程度に収めるのが目安です。

OKとNGの例

状況	適切な alt 文
装飾的な画像	<img src='decor.jpg' alt='' />
商品画像	alt='黒のレザージャケット商品写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）'
人物写真	alt='女性が公園で歩いている様子'
風景写真	alt='秋の山の風景と紅葉'

補足として、alt は タイトル 属性とは別物です。画像が読み込めない場合にも、有益な情報を伝える役割を果たします。また、alt を適切に設定することは、訪問者の理解を助け、ウェブサイト全体の信頼性を高める一助となります。

画像altの同意語

代替テキスト: 画像が表示されない場合に代わりに表示される説明文で、スクリーンリーダーにも読み上げられる。
alt属性: HTMLの属性名「alt」で、画像の代替テキストを設定する属性のこと。
altテキスト: 画像の代替テキストを指す、日常的な呼び方。
オルトテキスト: altテキストの日本語表記のひとつ。
altタグ: HTMLの中で画像の代替情報を示す属性を指す呼び方。
画像代替テキスト: 画像につける代替テキストそのものを指す表現。
画像の代替テキスト: 画像の内容を説明する代替テキストのこと。
代替説明テキスト: 画像を説明するための代替用テキスト。
画像代替説明テキスト: 画像を説明する目的の代替テキスト。
アクセシビリティ用代替テキスト: 視覚障害者の利用を想定したアクセシビリティ向上のための代替テキスト。
SEO用代替テキスト: 検索エンジン最適化の観点で用いられる代替テキスト。
画像のalt説明文: 画像内容を説明するaltテキストの表現。
代替説明文: 代替として用いられる説明文。
画像の代替説明文: 画像を説明する代替テキストの表現の一つ。
画像代替説明文: 画像を説明するための代替テキスト。

画像altの対義語・反対語

代替テキストあり: 画像に代替テキスト（alt属性の値）が設定されており、スクリーンリーダーで内容を読み上げられ、SEOにも有利になることが多い。
代替テキストなし: 画像にalt属性が設定されていない状態。スクリーンリーダーが説明を提供せず、アクセシビリティが低下する可能性がある。
alt空文字: alt属性が空文字（alt=""）に設定されている状態。意味を説明する必要がない装飾用画像などに使われる。
装飾用画像（altを空に設定）: 視覚的な装飾目的の画像で、説明を提供する必要がない場合にaltを空に設定する実務パターン。
aria-labelあり: altの代わりに aria-label 属性を使って画像を説明する状態。アクセシビリティを補強する一手法だが、標準のaltには及ばない場合もある。
title属性のみで説明: 画像の説明を title 属性だけで提供する状態。スクリーンリーダーでは主な説明としては不十分なことが多い。
装飾として扱いスクリーンリーダーを無視: 画像を装飾として扱い、スクリーンリーダーが読み上げないようにする設定（role=presentation または aria-hidden=true）。

画像altの共起語

代替テキスト: 画像の内容を言葉で伝える説明文。スクリーンリーダーが読み上げる際に用いられる。
alt属性: HTMLのimg要素に設定する属性で、代替テキストを指定する役割を持つ。
altテキスト: alt属性に設定する実際の文字列。画像の意味を簡潔に伝える説明。
空のalt属性: 装飾用など伝える必要がない画像には alt 属性を空文字にして伝達を省略する。
alt属性値: alt属性に格納する具体的なテキストのこと。
代替テキストの長さ: 適切な長さは状況によるが、過不足なく伝えられる程度を心がける。
説明的な代替テキスト: 画像の内容を具体的に説明する代替テキストの書き方。
画像最適化: ページの表示速度と SEO の観点から画像を最適化すること。
アクセシビリティ: 視覚に障害のある人を含むすべての利用者が使いやすい設計の考え方。
WCAG: Web Content Accessibility Guidelines の略。アクセシビリティ基準の総称。
スクリーンリーダー: 視覚障害者向けの画面読み上げソフトで、altテキストはここに読み上げられる。
画面読み上げ: スクリーンリーダーと同義で、画面上の情報を音声で伝える仕組み。
検索エンジン最適化: SEO の一部として画像の意味を検索エンジンに伝え、画像の発見性を高める。
SEO: 検索エンジン最適化の略。サイトの露出やアクセスを増やすための施策全般。
画像ファイル名: ファイル名と alt テキストを合わせて説明的な情報伝達を補足することがある。
キーワード詰め込みを避ける: alt テキストには過度なキーワードを並べず、自然で読みやすい説明を心がける。
装飾用画像: 内容の伝達を目的としない装飾的な画像には alt を空または装飾用として扱うのが一般的。
img要素: HTML の要素のひとつで画像を表示する。alt 属性はこの要素とセットで使う。
タイトル属性: img 要素に付くことがある title 属性は補助的な情報を示すがアクセシビリティの中心ではない。
非テキストコンテンツ: 画像のようにテキスト以外の情報を伝える要素の総称。WCAG の適用対象となる場合がある。

画像altの関連用語

alt属性: HTMLのimgタグに含まれ、画像が表示されない場合に代替として読み上げられるテキストを指定する属性。
altテキスト: 画像の内容を簡潔に説明する文で、検索エンジンとスクリーンリーダーに理解を提供する役割を持つ。
代替テキスト: alt属性の正式名称。日本語では代替テキストとして用いられることが多い。
空のalt属性: 装飾目的の画像にはalt空文字を設定して、スクリーンリーダーが読み上げられないようにする方法。
画像ファイル名: 画像ファイルの名前。内容を反映させ、ハイフンで単語を区切ると検索エンジンと人にも読みやすい。
画像SEO: 画像を検索結果で見つけてもらうための最適化全般。altやファイル名、キャプション、周辺テキスト、サイト構造などを整える。
タイトル属性: imgタグの title 属性。補足情報として表示されることがあるが、altの代替として使わず補足用途で使うのが基本。
スクリーンリーダー: 視覚障害者が画面読み上げソフトを使う際、altテキストが読み上げられる。アクセシビリティの要となる要素。
アクセシビリティ: 障害のある人にも利用しやすいウェブ設計の総称。altはこの取り組みの中の重要な要素。
装飾用画像: 意味を持たない装飾目的の画像には alt を空にするか、説明を回避して読み上げを避ける配慮をする。
画像のインデックス化: 検索エンジンが画像を理解してインデックス化する過程。ファイル名やalt、周辺テキストが手掛かりになる。
推奨alt長さ: 読み上げや検索エンジン理解のバランスとして、60〜125字程度を目安に画像の要点を一文で伝えると良い。
自然な表現の重要性: キーワードを無理に詰め込まず、自然で読みやすい日本語の表現を優先する。
キャプションと図の説明: キャプションは画面上の説明として表示されることが多いが、altは補助的な説明として機能。両方を適切に活用する。
ARIA属性: aria-label や aria-labelledby は補助技術向けのラベル付け手段。基本は alt を優先し、必要な場合に補助的に用いる。