WCAG 2.2でいう「テキストの代替」は、画像や動画、アイコン、図表、画像ボタンなど、文字だけではない情報を、別の方法でも理解できるようにするための考え方です。代表例は画像のaltテキストですが、実務ではそれだけに限りません。リンクやボタンの名前、動画の字幕、図表の説明、フォーム部品のラベルなども、利用者が内容や操作を理解するための重要な手掛かりになります。
この記事では、既存の記事内容をもとに、WCAG 2.2の「非テキストコンテンツ」とテキスト代替の考え方を、制作・運用の現場で判断しやすい形に整理します。
テキストの代替とは何か
テキストの代替とは、画像や音声、動画、図表、アイコンのような非テキスト情報について、同じ目的を果たす言葉を用意することです。視覚情報を見られない人、音声を聞き取りにくい人、画像が読み込めない環境の人、スクリーンリーダーや点字ディスプレイを使う人が、情報や操作の意味を理解できるようにします。
大切なのは、見た目を細かく説明することではなく、そのページでその要素が担っている意味や機能を伝えることです。たとえば、同じ人物写真でも、採用ページなら「社員がミーティングしている様子」が意味を持つかもしれません。一方、単なる装飾として置かれているだけなら、読み上げ対象にしないほうが使いやすい場合があります。
| 対象 | 利用者に伝えるべきこと | 実装の考え方 |
|---|---|---|
| 画像・写真 | 画像が本文の理解に必要か、どんな意味を持つか | 意味がある画像は短い代替テキストを付け、装飾画像は空のaltなどで読み上げ対象から外す |
| 図表・グラフ | 全体の傾向、重要な比較、読み取るべき結論 | 短い説明に加え、本文や表で詳しい内容を補う |
| リンク・ボタン | 押すと何が起きるか、どこへ移動するか | 「こちら」ではなく「資料をダウンロードする」のように目的が分かる文言にする |
| 動画・音声 | 音声情報、映像だけで伝えている内容、操作に必要な情報 | 字幕、文字起こし、音声解説などを内容に応じて用意する |
WCAG 2.2での位置づけ
WCAG 2.2では、テキスト代替は主に「1.1.1 非テキストコンテンツ」として扱われます。これは、利用者に提示される非テキストコンテンツに対して、同じ目的を果たすテキスト代替を提供するという考え方です。
ただし、すべてを同じ方法で説明すればよいわけではありません。装飾だけの画像、入力や操作に使う画像、動画や音声、テスト問題、CAPTCHAなどは、それぞれ考え方が異なります。実装時は「この要素がなくなると、利用者は何を理解できなくなるか」を起点に判断すると迷いにくくなります。
非テキストコンテンツの基本
非テキストコンテンツとは、文字として提供されていない情報や機能のことです。画像、アイコン、図表、音声、動画、画像ボタンなどが該当します。これらに対する代替は、利用者が内容を理解するための説明であり、単なるファイル名や「画像」「写真」といった曖昧な言葉では不十分です。
たとえば、グラフなら「グラフ」ではなく、何を比較し、どの傾向を示しているのかを本文や表で補います。装飾画像なら、意味のない読み上げが増えないように読み飛ばせる実装にします。
リンクやボタンは操作の目的を伝える
リンクやボタンでは、見た目の説明よりも「何をするための操作か」が重要です。スクリーンリーダー利用者はリンクだけを一覧で確認することがあるため、「こちら」「詳細」だけでは移動先や操作内容が分かりません。
- 分かりにくい例：こちらをクリック
- 分かりやすい例：アクセシビリティ改善資料をダウンロードする
- 分かりにくい例：詳細を見る
- 分かりやすい例：料金プランの詳細を見る
画像だけのボタンを使う場合も同じです。虫眼鏡のアイコンなら「検索」、カートのアイコンなら「カートを見る」のように、利用者が操作結果を予測できる名前を用意します。
よい代替テキストを書くための判断基準
画像の代替テキストは、短ければよい、長ければ丁寧というものではありません。ページの文脈に合っていて、利用者が次の判断をできることが大切です。
1. その要素は情報を持っているか
本文と同じ内容を繰り返しているだけの画像や、雰囲気づくりのための装飾画像は、読み上げる必要がない場合があります。一方、商品写真、操作アイコン、図解、警告を示す画像などは、意味や機能を伝える必要があります。
2. 何を伝えると本文が理解しやすくなるか
代替テキストは、画像の全要素を描写する場所ではありません。本文の理解に必要な情報を選びます。たとえば、記事の主題が「問い合わせ導線の改善」であれば、人物の服装よりも、画面上で問い合わせボタンがどこに配置されているかのほうが重要になることがあります。
3. 複雑な情報は本文で補う
グラフやチャートの内容を短いaltだけで説明しようとすると、かえって分かりにくくなります。短い代替テキストで図表の役割を示し、本文中の説明やデータ表で詳しい内容を補うほうが実用的です。
実装時のチェックリスト
- 画像の意味や機能が本文の文脈に合って説明されているか。
- 装飾画像に不要な説明を入れていないか。
- 図表やチャートの重要な情報を本文や表でも読めるようにしているか。
- リンクやボタンの文言だけで、移動先や操作内容が分かるか。
- 画像ボタンやアイコンボタンに、支援技術へ伝わる名前があるか。
- 動画に字幕や文字起こしなど、音声情報を補う手段があるか。
- 映像だけで重要な情報を伝えていないか。
- 代替テキストが古い内容のまま残っていないか。
- 「画像」「クリック」など、利用者の判断に役立たない言葉で済ませていないか。
- スクリーンリーダーなどの読み上げ環境で、意味の通る順序になっているか。
SEOとの関係は副次的に考える
テキスト代替は検索エンジンに画像やページ内容を理解させる手掛かりにもなります。ただし、主目的はあくまで利用者に情報や操作を伝えることです。キーワードを詰め込んだ代替テキストは、読み上げ時の負担になり、内容理解を妨げます。
検索で見つけてもらうためにも、まずはページの文脈に合った自然な説明にします。結果として、画像の意味、リンク先、ページ全体のテーマが整理され、検索にも利用者にも分かりやすいコンテンツになります。
運用で定着させるポイント
テキスト代替は、公開直前に一括で付ける作業にすると品質が安定しません。企画、デザイン、実装、記事制作、更新運用の各段階で確認できるようにしておくことが大切です。
- デザイン時点で、画像やアイコンが「情報」なのか「装飾」なのかを決めておく。
- CMS入稿時に、画像ごとの代替テキストを必須確認項目にする。
- 図表を使う記事では、本文内に要点説明やデータ表を用意する。
- リンク文言は、単独で読んでも目的が分かる表現にする。
- 公開後に画像やCTAを差し替えたときは、代替テキストも更新する。
こうした運用は、Webアクセシビリティの基本対応として、サイト改善の早い段階から組み込んでおくと効果的です。
まとめ
WCAG 2.2におけるテキストの代替は、画像に説明を付けるだけの作業ではありません。非テキスト情報を、見えない、聞こえない、操作しづらい状況でも理解できるようにするための設計です。
実務では、まず「その要素がページ内で何を伝えているか」を考えます。意味があるなら適切に説明し、装飾なら読み上げ対象から外し、複雑な情報なら本文や表で補います。この判断を積み重ねることで、より多くの人に伝わるWebコンテンツへ近づきます。
当社では、Webアクセシビリティを簡単に導入できるUUUウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上に取り組みたい方は、詳細をご覧ください。