1.4.9 文字画像 (例外なし)

要件

情報を伝える目的でテキストの画像が使用されている場合は、同じ視覚的な表現を CSS などでテキストとして実現できるようにしなければならない。
この基準は、**1.4.5「文字画像（AA）」**の強化版であり、例外（ユーザーのカスタマイズができるものなど）すら認めない点が特徴です。

• 1.4.9「文字画像（例外なし）」は、視覚的な文字表現をすべてテキストで実装することを要求する、高度なアクセシビリティ基準です。
• デザインの自由度を維持しつつ、Webフォント＋CSSを活用すれば十分な表現力が可能です。
• AAA準拠を目指す際には、バナーやキャンペーン素材の作り方から見直す必要があります。

目的

テキストを画像ではなく実際のテキストとして提供することで、利用者が以下のような操作を可能にします。

• 拡大／縮小
• 色変更（ハイコントラストなど）
• 読み上げソフトによる読み取り
• スクリーンリーダーや音声読み上げ支援技術との連携

具体例

不適切な実装例

ケース	問題点
ロゴ以外の見出しやボタンが画像化されている	読み上げ不可、拡大不可、色変更不可
バナー内のキャッチコピーがすべて画像	画質によって可読性が落ち、情報取得困難
テキスト装飾を目的に画像で文字を表示	CSSで代替可能なため不適切

適切な実装例

ケース	問題点
フォントを装飾したい	Webフォント（例：Noto Sans、Outfitなど）＋CSS装飾で再現
背景画像と重ねる表現	background-image + text-shadow で視認性確保
ロゴ表現	Cロゴはこの基準の対象外ですが、代替テキスト（alt）を提供するのが望ましい

実装のポイント

• 画像で文字を表現する前に「CSSやWebフォントで実現できないか」を必ず検討
• Webデザインにおけるバナー制作やボタン表現でも、可能な限りテキスト化
• レスポンシブデザインやダークモード対応も容易に
• スクリーンリーダーに文字が読み上げられる構造を確保

利点

• 拡大しても画質劣化せず可読性を保持
• 色変更やテーマ切替対応が容易
• モバイルや支援技術にも高い互換性
• 読み上げ対応など支援技術への配慮が可能

一覧に戻る