アクセシビリティ実務の画像 — alt/装飾/図解の線引き 2025

はじめに

SEOとアクセシビリティは重なる部分もありますが、目的は異なります。この記事は「伝わる」ための alt 設計に焦点を当て、実装の線引きを具体化します。SEO観点は 画像SEO 2025 — alt・構造化データ・サイトマップの実務 を参照。

alt の設計原則

• 装飾画像：空alt（alt=""）で読み上げ除外。
• 意味画像：本文の要点を短く（名詞中心）。
• 図解/チャート：要旨＋単位を含める。長文は本文側で補足。

よくあるケース

• リンク画像：リンク先の目的を alt に。ファイル名や冗長な説明は不要。
• OGP代替：OGP画像は本文と重複しがち。過剰なaltは避ける（設計は OGPサムネイル設計 2025 — 見切れない、重くない、伝わる）。

実装の落とし穴

• role="presentation" の乱用：本来の意味を消さない。
• 画像の過配信：srcset/sizes を合わせる（詳しくは 2025年のレスポンシブ画像設計 — srcset/sizes 実践ガイド）。

実務Tips

図解の視認性は 画像トリミング でトリミング、srcset は srcset生成 で自動生成。OGPは OGPサムネイル作成。

まず判定：装飾か、意味か、UIか

1. 装飾（雰囲気のみ） → alt="" + role="presentation" は不要（空 alt だけで十分）。
2. 意味（本文の理解に必要） → 簡潔に要旨。本文重複は避け、要点を補う。
3. UI（ボタン/アイコン） → alt/アクセシブルネームはラベルのテキストと一致。

判断の契約（小さなルール）

• 画像の alt は、その場で読み上げられて意味が通る一文にする。
• 「画像」「写真」などの語は基本不要（冗長）。
• 図解は本文で数値/単位を補い、alt は要旨＋単位。

良い alt / 悪い alt の例

• 悪い: alt="グラフ"

  • 不足: 何のグラフか、増減の傾向が不明。

• 良い: alt="2024年の月次売上。Q4 にかけて増加傾向"

• 悪い: alt="ボタン"

• 良い: alt="カートに追加"（UI ボタンの目的）

• 悪い: alt="会社ロゴ"

• 良い: alt="Unified Image Tools"（リンクなら遷移先の目的に合わせる）

図解/チャートの扱い（長文は本文へ）

• alt は要旨のみ。詳細な数値表や注釈は本文の近くに配置。
• 複雑な図は <figcaption> で補足。スクリーンリーダーは文脈で理解しやすい。

例（Next.js）

// ... JSX 断片
<figure>
  <Image src="/charts/sales-2024.png" alt="2024年の月次売上。Q4 にかけて増加傾向" width={960} height={540} />
  <figcaption>売上は 7 月以降右肩上がり。単位: 万円</figcaption>
  {/* 詳細説明は本文で。 */}
  {/* 表現の重複を避け、要旨のみ alt へ。 */}
  {/* srcset/sizes はレイアウトに合わせて設定。 */}
</figure>

UI アイコンと代替テキストの責務

• アイコン単体が装飾なら alt=""
• ボタン/リンクに含まれるアイコンは aria-label または可視ラベルで目的を伝える
• 同一要素上で alt と aria-label の重複は避け、ひとつのアクセシブルネームに統一

React/Next.js の例

// テキストラベルが視覚的に存在するなら img の alt は空にして冗長読み上げを避ける
<button type="button">
  <img src="/icons/cart.svg" alt="" aria-hidden="true" />
  カートに追加
</button>

// アイコンのみのボタンなら aria-label を付与
<button type="button" aria-label="検索">
  <img src="/icons/search.svg" alt="" aria-hidden="true" />
</button>

画像最適化とアクセシビリティの両立

• LCP 画像は priority/プリロードで初回体験を改善（ただし alt は簡潔に）
• sizes/srcset を適切化して過配信を回避（ネットワーク帯域が支援技術の快適性に直結）
• カラーコントラストは 7:1 を目安。画像内テキストの多用は避け、HTML テキストで表現

OGP/共有画像の取扱い

• OGP は本文の要旨と重複しやすいため、本文内に同一画像を埋め込む際は alt を簡素化
• 共有先プレビューでは alt が読まれないケースも多い。本文で要旨を担保
• 詳細は OGPサムネイル設計 2025 — 見切れない、重くない、伝わる

テストと確認手順

• スクリーンリーダー（NVDA/VoiceOver）で読み上げ順と冗長性を確認
• 自動テスト: Axe/Pa11y で空 alt と意味画像の検出を行う
• 実ページでキーボードフォーカスと画像読み込み失敗時の挙動を確認

チェックリスト（出稿前）

• 装飾画像は alt="" で沈黙している
• 意味画像は要旨を簡潔に、本文重複がない
• UI アイコンのアクセシブルネームが目的に一致
• 図解は単位/傾向を含め、詳細は本文/キャプションへ
• 画像最適化（srcset/sizes、フォーマット、プリロード）で体験が阻害されない

まとめ

「装飾は沈黙、意味は簡潔、図解は要旨」。このルールで読み上げ体験と表示速度の両立を実現します。UI ではラベルと alt の責務分担に注意し、図解は本文で詳細を補うことで、読み上げの冗長性を防げます。

関連

• 画像SEO 2025 — alt・構造化データ・サイトマップの実務
• 2025年のレスポンシブ画像設計 — srcset/sizes 実践ガイド
• srcset生成