非テキストコンテンツには代替テキストを提供する

このガイドラインで目指すこと

視覚的な情報に依存できないユーザー（スクリーンリーダー利用者など）が、画像やアイコンなどの非テキストコンテンツの内容や目的を理解できるようにします。

• すべてのユーザーが同等の情報へアクセスできる
• 視覚に依存しない形で情報を伝達できる

このガイドラインが達成されないとどうなるか

注意

代替テキストがないと、スクリーンリーダーは画像のファイル名を読み上げたり、何も読み上げなかったりするため、ユーザーは重要な情報を得られません。

結果的に、視覚に依存できないユーザーは、ページの内容を正しく理解できず、誤った操作をしてしまう可能性があります。

具体例：ECサイトでの困りごと

Bさんはスクリーンリーダーを使用してオンラインショッピングをしています。 商品画像に代替テキストが設定されていないため、どのような商品なのか分かりません。 「image_12345.jpg」と読み上げられても、商品の色やデザインが分からず、購入を諦めることになりました。

こんなとき、達成されていないかもしれません

• 画像にalt属性が設定されていない
• alt属性が空ではなく、ファイル名がそのまま入っている（例：alt="IMG_001.jpg"）
• アイコンボタンに代替テキストがなく、機能が分からない
• アイコンの見た目を説明している（例：「バツ印」→「閉じる」とすべき）
• 装飾的な画像に意味のあるaltテキストが設定されている（逆のケース）
• グラフや図表に詳細な説明がない

実装例での比較

以下のデモでスクリーンリーダーでの読み上げの違いを確認してください。

悪い例: 代替テキストがない・不適切

demo.html

demo.css

<p>代替テキストがない</p>
<img src="data:image/svg+xml," />

<p>ファイル名がそのまま入っている</p>
<img src="data:image/svg+xml," alt="IMG_user_profile_2024.jpg" />

<p>アイコンボタンに代替テキストがない</p>
<button>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 6h18M3 12h18M3 18h18"/>
  </svg>
</button>

<p>見た目を説明している（機能を説明すべき）</p>
<button aria-label="バツ印">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M18 6L6 18M6 6l12 12"/>
  </svg>
</button>

Open Sandbox

良い例: 適切な代替テキストが設定されている

demo.html

demo.css

<p>意味のある代替テキスト</p>
<img src="data:image/svg+xml," alt="YUMEMIのロゴマーク" />

<p>適切なユーザープロファイル説明</p>
<img src="data:image/svg+xml," alt="田中太郎のプロフィール写真" />

<p>アイコンボタンに代替テキストがある</p>
<button>
  <svg role="img" aria-label="メニューを開く" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 6h18M3 12h18M3 18h18"/>
  </svg>
</button>

<p>機能を説明している</p>
<button>
  <svg role="img" aria-label="閉じる" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M18 6L6 18M6 6l12 12"/>
  </svg>
</button>

Open Sandbox

最低限、すぐに取り組めること

要件定義

• 機能要件に「すべての非テキストコンテンツに適切な代替テキストを提供する」を明記する
• 画像を使用する機能では、代替テキストの入力フィールドを必須とする

デザイン

• 画像やアイコンの目的を明確にし、代替テキストの指示をデザインドキュメントに記載する
• 装飾的な要素と意味のある要素を区別してデザインする

開発

• img要素には必ずalt属性を設定する
• 装飾的な画像にはalt=""（空のalt）を設定する
• アイコンボタンでは、SVGにrole="img"とaria-labelを設定し、ボタンのアクセシブルネームとして扱う
• 装飾用のSVGはaria-hidden="true"を設定する

基本的な実装例

demo.html

demo.css

<p>意味のある画像</p>
<img src="data:image/svg+xml," alt="YUMEMIのロゴマーク" />

<p>装飾的な画像</p>
<img src="data:image/svg+xml," alt="" />

<p>テキストと併用するアイコン</p>
<button>
  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
  </svg>
  追加する
</button>

Open Sandbox

QA

• スクリーンリーダーで画像やアイコンの読み上げを確認する
• alt属性が設定されていない画像がないかチェックする
• 代替テキストが画像の内容を適切に説明しているか確認する

リリース後

• ユーザーからのフィードバックを収集し、代替テキストの改善に活かす
• 新しいコンテンツを追加する際は、代替テキストの設定を忘れないようにする

よくある問題と解決方法

「画像」や「アイコン」で始まる代替テキスト

危険

スクリーンリーダーは既に「画像」であることを伝えるため、代替テキストを「画像：」で始める必要はありません。

悪い例

<img src="product.jpg" alt="画像：赤いセーター" />

良い例

<img src="product.jpg" alt="赤いニットセーター Mサイズ" />

複雑な図表やグラフの説明

