WCAG 2.2の達成基準1.4.9「画像テキスト（例外なし）」は、文字を画像の一部として提示する場面をLevel AAAで制限する基準です。
伝えたい文字は原則としてHTMLのテキストで記述し、見た目をCSSで整えます。
例外として画像テキストを使えるのは、純粋な装飾である場合と、特定の見せ方が情報の伝達に不可欠な場合です。
ロゴやブランド名に含まれる文字は、後者に当たります。
達成基準1.4.9が求めること
画像テキストとは、利用者に読ませる文字列を、選択できる通常の文字ではなく画像の一部として表示したものです。
文字を含むバナー、見出し画像、ボタン画像などが該当します。
W3Cの達成基準1.4.9は、画像テキストの使用を「純粋な装飾」または「特定の提示が情報に不可欠」な場合に限定しています。
名前に「例外なし」とありますが、装飾と不可欠な提示まで禁止するという意味ではありません。
1.4.5との違い
画像テキストを扱う達成基準には、Level AAの1.4.5もあります。
両者の違いは、利用者が見た目を変更できる画像テキストを例外として認めるかどうかです。
| 達成基準 | 適合レベル | 画像テキストを認める条件 |
|---|---|---|
| 1.4.5「画像テキスト」 | AA | 利用者の要望に合わせて視覚表現を変更できる場合、または特定の提示が情報に不可欠な場合 |
| 1.4.9「画像テキスト（例外なし）」 | AAA | 純粋な装飾である場合、または特定の提示が情報に不可欠な場合 |
画像テキストが読みにくさを生む理由
画像の中に固定された文字は、通常のテキストと同じ方法では表示を調整できません。
文字サイズ、文字色、背景色、フォント、行間、配置を変えて読む利用者にとって、必要な見え方を選びにくくなります。
- 画面を拡大しても、文字の表示方法そのものは変更できません。
- 小さな画面では、画像全体を縮小した結果、文字も小さくなることがあります。
- 画像内の文字は、そのままでは支援技術が文字列として扱えません。
- 通常のテキストなら利用できるブラウザや翻訳ツールの文字処理を活用しにくくなります。
この問題は、画像に代替テキストを付けるだけでは解消しません。
代替テキストの役割は、後の節で分けて説明します。
実装の基本はHTMLとCSS
セールの告知やキャンペーン見出しなど、文字そのものが情報である場合はHTMLで記述します。
装飾はCSSに分けると、文字列を保ったまま画面幅に合わせて表示を調整できます。
HTMLの例
<p class="campaign-title">期間限定セールを開催中</p>CSSの例
.campaign-title {
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.4;
color: #222;
background-color: #fff2cc;
padding: 1rem;
text-align: center;
}この実装では、告知文が画像の画素ではなくテキストとして残ります。
デザインを固定した画像を作る前に、HTMLとCSSで同じ役割を実現できないかを確認します。
二つの例外をどう判断するか
例外の判断では、画像を使いたい理由ではなく、文字の見せ方を固定する必要性を確認します。
| 場面 | 判断の目安 | 実装上の注意 |
|---|---|---|
| 純粋な装飾 | 画像内の文字らしい形を取り除いても、情報や機能が失われない | 支援技術が無視できるよう、装飾画像には空のalt属性を設定する |
| 特定の提示が不可欠 | 文字の見せ方そのものを変えると、伝える情報が成立しない | 画像が担う内容や目的に応じた代替テキストも検討する |
| ロゴやブランド名 | WCAGでは、ロゴやブランド名の一部である文字を不可欠な提示として扱う | ロゴの内容やリンク先が分かる代替テキストを付ける |
| デザインを統一したい | 見た目を固定したいという理由だけでは、二つの例外に当たらない | HTMLとCSSへの置き換えを優先する |
alt属性と1.4.9は別の課題
alt属性は、画像を見られない利用者や画像を表示しない環境に、画像の内容や目的を伝えるために使います。
しかし、alt属性を付けても、画面に表示された画像内の文字を拡大したり、配色やフォントを変更したりできるようにはなりません。
次のコードは、画像の内容を代替テキストで伝えています。
それでも、セール告知を画像にする必要が二つの例外で説明できなければ、1.4.9への対応としてはHTMLのテキストへ置き換えます。
<img src="sale-banner.png" alt="期間限定セールを開催中">一方、ロゴは不可欠な提示として扱われます。
ロゴ画像を使う場合も、画像の用途に合わせて会社名などを代替テキストにします。
<img src="brand-logo.png" alt="〇〇株式会社">純粋な装飾画像には空のalt属性を指定します。
空のalt属性が問題になるのは、その画像が情報や機能を担っている場合です。
<img src="decorative-lettering.png" alt="">実装とレビューの確認手順
- 文字を含む画像を洗い出す：バナー、見出し、ボタン、告知画像を確認します。
- 画像内の文字が情報かを判断する：取り除いたときに意味や機能が失われるなら、純粋な装飾ではありません。
- 例外に当たるかを判断する：特定の提示が不可欠か、ロゴやブランド名かを確認します。
- 通常のテキストへ置き換える：例外でなければHTMLで記述し、CSSで見た目を整えます。
- 代替テキストを別に点検する：画像の内容と用途に合わせ、内容のあるalt属性または空のalt属性を選びます。
- 表示を確認する：画面幅や文字サイズを変えても、文字が読めて情報が欠けないかを確認します。
スキャンされた文書を掲載する場合
スキャンPDFなどでは、見た目は文字でも内部では画像として保存されていることがあります。
OCR（光学文字認識）で文字を抽出し、利用者がテキストとして扱える形を用意します。
OCRを実行しただけで作業を終えず、抽出した文字が原文どおりかを確認します。
文書全体のアクセシビリティは画像テキスト以外の要件も含むため、別途点検が必要です。
実装で押さえる要点
- 1.4.9で画像テキストを使えるのは、純粋な装飾または特定の提示が情報に不可欠な場合です。
- ロゴやブランド名に含まれる文字は、不可欠な提示として扱われます。
- 代替テキストは必要な情報を伝える手段ですが、非例外の画像テキストを1.4.9に適合させる代わりにはなりません。
- 文字情報はHTMLで記述し、デザインをCSSに分けることが実装の基本です。
画像テキストを減らすと、利用者が自分に合う表示へ調整しやすくなり、画面幅が変わる環境にも対応しやすくなります。
まずは、見出し画像と告知バナーから、通常のテキストへ置き換えられるかを確認してください。
当社では、Webアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。
アクセシビリティ対応を進めたい方は、サービスの詳細をご覧ください。