alt属性の書き方｜画像の役割別の例とアクセシビリティ
2026年6月25日
著者: 与謝秀作
alt属性は、画像を見られないときに、その場で画像が担っている情報や機能をテキストで伝えるためのものです。画像の外見をすべて列挙する必要はありません。同じ画像でも置く場所やリンクの有無で適切な代替が変わるため、情報・装飾・機能・複雑な図の順に役割を判断しましょう。
alt属性の目的：画像の役割をテキストで代替する
画像の代替テキストを考えるときは、「画像をなくすと読者に何が伝わらなくなるか」を問い直します。商品を見分ける写真なら特徴、操作を担う画像なら行き先や動作、説明のないグラフなら主な内容と詳しいデータへの案内が必要になります。
W3Cのalt判断ツリーは、文脈と画像の目的に応じた選択を示しています。読み上げ環境だけでなく、画像が表示できない状況で意味が保たれるかも確認してください。ファイル名、タイトル属性、周囲のキャプションが自動的にaltの代わりになるとは考えません。
文字数を一律に決めるより、必要な情報を簡潔に伝えます。長い説明が必要なら、altへ全部詰めず本文や表へ分けます。「画像」「写真」と毎回付けるより、画像であることを前提に内容を伝えた方が自然な場合が多くあります。
情報画像・装飾画像・機能画像・複雑画像の判断フロー
まずリンクやボタンとして機能するかを確認し、その次に情報の有無を判断します。意味のある文字が画像だけにある場合は、その文字が伝える内容も代替が必要です。役割が曖昧なら、周囲の文章と画像を一組として読み直します。
役割 | 判断する問い | 代替の基本 |
|---|---|---|
情報画像 | 画像が独自の情報を伝えるか | 目的に必要な情報を短く説明 |
装飾画像 | 取り除いても情報・操作が失われないか | 空のaltを指定して重複を避ける |
機能画像 | 画像を押すと移動・操作するか | 見た目より行き先や操作を伝える |
複雑な図 | 短文だけで重要情報を代替できるか | 短いaltと、近くの詳説・表等を併用 |
装飾画像の空altと、alt属性の省略は異なります。省略するとファイル名等が読み上げられる場合があります。情報画像に空altを付けると重要な説明が失われるため、「すべて空にする」「すべて長く書く」のどちらにも寄せないでください。
情報を伝える画像のよい例と修正例
次の修正例は架空のページを想定しています。同じ被写体でも、伝える目的が変わればaltも変わります。商品写真なら、本文にない視覚的な違いが選択に必要かを判断します。
文脈 | 弱い例 | 目的に合う例 |
|---|---|---|
赤いマグの商品写真 | 商品画像 | 白い持ち手の赤いマグ |
持ち方を説明する写真 | マグの写真 | 持ち手に指を通し、もう片方の手で底を支えている |
画面の選択箇所を示す図 | GA4画面 | 入口ページの条件欄で対象の記事パスを選択している |
画像だけにある休業案内 | お知らせ画像 | 臨時休業：10月20日。問い合わせは翌営業日に対応 |
青と赤を比較する見本 | 青、赤 | 左は青、右は赤のカバー。形状は同じ |
例の日付や操作内容は説明用です。実際に使うときは、写っている内容と公開情報を確かめます。周囲の本文ですでに十分説明している場合は、同じ長文を繰り返さないようにします。ただし画像固有の重要な情報まで落とさないことが大切です。
装飾画像とリンク・ボタン画像を書き分ける
装飾の波模様や、直後の見出しと同じ意味を持つアイコンは、情報の重複がなければ空altを検討します。記述例は alt="" です。これは画像を消す指定ではなく、代替テキストを空にする指定です。実装する要素と周囲の構造も確認してください。
画像の使い方 | 代替の例 | 注意 |
|---|---|---|
ホームへ戻るロゴだけのリンク | サイト名のホーム | 会社名だけで行き先が不明にならないか |
画像だけの検索ボタン | 検索 | 虫眼鏡の形ではなく操作を伝える |
「検索」の文字と同じボタン内の虫眼鏡 | 空のalt | 文字で操作名が十分伝わる場合 |
見出しの横の装飾アイコン | 空のalt | 独自の状態や注意を示していないか |
資料紹介の表紙だけをリンクにする | アクセス解析入門資料を読む | 画像の色ではなく行き先を示す |
リンク内に読める文字があるか、リンクの名前が全体で何になるかを確認します。Googleのリンクのベストプラクティスも画像リンクのaltを説明しています。SEOのために同じ語句を重ねるより、目的地を予測できる名前を優先しましょう。
グラフは短いaltと本文・データ表で情報を補う
複雑なグラフは、短いaltだけで全データを伝えようとしません。以下は架空の入口セッション数で、実際の会社やサイトの実績ではありません。単位と期間を表にも明示します。
月（架空例） | 入口セッション数 |
|---|---|
1月 | 100 |
2月 | 120 |
3月 | 90 |
短いalt例：「1〜3月の入口セッション数。月別の値と比較は直後の表と説明に記載。」本文の詳説例：「2月が120で最多です。3月は90で、1月の100より10少なくなっています。数値だけで原因や施策の効果は分かりません。」
表の並び順と読み上げ順、見出しと単位の関係を確かめます。線の色だけで系列を区別せず、名称や線種でも見分けられるようにします。詳細を別ページへ置く場合は、どの情報を読めるか分かる案内を近くに用意してください。短いaltは詳説の代用品ではなく、その入口です。
読み上げと文脈で点検し、画像SEOの範囲を理解する
Googleの画像SEO資料は、画像の理解にコンピュータービジョン、alt、周囲の内容等が使われることを説明しています。「検索エンジンは画像を一切理解できない」とする説明は不正確です。適切なaltは内容理解を助けますが、画像検索の順位を保証するものではありません。
- 画像を隠して読んでも情報・操作が成立するか確認する。
- 各画像の情報・装飾・機能・複雑図の役割を決める。
- 周囲の文章やリンク名との重複、不足を読む。
- 読み上げ環境で、操作名や説明の順序を確認する。
- グラフには単位、詳説、データ表を用意する。
- 画像差し替え時にaltと説明も再確認する。
実際に記入する点検欄は「掲載ページ：＿＿／画像の役割：＿＿／失われる情報：＿＿／alt案：＿＿／本文の詳説：＿＿／確認者・日付：＿＿」です。画像の文言だけを一括変更せず、記事構成やリンクの文脈と合わせて更新してください。