複雑な図表には、短いalt属性に加えて、詳細な説明を別途提供します。

詳細な説明を提供する方法

<figure>
  <img src="sales-chart.png" alt="2024年月別売上グラフ" aria-describedby="chart-desc" />
  <figcaption id="chart-desc">
    1月から12月までの売上推移。1月は100万円からスタートし、
    6月に最高値の500万円を記録。年間平均は300万円。
  </figcaption>
</figure>

背景画像に意味がある場合

CSSの背景画像にはalt属性を設定できないため、代替手段を使用します。

背景画像に代替テキストを提供する方法

<div
  role="img"
  aria-label="夕焼けの海岸線"
  style="background-image: url('sunset.jpg');">
</div>

リンク画像の代替テキスト

リンク内の画像は、リンク先を説明する代替テキストを設定します。

リンク画像の適切な代替テキスト

<a href="/products/sweater">
  <img src="sweater.jpg" alt="赤いニットセーター 商品詳細ページへ" />
</a>

アイコンの見た目ではなく機能を説明する

アイコンボタンの代替テキストには、アイコンの見た目ではなく機能を説明します。

危険

「バツ印」「矢印」などアイコンの見た目を説明するのではなく、「閉じる」「戻る」など機能を説明してください。

悪い例：見た目を説明している

<button>
  <svg role="img" aria-label="バツ印">...</svg>
</button>

良い例：機能を説明している

<button>
  <svg role="img" aria-label="閉じる">...</svg>
</button>

SVGアイコンへの代替テキストの付与方法

アイコンボタンの実装では、ボタン要素ではなくアイコン自体にアクセシブルな名前を付けることが推奨されます。SVGに付けたaria-labelはボタンのアクセシブルネームとして反映されます。

アクセシブルネームとは？

スクリーンリーダーなどが読み上げる「ボタンの名前」のことです。aria-labelに入れた文言がそのまま読み上げられます。

ボタンに付ける方法（非推奨）

<button aria-label="閉じる">
  <svg aria-hidden="true">...</svg>
</button>

アイコンに付ける方法（推奨）

<button>
  <svg role="img" aria-label="閉じる">...</svg>
</button>

アイコンは装飾ではなく意味を持つ画像です。img要素にalt属性を付けるのと同様に、SVGアイコンにもrole="img"とaria-labelを付けることで、実装の一貫性が保たれます。

代替テキストを付与する方法は他にもあります。

1. SVGにrole="img"とaria-labelを設定する方法 - 主要なブラウザとスクリーンリーダーで安定して動作します
2. Visually Hiddenテキストを使用する方法 - コンポーネント化すると扱いやすくなります

詳細な比較は「SVGアイコンボタンにアクセシブルな名前を付ける方法の比較」を参照してください。

チェックリスト

必須チェック項目

• すべてのimg要素にalt属性が設定されている
• 代替テキストが画像の内容や目的を適切に説明している
• 装飾的な画像にはalt=""が設定されている
• アイコンボタンには代替テキスト（aria-labelなど）が設定されている

推奨項目（中優先度）

• 複雑な図表には詳細な説明が提供されている
• 代替テキストが「画像」「アイコン」で始まっていない
• リンク画像の代替テキストがリンク先を説明している

関連するWCAG達成基準

• WCAG 2.2 達成基準 1.1.1 非テキストコンテンツ（レベルA）

知っておくと便利なこと

代替テキストの種類と使い分け

画像の種類	代替テキストの設定方法	例
情報を伝える画像	内容を説明するalt属性	alt="売上グラフ：1月100万、2月150万"
装飾的な画像	空のalt属性	alt=""
機能を持つ画像（ボタンなど）	機能を説明するaltまたはaria-label	aria-label="検索"
複雑な画像	短いalt + 詳細な説明	alt="組織図" aria-describedby="org-desc"

プラットフォーム別の実装方法

Web（HTML）

<img src="image.jpg" alt="説明文" />

iOS（SwiftUI）

Image("product")
  .accessibilityLabel("赤いニットセーター")

Android（Jetpack Compose）

Image(
  painter = painterResource(id = R.drawable.product),
  contentDescription = "赤いニットセーター"
)

参考資料

WCAGガイドライン

• WCAG 2.2 達成基準 1.1.1 非テキストコンテンツ - 英語公式ガイド
• 解説書 達成基準 1.1.1: 非テキストコンテンツ | WAI | W3C - 日本語版

技術的リソース

• MDN: img要素 - HTML img要素の詳細解説
• MDN: aria-label - aria-label属性の使い方
• WAI: 画像チュートリアル - W3C公式の画像アクセシビリティチュートリアル
• SVGアイコンボタンにアクセシブルな名前を付ける方法の比較 - SVGアイコンへの代替テキスト付与方法の詳細な比較