Webアクセシビリティ達成基準「1.4.5 文字画像の達成基準」の話

前回はWebアクセシビリティ達成基準「1.4.4 テキストのサイズ変更の達成基準」について解説しました。続けて今回は「1.4.5 文字画像の達成基準」への対応について解説します。

Webサイトのデザインをしていると、「ここは画像にした方が見栄えがいい」「この文字、装飾込みで画像にしたい」と感じる場面は少なくありません。一方で、アクセシビリティの観点では文字を画像にすることそのものが課題になるケースもあります。

1.4.5 文字画像の達成基準とは

達成基準の概要

WCAG 2.1の達成基準「1.4.5 文字画像（レベルAA）」では、文字は原則として画像ではなく、テキストで表現することが求められています。
例外として、以下のようなケースは認められています。

• ロゴなど、視覚的な表現が本質的なもの
• 特定のフォント表現が不可欠な場合（例：ブランド表現）

つまり、「読ませる目的の文字」を、単にデザイン上の理由だけで画像化するのは避けましょう、という考え方です。

なぜ文字画像が問題になるのか

文字を画像にしてしまうと、次のような問題が起こります。

• 画面拡大時に文字が粗くなり、読みにくい
• ユーザーが文字サイズを変更できない
• スクリーンリーダーで正しく読み上げられない
• 翻訳ツールが使えない

特に高齢者や弱視の方にとっては、テキストサイズを自由に変えられないこと自体が大きなストレスになります。

実務でよくあるNG例とその理由

見出しをすべて画像で作っている

デザインカンプの再現を優先し、h2やh3見出しを画像で配置しているケースは、今でも時々見かけます。しかし、これは典型的なNG例です。

見出しはページ構造を理解するうえで非常に重要な要素です。画像にしてしまうと、スクリーンリーダー利用者には「見出し」として認識されません。

ボタンやバナー内の文字が画像のみ

CTAボタンやキャンペーンバナー内の文言が、すべて画像になっているケースも注意が必要です。
「装飾が多いから仕方ない」と思われがちですが、CSSで再現できる表現は年々増えています。

文字画像を使ってもよいケース

ロゴやブランド表現

企業ロゴやサービスロゴは、文字画像が許容される代表的な例です。
ただしこの場合でも、alt属性で適切な代替テキストを設定することが前提になります。

特定の書体表現が不可欠な場合

たとえば、歴史資料の再現や、作品紹介など、文字そのものがビジュアル要素として重要な場合は例外扱いとなります。
この場合も、「本当にテキストでは代替できないか？」を一度検討する姿勢が大切です。

制作現場での現実的な対応方法

まずは「テキストで表現できないか」を考える

アクセシビリティ対応というと難しく感じるかもしれませんが、実はシンプルです。
「この文字、CSSで再現できないか？」と一度立ち止まるだけで、多くの問題は回避できます。

最近では以下のような表現も、ほぼCSSで対応可能です。

• Webフォント
• グラデーション文字
• 文字の縁取り
• シャドウ表現

どうしても画像を使う場合の注意点

やむを得ず文字画像を使う場合は、最低限以下を守りましょう。

• alt属性に、画像内の文字情報を正確に記載
• 画像がなくても内容が理解できる構成にする
• 同じ内容のテキストを別途用意する（補足説明など）

1.4.5対応は「デザインの質」を下げるものではない

「アクセシビリティを意識すると、デザインの自由度が下がる」と思われがちですが、実際は逆だと感じています。
制約があるからこそ、構造・可読性・一貫性を意識した設計が求められ、結果として質の高いWebサイトになります。

特に行政サイトや企業サイトでは、「誰にでも伝わる」ことが最優先です。文字画像に頼らない設計は、結果的にSEOの観点でもプラスに働きます。

まとめ：文字画像は“最後の手段”に

1.4.5 文字画像の達成基準は、テクニックというより考え方のルールに近い達成基準です。

• 読ませる文字はテキストで
• 画像は補助的な表現として使う
• どうしても必要な場合は代替手段を用意する

こうした基本を押さえるだけで、Webアクセシビリティはぐっと現実的になります。