● learn-tech

画像と代替テキスト

<img alt> は付ければいいわけではない。その画像が文脈で果たす役割に応じて 書き分ける。「装飾」「機能」「情報」の3パターンを覚えれば、ほぼ機械的に判断できる。

alt の3パターン

1. 装飾画像 → alt=""（空 alt）

本文に意味を加えない、あっても無くても情報量が変わらない画像。背景画像的な役割。 

<!-- 飾りの罫線・スパークル・装飾的なベクター -->
<img src="decorative-line.svg" alt="" />

「空 alt」≠「alt 属性なし」。

2. 機能画像 → 機能を表す alt

リンクやボタンの中で、その操作の結果や役割を表す画像。 

<!-- リンク内の画像（テキストなし） -->
<a href="/">
  <img src="logo.svg" alt="トップページ" />
</a>

<!-- アイコンボタン -->
<button type="button">
  <img src="trash.svg" alt="削除" />
</button>

<!-- リンク内に画像とテキスト両方あるなら、画像は alt="" -->
<a href="/">
  <img src="logo.svg" alt="" />
  ホーム
</a>

3. 情報画像 → 内容を簡潔に表す alt

本文を補強する写真・図・グラフなど。「その画像が見えなかったら何が伝わらないか」を 端的に書く。 

<!-- 製品の説明 -->
<img
  src="iphone-blue.jpg"
  alt="背面が深いブルーの iPhone。カメラは縦並びの3眼。"
/>

<!-- ニュース記事の写真 -->
<img
  src="protest.jpg"
  alt="数千人の参加者が国会前に集まり、プラカードを掲げている様子。"
/>
alt 文の書き方

- 「画像」「写真」「アイコン」と書かない。<img> なのは支援技術側で分かる。
- 本文と重複しない。記事タイトルと同じ alt を写真に付けると2回読まれる。
- 句点を打つと読み上げのリズムが整う。
- 長さは 100 文字程度までを目安に。長くなるなら本文や aria-describedby に。

判断フローチャート

画像が画面から消えても、
情報量は変わらないか？
├─ Yes → alt=""
└─ No
   └─ クリックで何かが起きるか？
      ├─ Yes → 機能を表す alt（"削除"、"トップへ戻る"）
      └─ No → 内容を表す alt（"夕日に染まる富士山"）

複雑な画像（チャート、図解、地図）

100 文字に収まらない情報量の画像。alt は短く要約し、詳細は別の場所に。

パターン A: <figure> + <figcaption>

<figure>
  <img
    src="quarterly-revenue.png"
    alt="2025年Q1〜Q4の売上推移グラフ。詳細は表で説明。"
  />
  <figcaption>
    Q1: 100M, Q2: 120M, Q3: 110M, Q4: 150M（前年比 +20%）
  </figcaption>
</figure>

パターン B: aria-describedby で別要素を参照

<img
  src="diagram.png"
  alt="システム構成図"
  aria-describedby="diagram-desc"
/>
<p id="diagram-desc">
  クライアントから API ゲートウェイへ HTTPS で接続し、
  ゲートウェイが認証サービスとデータベースを連携させる。
</p>

パターン C: 詳細リンク

<img src="map.png" alt="新宿駅周辺の地図（詳細は下記）" />
<a href="/map-text">地図の文字説明を見る</a>

データ表は最終的に <table>

画像でグラフを出していても、可能なら同じデータをテーブルでも提供する。 スクリーンリーダ・低速回線・印刷でも内容が伝わる。

SVG

SVG はインライン (<svg> をマークアップに直接書く) と <img src="...svg"> の2通り。 前者の方が a11y を細かく制御できる。

装飾用 SVG

<svg aria-hidden="true" focusable="false" ...>
  <path d="..." />
</svg>

意味のある SVG

<svg role="img" aria-labelledby="svg-title svg-desc">
  <title id="svg-title">ダウンロード</title>
  <desc id="svg-desc">下向きの矢印アイコン</desc>
  <path d="..." />
</svg>

アイコン + 隣のテキスト

ボタン中にアイコンとテキストが並ぶなら、アイコンは装飾扱いでいい。 

<button type="button">
  <svg aria-hidden="true">...</svg>
  保存
</button>

背景画像

CSS の background-image は装飾扱い。情報を伝える役割なら <img> を使う。 

/* 装飾OK */
.hero { background-image: url("bg-pattern.svg"); }

ヒーローエリアの主役の画像なら <img> + alt で。

絵文字とアイコンフォント

絵文字

絵文字はスクリーンリーダで名前が読み上げられる（例: 🎉 → 「クラッカー」）。 装飾だけのつもりが意外な読み上げになる。役割が無いなら aria-hidden: 

<span aria-hidden="true">🎉</span> おめでとう！
<!-- スクリーンリーダ: "おめでとう" -->

アイコンフォント

私用領域の Unicode を使うアイコンフォント（Font Awesome 等）は、 フォントが読み込まれないと意味不明な文字として読まれる。 SVG アイコンの方が遥かに堅牢。

<picture> / <source>

画像の出し分け（解像度別、フォーマット別）。alt は <img> に書く。 <source> には書かない。 

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="夕日を背に佇む象の写真" />
</picture>

ロード失敗時の挙動

画像のロードが失敗すると、ブラウザは alt を表示する。 alt="" なら何も出ない、書いてあれば読みやすい代替テキストが出る。低速回線でも有効。

画像内テキスト

画像の中に文字を含めるのは原則避ける:

ロゴだけは画像内文字でも許容（ロゴはブランド資産なので）。

具体例

プロフィール写真

<!-- 文脈 1: 著者欄 -->
<img src="author.jpg" alt="" /> <!-- 隣に著者名があるなら装飾扱い -->
<span>山田太郎</span>

<!-- 文脈 2: 単体で出す -->
<img src="author.jpg" alt="山田太郎の顔写真" />

製品の写真（複数枚）

<img src="shoe-1.jpg" alt="赤いスニーカーの正面" />
<img src="shoe-2.jpg" alt="赤いスニーカーの側面" />
<img src="shoe-3.jpg" alt="赤いスニーカーの底面" />

QR コード

<img src="qr.png" alt="QR コード（リンク先: https://example.com）" />
よくある失敗

- alt="image" や alt="picture" のような無情報な値
- ファイル名そのまま（alt="IMG_1234.jpg"）
- 装飾画像に alt を書いてしまう
- 機能画像で何のボタンか分からない（alt="icon"）
- 同じ説明を本文と alt で2回書く