image-alt-text

画像の代替テキストに関するアクセシビリティスキル

正規の情報源：mgifford/ACCESSIBILITY.md の examples/IMAGE_ALT_TEXT_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルに基づいています。判断に迷う場合は、そちらの例を優先してください。

画像を含むページを作成、レビュー、監査する際は、以下のルールを適用してください。 このスキルを読み込むのは、プロジェクトに <img> 要素、コンテンツとして使用されるインライン SVG 画像、または意味を伝える可能性のある CSS 背景画像が含まれている場合に限ってください。

---

基本方針

WCAG 2.2 SC 1.1.1 非テキストコンテンツ（A）：すべての非テキスト要素には、同等の目的を果たすテキストによる代替が必要です。装飾画像にも例外はなく、明示的な空の alt="" が必要です。代替テキストは画像ファイルだけで決まるのではなく、特定の文脈における画像の目的によって決まります。同じ画像でも、使われ方によって異なる代替テキストが必要になったり、不要になったりする場合があります。

詳細を決して捏造しないでください。外見から人物の身元、人種、民族、性別、障害、診断、宗教、年齢、感情を推測してはいけません。自動ツールで検出できるのは alt の欠落などの構造上の問題です。代替テキストが有意義で、正確で、文脈に適切かどうかを判断できるのは、人間だけです。

---

重大度の尺度（このスキル）

レベル	意味
Critical（重大）	重要な意味を伝える画像に alt 属性がない、または alt が完全に欠落している
Serious（深刻）	機能を持つ画像（ボタン／リンク）にテキストによる代替がなく、キーボードやスクリーンリーダーで使用できない
Moderate（中程度）	代替テキストはあるが、不正確、冗長（「〜の画像」など）、または重要な文脈が欠けている
Minor（軽微）	代替テキストがやや冗長、または改善の余地があるが、理解を妨げるほどではない

---

代替テキストの判断手順

画像の用途ごとに（画像ファイル全般ではなく）、次の順に確認します。

1. 画像だけでリンク、ボタン、コントロールの名称を示していますか？ → 操作または移動先の名称を付けます。
2. 画像に、ここで重要となるテキストが含まれていますか？ 同じ語句が近くの通常のテキストですでに提供されている場合は、alt="" を使います。それ以外の場合は、必要な語句を代替テキストに含めます。
3. 画像は情報、意味、識別、状態、指示、または意図した印象を加えていますか？ 単純な画像なら簡潔な代替テキストを付けます。複雑な画像なら、短い説明と、詳細を伝えるアクセシブルな代替を用意します。
4. 画像に関する情報がすべて近くですでに提供されていますか？ → alt="" を使います。
5. 画像は純粋に装飾目的ですか、または視覚的な書式設定にのみ使われていますか？ → alt="" を使います。
6. それでも判断できませんか？ 公開前に画像がある理由を明確にしてください。推測してはいけません。

WCAG は一律の文字数制限を定めていません。必要な目的を伝える最短の代替テキストを使い、実質的な情報や構造化された情報は、長い alt ではなく、ページ上に見えるコンテンツとして記載してください。

画像が装飾かどうか迷っているなら、おそらく装飾ではありません。不要な代替テキストによる負担は小さい一方、代替テキストがないと意味が完全に失われることがあります。

---

重大：情報を伝える画像

情報を伝える画像は、近くのテキストでは提供されていない意味を加えます。

<img src="quarterly-growth.png" alt="Bar chart showing 23% revenue growth in Q3 2024">


<img src="quarterly-growth.png" alt="Blue and green bar chart">
<img src="quarterly-growth.png" alt="quarterly-growth.png">
<img src="quarterly-growth.png" alt="image">

文脈によって代替テキストは変わります。同じ画像でも、用途が異なれば異なる代替テキストが必要になる場合があります。

<img src="buddy.jpg" alt="Buddy, a golden retriever with a red collar">


<img src="buddy.jpg" alt="">


<img src="buddy.jpg" alt="Buddy waits beside his handler before crossing the street">

見た目そのものが情報となる場合（美術史、製品比較、デザイン批評）は、視覚的な描写が適切です。

---

中程度：装飾的な画像と冗長な画像

純粋に美的な目的で、周囲のテキストにない情報を加えず、取り除いても理解に影響しない場合に限り、装飾画像とみなします。

<img src="decorative-divider.png" alt="">
<svg aria-hidden="true" focusable="false">...</svg>


<img src="decorative-divider.png">

<img src="decorative-divider.png" alt="decorative">

