alt-text-design

代替テキストの設計

視覚的なコンテンツの見た目だけでなく、何を伝えているのかも含め、同じ情報と目的が伝わる代替テキストを書きます。

基本原則

代替テキストは、「この画像がなくなったら、どんな情報が失われるか」という問いに答えるものです。その情報を代替テキストに含めます。

判断フロー

1. 画像は純粋に装飾目的ですか？

• 背景のテクスチャ、区切り線、視覚的な装飾
• 隣接するテキストですでに伝えられている情報を繰り返す画像
• 対応： スクリーンリーダーが読み飛ばせるよう、空の代替テキスト（alt=""）を使用します

2. 画像は機能を持っていますか？

• リンクになっているロゴ、アイコンボタン、画像リンク
• 対応： 画像そのものではなく、機能を説明する代替テキストにします
• ホームページへのリンクになっているロゴ：alt="会社名 — ホーム"
• 検索アイコンボタン：alt="検索"
• alt="虫眼鏡のアイコン" にはしません

3. 画像は情報を伝えていますか？

• 情報を加える写真、イラスト、スクリーンショット
• 対応： 画像が伝える情報を説明します
• 破損した製品の写真：alt="画面の下端に沿って走るひび"
• alt="スマートフォンの写真" や alt="product-image-032.jpg" にはしません

4. 画像は複雑ですか？

• チャート、グラフ、図、インフォグラフィック、地図
• 対応： 要点をまとめた短い代替テキストに加えて、近くに詳しい説明（ページ内のテキストまたは詳細へのリンク）を用意します
• 棒グラフ：alt="売上の伸びを示す棒グラフ — 詳細は以下" さらに、データのテキスト要約を記載します
• alt="棒グラフ" にはせず、代替テキスト属性にデータセット全体も入れません

良い代替テキストを書く

具体的に書く

• 悪い例：「数人のグループ」
• 良い例：「ホワイトボードを使ってプロトタイプを確認する3人のチームメンバー」

見た目だけでなく目的を伝える

• 悪い例：「数字の入った赤い丸」
• 良い例：「未読の通知が3件」

文脈に合わせる

同じ画像でも、文脈によって異なる代替テキストが必要です。

• レシピページの場合：「白いボウルに盛り付け、パルメザンチーズとバジルを添えたリゾット」
• キッチン用品の商品ページの場合：「直径22cmの白い丸形セラミック製サービングボウル」

簡潔にする

• 1文を目安にし、長くても2文にします
• 「画像：」や「写真：」から始めないでください。スクリーンリーダーはすでに画像であることを読み上げます
• 複雑な画像では、代替テキストを短くし、詳しい情報は別の場所に記載します

コンテンツの種類別ガイド

チャートとグラフ

• 代替テキスト：種類と要点を伝えます
• 近くにテキストの要約またはデータテーブルを用意します
• 「1月から2026年6月にかけてウェブサイトのトラフィックが倍増したことを示す折れ線グラフ。全データは下の表に記載しています。」

スクリーンショット

• 読者にとって重要な、スクリーンショットが示す内容を説明します
• 「通知の切り替えがオフになっている設定パネル」
• 「設定ページのスクリーンショット」にはしません

ラベル付きアイコン

• アイコンに表示テキストのラベルが付いている場合、アイコンは装飾目的です（alt=""）
• アイコンだけが手がかりの場合、代替テキストで意味を伝える必要があります

テキストを含む画像

• 可能な限りテキスト画像は避け、実際のテキストを使用します
• 避けられない場合、代替テキストに画像内の全文を含める必要があります

評価のための質問

1. 装飾目的ではない画像すべてに、意味のある代替テキストが付いていますか？
2. 代替テキストは見た目だけでなく、目的を伝えていますか？
3. 装飾目的の画像には空の代替テキストが設定されていますか？
4. 複雑な画像には、短い代替テキストと詳しい説明の両方がありますか？
5. スクリーンリーダーを使う人は、画像を見る人と同じ情報を得られますか？