1.4.5 文字画像

要件

視覚的な表現のために画像としてテキストを使用しないこと。
ただし、以下の場合は例外です。

• テキストの表示方法がユーザーにより調整可能である場合（例：ボタン画像内のテキストがCSSで制御可能）
• ロゴやブランド名など、文字の特定の表現が必要な場合

具体例

実装内容	評価	解説
テキストを<span>や<p>＋CSSで装飾	OK	ユーザー側で拡大・色変更が可能
見出しを画像で作成（装飾目的）	NG	拡大・音声読み上げ・色変更不可
ロゴマークに社名が含まれる画像	OK（例外）	ブランド固有の表現は許容
バナー画像内のキャッチコピーが画像化	NG	テキストで提供すべき内容

利点

弱視対応

テキスト拡大やカラーカスタマイズが可能になる

スクリーンリーダー対応

読み上げ可能な構造で提供できる

コンテンツ管理の効率化

画像差し替え不要、CMS上で編集可能に

ガイドライン準拠

WCAGやJIS X 8341-3への対応強化

達成のための開発ポイント

• 画像ではなくHTMLテキスト＋CSSで装飾
• テキストにフォント・サイズ・色・影などのビジュアルをCSSで適用
• バナーや見出しでも、テキストを重ねたHTML要素で表現
• ブランドロゴなどは例外扱いとし、alt属性で会社名を補完

検証方法

• Chrome拡張「Accessibility Insights」や「WAVE」で文字画像検出
• CSSオーバーレイで画像内テキストの検出・確認
• スクリーンリーダーでの読み上げテスト（例：NVDA、VoiceOver）

一覧に戻る