<img> には role="presentation" よりも alt="" を優先してください。情報やコントロールの名称を提供する画像を隠すために、aria-hidden="true" を使ってはいけません。不要な説明も無害ではありません。読み上げ順を中断し、ナビゲーションをより疲れるものにします。

---

重大：機能を持つ画像

リンクまたはコントロールの唯一のコンテンツが画像の場合、アイコンの形状ではなく、アクションや遷移先を説明する必要があります。

<a href="/"><img src="acme-logo.svg" alt="Acme home"></a>


<a href="/reports/annual">
  <img src="report-cover.jpg" alt="">
  <span>2026 annual report</span>
</a>


<button type="button" aria-label="Close dialog">
  <img src="close.svg" alt="">
</button>


<input type="image" src="submit-order.png" alt="Submit order">

コントロールに表示テキストのラベルがある場合、アクセシブルネームにはその表示テキストを含める必要があります（音声入力をサポートし、WCAG 2.5.3「名前にラベルを含める」で必須です）。可能であれば、<input type="image">より、実際のテキストを含む通常の<button>を優先してください。

機能を持つ画像のaltを空のままにし、ほかにアクセシブルネームも指定しないと、ラベルのないコントロールが作成されます — 重大です。

---

中程度：複雑な画像

グラフ、図、地図、インフォグラフィックには、画像とその目的／主な結論を示す短い代替テキストと、値、ラベル、単位、傾向、比較、関係性を保持した、詳細な同等のコンテンツ（説明、データテーブル、順序付き手順など）の2つが必要です。

<figure>
  <img src="revenue-trend.png"
       alt="Line chart showing revenue rising each quarter in 2025. Data table follows.">
  <figcaption>
    <p>Revenue increased from $1.2 million in Q1 to $2.1 million in Q4.</p>
    <table>
      <caption>Quarterly revenue for 2025</caption>
      <thead><tr><th scope="col">Quarter</th><th scope="col">Revenue</th></tr></thead>
      <tbody>
        <tr><th scope="row">Q1</th><td>$1.2 million</td></tr>
        <tr><th scope="row">Q4</th><td>$2.1 million</td></tr>
      </tbody>
    </table>
  </figcaption>
</figure>

aria-describedbyだけに頼るより、誰もが見られる説明を優先してください。aria-describedbyで参照されるコンテンツは、単一の説明として公開されることが多く、見出しやテーブルなどの構造が失われる可能性があります。廃止されたlongdesc属性には頼らないでください。分野別のガイダンスについては、skills/charts-graphs/SKILL.mdとskills/maps/SKILL.mdを参照してください。

---

中程度：テキストの画像

テキストの画像より、実際のHTMLテキストを優先してください（WCAG 1.4.5）。実際のテキストはサイズ変更や再配置ができ、ユーザーが設定した色に適応し、より確実に翻訳できます。

<img src="sale-banner.png" alt="Summer sale: 50% off through July 31">


<img src="sale-banner.png" alt="">
<p><strong>Summer sale:</strong> 50% off through July 31.</p>

ポスターや、テキストを多く含むスキャン済みの掲示物の場合は、全文をページ上に表示し、画像についてはaltで識別してください。ロゴタイプは1.4.5において不可欠なテキスト画像ですが、それでも代替テキストが必要です。通常は組織名または製品名を指定し、ロゴがホームページへのリンクの唯一のコンテンツである場合は「ホーム」も含めます。

---

中程度：図とキャプション

<figcaption>があるからといって、情報を伝える<img>のaltを省略してよいわけではありません。関係性を意識して選んでください。キャプションがすでに完全な同等の内容を示している場合はalt=""を使用し、画像がキャプションを超える情報を加える場合はaltで補足します。キャプションが同等の内容ではなく、タイトル、クレジット、解説である場合は、画像にも独自の代替テキストが必要です。同じ文を両方に記載しないでください。著作権、ライセンス、写真クレジットの情報をaltだけに記載せず、目に見える形で残してください。

---

軽微：グループ、レスポンシブ画像、イメージマップ

**グループ：**複数の画像が1つの値（星評価など）を表す場合は、組み合わせた値を一度だけ示し、繰り返される単位にはalt=""またはaria-hiddenを指定してください。

<img src="star-filled.png" alt="Rating: 4 out of 5 stars">
<img src="star-filled.png" alt="">
<img src="star-empty.png" alt="">

レスポンシブ画像：altは<picture>内のフォールバックとなる<img>に指定し、<source>には指定しないでください。すべてのレスポンシブソースで、実質的に同じ情報を伝える必要があります。アートディレクションによって画像の意味が変わる場合、共通の代替テキストでは正確に説明できなくなることがあります。

