代替テキストのガイドライン

1.1.1 非テキストコンテンツ (レベル A)

作成日: 2024.4.10 / 最終修正日: 2026.5.12

画像には代替テキストを提供する

この達成基準は、すべての画像や動画などの非テキストコンテンツについて、スクリーンリーダーなどの支援技術を使用する利用者を含め、誰もが情報を得られるようにすることを目的としています。代替テキストを提供することで、非テキストコンテンツの内容を理解しやすくします。

実践すべきこと

代替テキスト（alt属性）の設定

• すべての画像（img要素）には、必ずalt属性を設定する。
• 情報の伝達が目的の画像には、内容や役割を説明するテキストを入れる。
• 装飾目的の画像には、空のalt属性（alt=""）を設定し、支援技術が無視できるようにする。

リンク・ボタン画像の記述

• 画像がリンクやボタンとして機能している場合は、見た目の説明ではなく「お問い合わせ」「次のページへ」といった「目的や動作」を記述する。

顔文字・絵文字の扱い

• 顔文字（ (^_^) ）の使用は避ける。
• 絵文字（ 😊 ）を使用し、それが重要な意味を持つ場合は、テキストによる補足を検討する。

運用者への注意

代替テキストの適切さ

• 「画像です」「ロゴです」といった不要な説明を省き、簡潔な表現（「〇〇株式会社 ロゴ」など）にする。
• 写真は「〇〇の写真」と記述してもよいが、単なるイメージ画像であれば簡潔に内容のみを記す。

文字画像の回避

• 画像内に文字が含まれる場合、可能な限り画像ではなくHTMLのテキストで再現する。
• やむを得ず文字画像にする場合は、画像内の文字をすべて代替テキストに含める。

状況に応じた使い分け

• 同じ画像でも、文脈によって必要な代替テキストが変わることを意識する（例：単なる風景写真か、撮影場所の紹介か）。

開発者への注意

SVGやアイコンフォントの対応

• SVGを画像として使用し、意味を持つ場合は role="img" と aria-label を組み合わせて設定する。
• アイコンフォントや装飾的なSVGは aria-hidden="true" を指定し、読み上げから除外する。

WAI-ARIAの適切な利用

• 必要に応じて aria-label を設定するが、可能な限り標準の alt 属性やテキストでの補完を優先する。
• role="img" と aria-hidden="true" は矛盾するため併用しない。

iframeのタイトル設定

• iframe要素には、その中身を端的に表す title 属性（例：title="SNSの投稿埋め込み"）を必ず設定する。

CSS背景画像の制限

• 情報を伝えるために必要な画像はCSS（background-image）で表示せず、必ずimg要素を使用する。CSS背景画像は純粋な装飾のみに限定する。

今のWeb環境で気をつけたい点

• Windows の高コントラストモードなどでは CSS の背景画像が表示されないことがあるため、重要なアイコンは HTML 要素（img や SVG）で実装するとよいです。
• 透過 PNG のロゴなどがダークモードで背景に沈んで見えなくなる場合があります。視覚的な情報伝達が損なわれないよう、画像の作り方に注意するとよいです。
• AI が代替テキストを自動生成する場合、誤った情報が含まれることがあるため、公開前に文脈に合うか人が確認するとよいです。

参考リンク

解説書 達成基準 1.1.1: 非テキストコンテンツ (レベル A)

目次へ戻る