WCAG 2.2の達成基準1.1.1「非テキストコンテンツ」は、画像やアイコンなど、文字だけではない情報に、同じ目的を果たすテキストの代替手段を用意するための基準です。
実装では「すべての画像を詳しく説明する」のではなく、その画像が情報を伝えるのか、操作を担うのか、装飾なのかを見分けます。
この記事では、役割ごとの判断方法をHTMLの例とともに整理し、音声や動画、フォームのエラー表示との範囲の違いも説明します。
非テキストコンテンツとテキストによる代替
非テキストコンテンツとは、画像、アイコン、グラフ、音声、動画など、文章としてそのまま読み取れないコンテンツです。
テキストによる代替とは、その内容や目的を文字で受け取れるようにする情報を指します。
HTML画像のalt属性が代表例ですが、複雑な図表では本文の説明やデータ表も使います。
テキストで用意しておけば、スクリーンリーダーで内容を読み上げるなど、利用者に合った方法で情報を受け取れます。
役割によって代替方法を選ぶ
代替テキストは、画像の見た目だけでなく、ページ内で果たす役割に合わせて決めます。
| 役割 | 例 | 基本的な対応 |
|---|---|---|
| 情報を伝える | 写真、イラスト | 同じ情報や目的を短い代替テキストで伝える |
| 操作を担う | リンク画像、アイコンボタン | 見た目ではなく、移動先や操作の目的を伝える |
| 複雑な情報を伝える | グラフ、図解 | 短い代替テキストに加え、本文や表で詳しく説明する |
| 装飾だけに使う | 区切り線、背景の飾り | 支援技術が無視できるようにする |
| 時間とともに変化する | 音声、動画 | 内容を識別できる説明を付け、必要な字幕などは時間依存メディアの基準で確認する |
同じ画像でも、置かれた文脈が変われば適切な代替テキストも変わります。
作成前に「この画像が利用できなくても、同じ情報または操作を理解できるか」を確認すると、判断しやすくなります。
画像とアイコンの実装例
情報を伝える画像
商品画像には、画像から読み取れる特徴を簡潔に記述します。
<img src="tshirt.jpg" alt="赤い半袖Tシャツの正面">商品名、素材、サイズなどが本文や商品情報欄に書かれているなら、同じ内容をalt属性へ重ねて詰め込む必要はありません。
代替テキストの詳しい考え方は、画像と代替テキストの実務ガイドでも確認できます。
装飾だけの画像
情報も機能も持たない装飾画像には、空のalt属性を指定します。
<img src="decorative-line.jpg" alt="">alt=""は「説明を書き忘れた」という意味ではなく、読み上げる情報がないことを示す指定です。
alt属性そのものを省略すると、ファイル名などが読み上げられる場合があるため、装飾画像では空の属性を明示します。
リンクに使うアイコン
リンク画像では、アイコンの形ではなく移動先を伝えます。
<a href="/home">
<img src="home-icon.png" alt="ホーム">
</a>alt="家のアイコン"では外観しか伝わりませんが、alt="ホーム"ならリンクの目的を理解できます。
反対にalt属性がないと、利用環境によっては「リンク」やファイル名だけが読み上げられ、移動先を判断できません。
グラフや図表は短い説明と詳細を分ける
グラフの結論を短く表せる場合は、alt属性で概要を伝えます。
<img src="sales-chart.png"
alt="月別売上の推移。1月から3月にかけて増加">ただし、複数の数値や系列をすべてalt属性に詰め込むと、かえって内容を追いにくくなります。
判断に必要な数値は画像の近くに文章やデータ表で示し、画像を見なくても同じ結論に到達できるようにします。
音声と動画は別の基準も確認する
音声や動画も非テキストコンテンツなので、まず何のメディアなのかを識別できる見出しや説明が必要です。
そのうえで、録音音声の文字起こしや動画の字幕、映像内容の説明などは、WCAG 2.2の時間依存メディアに関する基準も確認します。
音声に文字起こしを用意する例
<h3>音声：Webアクセシビリティの基本</h3>
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
このブラウザでは音声を再生できません。
</audio>
<p><a href="podcast-transcript.html">音声の文字起こしを読む</a></p>文字起こしでは会話だけでなく、内容の理解に必要な話者や効果音も区別できるようにします。
動画にキャプションを用意する例
<video controls>
<source src="example-video.mp4" type="video/mp4">
<track src="captions-ja.vtt"
kind="captions"
srclang="ja"
label="日本語">
</video>キャプションは発話だけでなく、内容の理解に必要な音の情報も文字で伝えます。
フォームのエラー表示とは分けて考える
フォームのエラー表示は、達成基準1.1.1の中心となる対象ではありません。
エラーを画像やアイコンだけで伝える場合は、その非テキスト情報に代替手段が必要ですが、入力欄との関連付けやエラー通知の方法は別の要件も含めて設計します。
実装時は、フォームの入力支援とエラー設計もあわせて確認してください。
公開前の確認項目
- 画像を、情報、操作、複雑な図表、装飾のどれに当たるか分類した
- 情報を伝える画像の
alt属性が、ページ内での目的に合っている - リンク画像やアイコンボタンの名前から、移動先や操作を理解できる
- 装飾画像に空の
alt属性を指定した - グラフの詳しい内容を、画像以外の文章や表でも確認できる
- 音声や動画を識別でき、該当する時間依存メディアの要件も確認した
- キーボード操作とスクリーンリーダーで、代替情報の伝わり方を確認した
この一覧は、代替テキストの有無だけでなく、内容が画像の目的に合っているかを確認するために使います。
継続的な確認につなげる
適切な代替テキストは、画像を追加したときだけでなく、リンク先や本文の意味を変更したときにも見直す必要があります。
制作と更新の手順に確認項目を組み込み、公開後も実際の読み上げや操作を確かめると、説明と機能のずれを減らせます。
サイト全体のWebアクセシビリティ対応を検討している方は、UUU ウェブアクセシビリティのサービス内容もご覧ください。