イメージマップ：<img>には全体的なコンテキストを説明する代替テキストを指定し、各<area>には遷移先またはアクションを説明する独自のaltを指定してください。

<img src="campus-map.png" alt="Campus buildings" usemap="#campus-buildings">
<map name="campus-buildings">
  <area shape="rect" coords="20,30,120,100" href="/library" alt="Central Library">
</map>

インラインSVGについては、skills/svg/SKILL.mdを参照してください。<canvas>には同等のフォールバックコンテンツとキーボード操作可能な代替手段を用意してください。aria-labelだけでは、複雑なキャンバスのコンテンツを置き換えられません。

---

適切な代替テキストの書き方

1. 簡潔でありながら、必要な情報を漏らさないようにします。単純な画像は約125文字を目安にし、複雑な画像には長い説明を使います
2. 見た目ではなく内容と目的を説明します。ただし、媒体（写真／絵画／スクリーンショット）が意味、出典、解釈を左右する場合は、それも含めます
3. 文脈がすべてです。同じ画像でも使い方によって適切な代替テキストは異なるため、画像ごとに一度だけ書くのではなく、使用する文脈ごとに作成します
4. 「画像」「写真」「写真画像」で始めないようにします。ただし、媒体そのものが重要な場合は除きます。どのような場合でも使ってはいけない表現があるわけではありません
5. キーワードの詰め込み、ファイル名、SEO／マーケティング向けの表現は避けます。代替テキストは検索エンジンではなく、ユーザーのためのものです
6. 画像内に重要なテキストがある場合は、それも含めます
7. 人物の名前を使うのは、本人が特定されていて、その情報が関連性を持ち、公開するのが適切な場合に限ります。目に見える特徴を説明するのは、その説明が目的に役立つ場合のみとし、人種、障害、感情などのセンシティブな属性を推測しないでください
8. 音声合成や点字で理解できるよう、ページの言語を使い、通常の大文字・小文字と句読点で記述します

---

よくある不適切な代替テキストのパターン

パターン	深刻度	修正方法
情報を伝える<img>にaltがない	重大	同等の代替情報を用意します
装飾目的の<img>にaltがない	重大	alt=""を使用します
altにファイル名やCMSが挿入したテキストを使用している	重大	文脈に即して作成したテキストに置き換えます
一般的なプレースホルダー（「画像」「写真」「グラフ」「alt」）	重大	関連する内容や目的を説明します
alt="decorative"／alt="spacer"	重大	alt=""を使用します
下書き用プレースホルダー（「TBD」「TODO」「null」「undefined」）	重大	適切な判断がなされるまで公開を禁止します
媒体が重要でないのに「画像…」「写真…」などで始める表現	中程度	内容を直接説明します
代替テキストが隣接する<figcaption>と一字一句同じ	中程度	alt=""を使用するか、補完的な内容にします
人物のポートレートに名前だけを使った代替テキスト	中程度	関連性があり、分かっている場合は役割や文脈を含めます
altの代わりにtitleを使用している	重大	altを使用し、ホバー時にしか表示されないテキストに頼らないでください
<img>にaltではなくaria-labelを追加している	中程度	標準のalt属性を使用します
グラフのデータ全体を1つの長いaltに詰め込んでいる	中程度	短い代替テキストと、視認できる構造化データを使用します
画像単位の代替テキストを、どの文脈でも再利用している	中程度	使用する場面ごとに代替テキストを作成します
AIが生成したテキストを確認せずに公開している	重大	文脈を踏まえた人間による承認を必須にします

---

CSSの背景画像

CSSのbackground-imageはaltをサポートしていません。装飾目的の場合、または同等の情報が実際のコンテンツとしてすでに存在する場合にのみ使用します。

/* OK: decorative */
.hero { background-image: url('geometric-pattern.svg'); }

<div class="award-badge"></div>


<p class="award-badge">Winner, 2026 Inclusive Design Award</p>

背景画像は、ユーザースタイル、強制配色、印刷、コンテンツブロッカーによって表示されなくなることがあります。重要なコンテンツや機能を背景画像に依存させてはいけません。

---

CMSとコンテンツ作成の要件

コンテンツシステムは、空でないフィールドを要求するだけでなく、適切な判断を支援する必要があります。作成者が必須の選択肢（情報提供／機能的／装飾的または重複／詳細な説明が必要）を選べるようにし、意図的に空の値を設定できるaltフィールドと、画像の使用箇所に関する文脈を提供します。空のaltフィールドにファイル名、キャプション、アセットのタイトルを自動入力しないでください。キャプション、クレジット、代替テキストはそれぞれ用途が異なります。

