画像・メディアリソースガイドライン
アクセシビリティ
alt属性、色彩コントラスト、SVGアクセシビリティの実装ガイド
alt 属性
画像に適切な alt 属性を設定することで、視覚障害者を含むすべてのユーザーが情報へアクセスしやすくなります。
基本原則
- 意味のある画像: 画像の内容を簡潔に説明
- 装飾画像: 空の alt 属性
alt="" - テキスト画像: 画像内のテキストをそのまま記載
<!-- ✅ 良い例 -->
<img
src="/images/chart.webp"
alt="2024年売上推移グラフ：前年比120%の成長"
width="600"
height="400"
/>
<!-- 装飾画像 -->
<img src="/images/decoration.webp" alt="" width="100" height="50" />
<!-- ❌ 悪い例 -->
<img src="/images/chart.webp" alt="グラフ" />
alt 属性の書き方
情報を伝える画像
<!-- 具体的で有用な情報を提供 -->
<img
src="/images/weather.webp"
alt="明日の天気：晴れ、最高気温25度、最低気温18度"
/>
<!-- 画像の機能や目的を説明 -->
<img src="/images/download-icon.webp" alt="PDFファイルをダウンロード" />
複雑な画像（グラフ、図表）
<!-- 要約と詳細情報の提供 -->
<img
src="/images/sales-chart.webp"
alt="2024年四半期別売上：Q1 100万円、Q2 150万円、Q3 200万円、Q4 180万円"
/>
装飾目的の画像
<!-- 装飾画像は空のalt属性 -->
<img src="/images/border-decoration.webp" alt="" />
figure 要素の活用
複雑な画像やキャプションが必要な場合は、figure要素を使用してください。
<figure>
<img
src="/images/architecture.webp"
alt="システム構成図"
width="800"
height="600"
/>
<figcaption>
新システムのアーキテクチャ概要：データベース、APIサーバー、フロントエンドの3層構成
</figcaption>
</figure>
スクリーンリーダー対応
aria-label の活用
<!-- 複雑な操作ボタン -->
<button type="button" aria-label="商品をお気に入りに追加">
<img src="/images/heart-icon.webp" alt="" />
</button>
色彩とコントラスト
視覚に制約のあるユーザーにも情報が正しく伝わるよう、十分なコントラストや色以外の手段での情報伝達を心がけてください。
アクセシブルな色彩設計
- コントラスト比: WCAG 2.2 AA 準拠（4.5:1 以上）
- 色だけに依存しない: 形状やテキストでも情報を伝達
- 色覚異常への配慮: 判別しやすい色の組み合わせ
画像内テキストの配慮
<!-- 画像内テキストがある場合 -->
<img
src="/images/banner-text.webp"
alt="新商品発売！50%オフセール開催中"
width="400"
height="200"
/>
動的コンテンツの配慮
アニメーションや動画などの動的コンテンツは、ユーザーによっては情報取得や操作に支障をきたす場合があります。
s すべてのユーザーが快適に利用できるよう、アクセシビリティへの配慮や代替手段の提供を心がけてください。
アニメーション画像
<!-- GIFアニメーションの配慮 -->
<img src="/images/animation.gif" alt="製品の360度回転ビュー（自動再生）" />
<!-- 停止機能の提供 -->
<button onclick="stopAnimation()">アニメーション停止</button>
動画ポスター画像
<video poster="/images/video-poster.webp" controls>
<source src="/videos/introduction.mp4" type="video/mp4" />
<img
src="/images/video-poster.webp"
alt="紹介動画のサムネイル：製品デモンストレーション"
/>
</video>
インライン SVG
意味のあるアイコンや図形には説明を付与し、装飾目的の場合は支援技術から除外するなど、用途や目的に応じて適切に設定してください。
基本的な実装
装飾用 SVG（意味を持たない）
<!-- aria-hidden="true"で支援技術から隠す -->
<svg role="img" aria-hidden="true" width="24" height="24">
<path d="M12 2L2 7h10v10h10L12 2z" />
</svg>
意味のある SVG（情報を伝える）
<!-- role="img"と aria-label で説明 -->
<svg role="img" aria-label="検索" width="24" height="24">
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
title と desc の活用
複雑な SVG アイコン
<svg role="img" aria-labelledby="icon-title" width="24" height="24">
<title id="icon-title">警告アイコン</title>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</svg>
詳細な説明が必要な SVG
<svg
role="img"
aria-labelledby="chart-title"
aria-describedby="chart-desc"
width="400"
height="300"
>
<title id="chart-title">売上推移グラフ</title>
<desc id="chart-desc">
2024年1月から12月までの月別売上データ。1月100万円から徐々に増加し、12月に300万円でピークに達している。
</desc>
<!-- SVG content -->
</svg>
インタラクティブ SVG
クリック可能な SVG アイコン
<!-- ボタンとして機能するSVG -->
<button aria-label="メニューを開く">
<svg aria-hidden="true" width="24" height="24">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</svg>
</button>
リンクとして機能する SVG
<a href="/home" aria-label="ホームページに戻る">
<svg aria-hidden="true" width="24" height="24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
</a>
実装のポイント
| 用途 | role | aria-hidden | aria-label/aria-labelledby | title 要素 |
|---|---|---|---|---|
| 装飾用 | なし | true | なし | なし |
| 意味のあるアイコン | img | なし | 必須 | 推奨 |
| 複雑な図形・グラフ | img | なし | 必須 | 必須 |
| インタラクティブ | なし | true | 親要素に設定 | なし |