Level AAWCAG 2.2
1.4.5 文字画像
テキストで実現可能な視覚的表現には、文字画像ではなくテキストを使用する。
なぜ重要か
拡大時の品質
文字画像は拡大するとぼやけますが、実テキストはどのサイズでもシャープなままです。
カスタマイズ
実テキストならユーザーがフォント・色・間隔を自分のニーズに合わせて変更できます。
支援技術
スクリーンリーダーは画像内の文字を読めません。代替テキストがあっても情報が限定されます。
翻訳・検索
実テキストはブラウザの翻訳機能や検索（Ctrl+F）で利用可能。文字画像では不可能です。
ライブデモ
文字画像 vs 実テキスト
100%
文字画像（canvas/SVG で模擬）
実テキスト（HTML/CSS）
特別キャンペーン
期間限定 50% OFF
2024年3月31日まで
文字画像の問題点
- 拡大するとぼやける
- テキスト選択・コピーできない
- スクリーンリーダーで読めない
- 翻訳ツールが機能しない
実テキストの利点
- どこまでもシャープ
- 選択・コピー可能
- 支援技術でアクセス可能
- ユーザーがスタイルを変更可能
ペルソナで理解する
木村さん（40歳）— 弱視（視力0.1）
画面を常に300%以上に拡大して使っています。バナーやメニューが画像テキストだとぼやけて読めません。実テキストなら拡大してもくっきり見えます。「セール情報が画像だけだと、何が割引かわからないんです」