はじめての WCAG 2.2 図と具体例で学ぶ解説書

解説書 / 1.1.1 非テキストコンテンツ

LEARN BY EXAMPLE

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

画像を見なくても内容がわかる。

試作版主に関わる領域：企画・デザイン・開発更新 2026-11-09

概要

画像や図、音声などには、同じ目的を果たすテキストによる代替を用意します。 画像を見られない人も代わりの文章を読み上げたり点字にしたりして、情報を得られるようにします。装飾など、内容に応じて扱いが変わる場合もあります。

画像を見ないと、日時がわからない？

利用者が困る例 「告知画像」だけでは内容が伝わらない

今月のイベント

比較用の告知画像 まちのデザイン展。11月15日、10時から17時。会場、まちのギャラリー。

読み上げ内容の例

「告知画像」

いつ、どこで開催される？
画像の中だけにある日時や会場が伝わりません。

改善した例 開催情報をテキストでも伝える

今月のイベント

比較用の告知画像 まちのデザイン展。11月15日、10時から17時。会場、まちのギャラリー。

読み上げ内容の例

「まちのデザイン展。11月15日、10時から17時。会場、まちのギャラリー。」

日時と会場を確認できる。
画像を見られなくても、開催情報が伝わります。

図：同じ告知画像に、不十分な説明を付けた場合と開催情報を付けた場合の比較。読み上げ内容は説明用の例です。実際の読み方は環境によって異なります。この比較図の画像にはどちらにも内容を伝える説明を付けています。イベント名・会場・日時は架空のものです。

達成できないと起こる問題の例

展示会の告知ページで、イベント名・日時・会場が1枚の画像にだけ書かれています。画像の代わりに伝わる文章は「告知画像」だけです。

スクリーンリーダーを使う利用者には、何かの告知があることしか伝わりません。どの展示会が、いつ、どこで開かれるのかを確認できず、参加の予定を立てられません。

達成するための改善例

同じ画像に「まちのデザイン展。11月15日、10時から17時。会場、まちのギャラリー。」という代替テキストを付けます。画像を見られなくても、イベント名・日時・会場がわかります。

この画像の目的は展示会の開催情報を伝えることです。「黄色と緑の図形を使った画像」と見た目を説明するだけでは、必要な情報が伝わりません。

確認のポイント

  • 画像が見えなくても、その画像で伝えている情報や、操作の目的がわかりますか。
  • 告知や図表などに、画像の中だけにある情報が残っていませんか。
  • 画像の代わりの文章はファイル名や「画像」だけになっていませんか。
  • 純粋な装飾がスクリーンリーダーで不要に読み上げられないようにしていますか。

条件と補足

画像の役割と文脈に合わせて書く

同じ画像でも、何のために置かれているかで、必要な文章は変わります。

画像の役割 伝えることの例
情報を伝える画像 告知なら開催情報、グラフならデータや傾向など、画像が伝える情報。
操作に使う画像 検索ボタンの虫眼鏡なら「検索」など、その操作の目的。
純粋な装飾 内容の理解や操作に必要な情報がなければ、支援技術が無視できるようにする。

alt属性は、代替テキストを付ける方法の一つ

HTMLの画像要素には、画像の代わりに伝える文章を指定する「alt属性」があります。図の「改善した例」ではこの方法でイベント名・日時・会場を伝える場面を扱っています。

純粋な装飾を画像要素で置く場合は、alt="" のように空のalt属性を付け、title属性を付けない方法があります。alt属性そのものを省略することとは異なります。

複雑な図表など、短い文章だけでは同じ情報を伝えきれない場合は、詳しい説明も用意します。画像の短い代替テキストから、その説明がどこにあるかを示す方法もあります。

内容に応じて扱いが変わる6つの場合

次の場合も、それぞれに必要な対応があります。「説明を何も付けなくてよい」という一律の免除ではありません。

区分 必要な対応
コントロール、入力 ボタンなどの操作部品や入力を受け付けるものには、その目的を説明する名前を付けます。その他の要件は4.1.2も確認します。
時間依存メディア 動画や音声などには、少なくとも何のメディアかを識別できる説明を付けます。字幕などの要件はガイドライン1.2で別に確認します。
テスト 文章で示すと成立しなくなるテストや練習には、少なくとも何のテストや練習かを識別できる説明を付けます。
感覚的 芸術作品など、特定の感覚的体験を生むことが主な目的なら、少なくとも何であるかを識別できる説明を付けます。
CAPTCHA 人間によるアクセスかを確かめる仕組みには、その目的を特定して説明するテキストを付けます。さらに、異なる感覚でも知覚できる代替形式を用意し、様々な障害に対応します。
装飾、整形、非表示 純粋な装飾、見た目を整えるためだけのもの、利用者に提示しないものは、支援技術が無視できるように実装します。

画像の文字を読めることも別に確認する

代替テキストがあっても、画面を見て読む人への配慮は必要です。文字を画像にする必要があるかは1.4.5「文字画像」、文字と背景の明るさの差は1.4.3「コントラスト（最低限）」などでも確認します。

この改善例は告知画像の情報をテキストで伝えることについてのものです。ページやサイト全体のWCAG適合を示すものではありません。

参照資料

テクニックは達成する方法の例です。すべての非テキストコンテンツにalt属性を付けることが、この基準の要件ではありません。

出典の最終確認: 2026-11-08。画面と説明文は、この教材のために作った例です。