WCAG 2.2の達成基準「1.4.5 画像テキスト」では、文字の見た目を表現できる場面では、文字を画像に埋め込むのではなく、HTML上の実際のテキストを使うことが求められます。
実際のテキストなら、利用者が文字を拡大したり、表示色を変えたり、スクリーンリーダーで内容を確認したりしやすくなります。
この記事では、画像テキストの意味からHTMLとCSSによる置き換え方、画像を残す場合の注意点、スキャンPDFの扱いまでを順に説明します。
画像テキストと実際のテキストの違い
画像テキストとは、画像の一部として埋め込まれた文字です。
ロゴや広告バナーの文字が代表的な例で、HTML上では次のように画像として配置されます。
<img src="text-image.png" alt="ウェルカム">一方、実際のテキストは、見出しや段落などのHTML要素に文字データとして記述された内容です。
見た目の調整はCSSに任せるため、文字の内容とデザインを分けて管理できます。
| 確認項目 | 実際のテキスト | 画像テキスト |
|---|---|---|
| 文字の拡大 | 文字の大きさを調整しやすい | 文字だけを調整することが難しい |
| 色や書体の変更 | CSSや利用者の設定を反映しやすい | 画像に埋め込まれた見た目で固定される |
| 読み上げ | 文字データを読み上げの対象にしやすい | 画像の意味を別の方法で伝える必要がある |
| 検索や翻訳 | 文字データとして扱いやすい | 画像内の文字を直接扱うことが難しい |
HTMLとCSSに置き換える方法
バナーのメッセージや見出しを画像にする前に、HTMLで文字を書き、CSSで見た目を整えられないかを確認します。
たとえば、「ウェルカム」というメッセージは次のように実装できます。
HTMLの例
<p class="welcome-message">ウェルカム</p>CSSの例
.welcome-message {
font-family: Arial, sans-serif;
font-size: 2rem;
font-weight: 700;
color: #333;
text-shadow: 1px 1px 2px #aaa;
}この方法なら、文字はHTMLに残り、装飾だけをCSSで変更できます。
画面幅に合わせて文字サイズや余白を調整しやすいため、レスポンシブ対応にもつなげられます。
画像を使う場合の代替テキスト
ロゴなど、画像を使う必要がある場合は、その画像の意味や役割に合う代替テキストを設定します。
<img src="logo.png" alt="会社名のロゴ">代替テキストは、画像を見られない状況でも画像の内容や役割を伝えるための文字情報です。
書き方を詳しく確認したい場合は、alt属性の基本と代替テキストの書き方も参考にしてください。
ただし、alt属性を設定しても、画像内の目に見える文字そのものを拡大したり、色や書体を変更したりできるようになるわけではありません。
画像を使う必要があるかという判断と、代替テキストをどう書くかという判断は分けて確認します。
内容を伝えられない例
次の例では、バナーが「サマーセール開催中」という情報を伝えているのに、代替テキストが空です。
<img src="banner.png" alt="">画像を残す場合の改善例
<img src="banner.png" alt="サマーセール開催中">この改善によって画像のメッセージは伝えやすくなりますが、可能であれば「サマーセール開催中」をHTMLのテキストとして表示し、CSSで装飾する方法を先に検討します。
スキャンPDFに含まれる文字の扱い
スキャンしたPDFでは、ページ内の文字が画像として保存され、文字データとして利用できないことがあります。
その場合は、OCR（光学文字認識）を使って画像内の文字を読み取り、文字データへ変換します。
- PDF内の文字を選択またはコピーできるか確認する
- 文字を扱えない場合はOCRで変換する
- 変換後の文字に誤りがないか確認する
- 利用者が文字を読み取り、検索できる状態か確かめる
具体的な確認手順は、PDFをテキスト化する方法とOCRの使い分けで解説しています。
公開前のチェックリスト
- 情報を伝える文字が画像だけに埋め込まれていないか
- 見出しやメッセージをHTMLとCSSで実装できないか
- 文字の拡大や表示色の変更を妨げていないか
- 画面サイズが変わっても文字を読み取れるか
- 画像を残す場合、その意味や役割に合う代替テキストがあるか
- スキャンPDFの文字を文字データとして利用できるか
実際のテキストを使うと、利用者が自分に合う表示へ調整しやすくなり、支援技術にも情報を渡しやすくなります。
検索エンジンも文字を内容として扱いやすくなるため、情報を正確に届けるという点でサイト運用にも役立ちます。
実装判断の要点
- 文字を画像にする前に、HTMLとCSSで表現できるか確認する
- 画像を使う場合は、画像の意味や役割に合う代替テキストを設定する
- スキャンPDFではOCRを使い、変換後の文字も確認する
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
サイト内の画像テキストや代替テキストを見直したい方は、サービスの詳細をご覧ください。