WCAG 2.2 ガイドライン「1.4.5 画像テキスト」Level AA について
はじめに
WCAG 2.2の「1.4.5 画像テキスト」では、テキストを画像として表示する代わりに、可能な限り実際のテキストを使用することを求めています。これにより、支援技術を利用するユーザーや、テキストの拡大、カスタマイズを必要とするユーザーがコンテンツを利用しやすくなります。
この記事では、HTML、CSS、JavaScriptを学び始めた方でも理解しやすいように、このガイドラインを満たすための具体的な方法を解説します。
1. 画像テキストとは？
画像テキストとは、文字が画像として埋め込まれているものです。たとえば、ロゴやバナーに含まれる文字が該当します。
例
<img src="text-image.png" alt="ウェルカム">
このような画像内のテキストは、拡大、スタイル変更、検索、翻訳が困難であり、アクセシビリティが低下します。
2. 基準を満たす実装方法
a. テキストで情報を提供
画像テキストを使用する代わりに、HTMLとCSSでテキストをスタイリングします。
改善例
HTMLとCSSの例
<p class="styled-text">ウェルカム</p>
.styled-text {
font-family: 'Arial', sans-serif;
font-size: 2em;
font-weight: bold;
color: #333;
text-shadow: 1px 1px 2px #aaa;
}
メリット
- スクリーンリーダーがテキストを正しく読み上げます。
- ユーザーがフォントサイズや色を変更できます。
b. 例外的に画像テキストを使用する場合
画像テキストの使用が避けられない場合（例: ロゴ）、適切な代替テキストを提供します。
例外適用の例
<img src="logo.png" alt="会社名のロゴ">
注意
alt属性で内容を明確に記述します。- 画像の意味や役割を伝えることが重要です。
c. CSSを使用してプレゼンテーションを制御
CSSを使用してテキストを装飾することで、画像テキストを使用せずにデザインを実現します。
実装例
HTML
<h1 class="fancy-heading">特別セール</h1>
CSS
.fancy-heading {
font-family: 'Georgia', serif;
font-size: 3em;
color: #e74c3c;
text-transform: uppercase;
background: linear-gradient(to right, #e74c3c, #f39c12);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
ポイント
- CSSでデザインを自由にカスタマイズできるため、画像テキストを不要にします。
d. スキャンしたPDFのテキストを変換
スキャンされたPDFのテキストを活用する場合、OCR（光学文字認識）を使用して実際のテキストとして提供します。
例
- Adobe AcrobatのOCR機能を使ってスキャンPDFを編集可能なテキストに変換。
3. 失敗例とその対策
a. 画像テキストのみを使用
失敗例
<img src="banner.png" alt="">
alt属性が不適切で、スクリーンリーダーがテキストを認識できません。
改善策
<img src="banner.png" alt="サマーセール開催中！">
b. スタイルが固定されたテキスト画像
失敗例
- フォントサイズや色をユーザーが変更できない画像。
改善策
- HTMLとCSSを使用して柔軟に対応可能なスタイルを実装。
4. 実装時の注意点
a. アクセシビリティの向上
- 実際のテキストを使用し、画像テキストを最小限に抑えます。
- 画像テキストを使う場合は、明確な代替テキストを提供します。
b. レスポンシブ対応
- CSSでスタイルを適用し、デバイスや画面サイズに応じてテキストのデザインを調整します。
5. アクセシビリティのメリット
a. ユーザーがテキストをカスタマイズ可能
フォントサイズ、色、背景をユーザーが変更できるため、読みやすさが向上します。
b. 検索エンジンに最適化
実際のテキストはSEOに有利であり、検索エンジンがコンテンツを正確にインデックス化できます。
まとめ
WCAG 2.2の「1.4.5 画像テキスト」は、実際のテキストを使用して情報を提供することを推奨しています。
実装のポイント
- HTMLとCSSでスタイルを調整し、画像テキストを回避する。
- 例外的に画像テキストを使用する場合は、代替テキストを必ず提供する。
- スキャンPDFなどの場合はOCRを使用してテキスト化する。
これらを実践することで、視覚障害や環境に制約のあるユーザーにも利用しやすいウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。