WCAG 2.2 ガイドライン「1.4.9 画像テキスト（例外なし）」Level AAA について
はじめに
WCAG 2.2の「1.4.9 画像テキスト（例外なし）」は、情報を伝えるためにテキストを画像として使用することを基本的に禁止しています。
例外として認められるのは以下の場合のみです：
- 純粋な装飾として使用されている。
- 情報伝達に特定のプレゼンテーションが必要である。
- ロゴやブランド名の一部である（これらは情報として不可欠とみなされる）。
この記事では、画像テキストの問題点と代替方法を、HTML、CSS、JavaScriptを使用して具体的に解説します。
1. 画像テキストの問題点
a. アクセシビリティの低下
- 拡大やカスタマイズが困難：画像はテキストのように拡大や色の変更ができません。
- 支援技術の非対応：スクリーンリーダーは画像内のテキストを読み上げることができません（適切な代替テキストがない場合）。
b. ユーザー体験の低下
- 小さい画面では読みづらくなる。
- 読みやすいフォントや色の設定をユーザーが利用できない。
2. 基準を満たす方法
a. HTMLとCSSでテキストをスタイリング
画像テキストを使用せず、HTMLとCSSでテキストを視覚的にデザインします。
HTMLとCSSの例
<p class="styled-text">このテキストは画像ではなく、HTMLとCSSでスタイリングされています。</p>
.styled-text {
font-family: 'Arial', sans-serif;
font-size: 2em;
color: #333;
text-shadow: 1px 1px 2px #aaa;
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
- テキストを柔軟に拡大・縮小でき、アクセシビリティが向上します。
b. 特定のプレゼンテーションが必要な場合
特定のデザインが情報伝達に不可欠な場合、CSSでそのデザインを再現し、画像テキストを使用しないようにします。
HTMLとCSSで再現例
HTML
<h1 class="fancy-heading">特別セール開催中！</h1>
CSS
.fancy-heading {
font-family: 'Impact', sans-serif;
font-size: 3em;
color: #ffffff;
background-color: #ff5733;
text-transform: uppercase;
padding: 10px;
text-align: center;
}
c. 例外的に画像テキストを使用する場合
ロゴやブランド名など、画像テキストの使用が不可避な場合は、代替テキスト（alt属性）を必ず提供します。
例外適用例
<img src="brand-logo.png" alt="会社名のロゴ">
注意
- 代替テキストは画像が表現する内容を簡潔に説明します。
- ロゴ以外では可能な限りテキストを使用します。
3. 失敗例とその改善方法
a. 画像テキストのみを使用
失敗例
<img src="text-image.png" alt="">
alt属性が空白では、スクリーンリーダーが画像の内容を伝えられません。
改善策
<img src="text-image.png" alt="サマーセール開催中！">
または、HTMLとCSSで再現します。
b. テキスト画像に代替手段がない
失敗例
- 画像内のテキストがアクセシブルな方法で提供されていない。
改善策
- 画像テキストの内容をHTMLで提供する。
4. 実装時の注意点
a. スキャンPDFの活用
スキャンされたPDFに含まれるテキストを利用する場合、OCR（光学文字認識）を使用してテキストとして提供します。
b. CSSでのレイアウトとデザイン
- レスポンシブ対応のデザインを実現するため、CSSを活用します。
emやremなどの相対的な単位を使用して、フォントサイズやレイアウトを調整します。
5. アクセシビリティのメリット
a. 柔軟なカスタマイズ
- ユーザーがフォントサイズや色を調整できるため、読みやすさが向上します。
b. 支援技術への対応
- 実際のテキストはスクリーンリーダーや翻訳ツールで正しく認識されます。
まとめ
WCAG 2.2の「1.4.9 画像テキスト（例外なし）」では、テキスト情報を可能な限りHTMLとCSSで提供し、画像テキストの使用を避けることを求めています。
実装ポイント
- HTMLとCSSでテキストをスタイリングする。
- 例外的に画像テキストを使用する場合は、代替テキストを提供する。
- OCRを使用してスキャンされたテキストを変換する。
これらの基準を守ることで、アクセシビリティの高いウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。