**次の場合は公開をブロックします：**代替テキストについて判断されていない場合、情報を伝える画像に代替情報または同等の視認できるテキストがない場合、機能を持つ画像でコントロールの機能が示されていない場合、複雑な画像に詳細な代替情報がない場合、プレースホルダーやファイル名が代替情報として挿入されている場合。フィールドが空であることだけを理由に、意図的なalt=""をブロックしないでください。その画像がその用途では装飾目的であることを、作成者に確認するよう求めてください。

---

AI 支援による代替テキスト

AI は説明文の下書きを提案できますが、編集上の目的、対象読者、冗長性を確実に把握することはできません。AI 支援ワークフローでは、次の点に対応する必要があります。視覚的な情報を列挙するのではなく、目的に相当するテキストを求めること、情報提供用／機能用／装飾用／複雑な用途を区別すること、詳細を捏造せず不確かな点を明示すること、機微な属性を推測したり、身元が不明な人物を特定したりしないこと、承認されていないサービスに非公開の画像やメタデータを送信しないこと、責任者が実際に表示された文脈で提案を確認するよう求めること、複雑な画像については人が詳細な代替テキストを作成するよう依頼することです。AI が生成した確信度によって編集上の説明責任を置き換えないでください。流暢な説明であっても、不正確、偏見を含む、または安全でない可能性があります。

---

自動テストと人によるテスト

自動ツールで検出できる項目	人による確認が必要な項目
alt 属性の欠落	代替テキストに意味があるか
機能を持つ画像の alt が空であること	代替テキストが文脈に合っているか
代替テキストがファイル名と同じであること	装飾用画像に本当に代替テキストが必要か
疑わしい前置きの表現、既知のプレースホルダー	説明が適切な意味を伝えているか
代替テキストが隣接する figure のキャプションと同一であること	代替テキストとキャプションのどちらを残すべきか
画像ボタン／イメージマップ領域の名前の欠落	複雑な説明が関係性を保持しているか

axe-core などの自動ツールは構造上の問題を検出しますが、品質を評価するには常に人による確認が必要です。結果とともにツール／ルールのバージョンを記録し、確認された問題は skills/bug-reporting/SKILL.md に従って報告してください。

---

完了条件チェックリスト

• すべての画像の用途が明示され、代替テキストの要否が判断されている
• 意味のあるすべての <img> に、正確で文脈に即した alt が設定されている
• 装飾用または完全に冗長なすべての <img> に alt="" が設定されている
• ファイル名、プレースホルダー、キーワードの羅列、無関係なメタデータを alt に使用していない
• 機能を持つ画像に、役立つリンク名またはコントロール名が設定されている。表示されるラベルがアクセシブルな名前に含まれている
• 画像にしか表示されない重要な語句が、テキストとしても利用できる
• 複雑な画像に、簡潔な識別情報とアクセシブルな詳細版の代替が用意されている
• キャプションと代替テキストが、互いに重複せず補完し合っている
• レスポンシブな <picture> のソースが同じ重要な意味を伝えている。alt はフォールバックの <img> に設定されている
• CSS の背景画像が情報や機能の唯一の提供元になっていない
• 代替テキストがページの言語で書かれ、翻訳ワークフローに含まれている
• 説明で身元、感情、機微な属性を捏造していない
• AI が生成した提案に対して、文脈を踏まえた人による確認が行われている
• スクリーンリーダー（NVDA + Firefox または VoiceOver + Safari）でテストされている

---

主な WCAG 基準

• 1.1.1 非テキストコンテンツ（A） — 意味のある画像にテキストによる代替がない場合は重大
• 1.4.5 文字画像（AA） — 文字画像より実際のテキストを優先する
• 1.4.9 文字画像の例外なし（AAA）
• 2.4.4 リンクの目的（文脈内）（A） — 画像のみのリンクと複合リンクでは、目的が伝わる必要がある
• 2.5.3 ラベルを名前に含める（A） — 表示されるコントロールのテキストをアクセシブルな名前に含める必要がある
• 4.1.2 名前、役割、値（A）

---

参考資料

• ベストプラクティスの完全ガイド
• W3C WAI — 画像のチュートリアルと判断ツリー
• WCAG 2.2 — 1.1.1 非テキストコンテンツ
• WebAIM — 効果的な代替テキストの書き方
• Sa11y — 疑わしい代替テキストのパターンを検出します
• axe-core のルール：image-alt、image-redundant-alt、input-image-alt、area-alt、object-alt