LEARN BY EXAMPLE

1.4.9 文字画像 (例外なし) レベル AAA

案内を画像の文字だけにせず、読み方を調整できるテキストで伝える。

概要

文字画像を使うのは、純粋な装飾の場合か、文字の特定の見せ方が情報を伝えるために必要不可欠な場合に限ります。通常の見出しや案内はテキストで提供し、書体・大きさ・配色・行間などを利用者が調整できるようにします。

案内をテキストにし、文字の大きさと行間を変える

PCやスマートフォンで講座サイトを開き、写真教室の日時と会場を読みたい場面です。

利用者が困る例 設定を変えても文字画像のまま

画像の設定だけでは、自分に合う間隔や配置で読めない。
この案内は情報を伝える文字画像で、装飾やロゴではありません。

改善した例 同じ案内を見出しと段落にする

講座サイトの案内

写真教室

11月20日 10時から

会場:第2教室

HTMLのテキストで内容を用意し、CSSで見た目を整える

文字の大きさや行間を調整して、同じ案内を読める。
表示を変えても、日時と会場の情報は変わりません。

図:同じ「写真教室・11月20日10時から・会場:第2教室」の案内を比較。問題側の画像設定は静止した説明です。改善側のボタンは図内のテキストだけを調整し、ブラウザーやOSの設定変更を再現するものではありません。

達成できないと起こる問題の例

文字を目で追うことが難しい人が、PCやスマートフォンで講座サイトを開き、写真教室の日時と会場を確認しています。案内は講座名・日時・会場を1枚にした文字画像です。

サイトには書体・文字の大きさ・文字色・背景色を選び、画像を作り直す設定があります。しかし、この例では行間や改行位置までは選べません。利用者は自分に合う間隔や配置で読めず、日時や会場を確認しづらくなります。

達成するための改善例

同じ講座名・日時・会場を、HTMLの見出しと段落で用意します。見た目はCSSで整え、文字の見せ方を内容から分けます。対応するブラウザーの設定や利用者のスタイルで、文字の大きさ・行間・配置などを調整できます。

利用者は文字を大きくして行間を広げるなど、自分が読みやすい表示で日時と会場を確認できます。図の改善側では、ボタンで文字の大きさと行間を変えて、その違いを試せます。

確認のポイント

  • 見出しや案内を、情報を伝えるための文字画像として使っていませんか。
  • 文字画像を使う場合、純粋な装飾か、特定の見せ方が必要不可欠な場合に当たりますか。
  • 書体や色を変えられることだけを理由に、文字画像の使用を認めていませんか。
  • テキスト表示へ切り替える方法を使う場合、同じ情報と構造をテキストでも利用できますか。
  • ロゴや、文字以外にも重要な情報がある写真・図と、通常の案内の文字画像を区別していますか。

条件と補足

「例外なし」でも残る二つの用途

基準名に「例外なし」とありますが、要件文には、純粋な装飾と必要不可欠な表現という二つの用途が残ります。

純粋な装飾は見た目を飾るだけで、情報や機能を伝えないものです。文字を並べ替えたり別の語に替えたりしても目的が変わらない、背景の模様のような文字が例です。講座名や申込期限のように、読むことで情報を得る文字は、この扱いにしません。

必要不可欠なのは、その見せ方を変えると伝えたい情報や機能が根本的に変わり、適合する別の方法でも伝えられない場合です。書体そのものを示す見本や、書かれた時代を伝えるために原本の体裁を示す手紙の写しなどが例です。ロゴやブランド名の一部である文字も、必要不可欠なものとされています。

1.4.5との違い

AAの1.4.5「文字画像」には、使用している技術で意図した見た目を実現できる場合という条件と、利用者の要求に応じて文字画像をカスタマイズできる場合の例外があります。AAAの1.4.9には、この条件やカスタマイズの例外はありません。

画像を利用者の設定で作り直せる場合でも、それだけを理由に通常の案内を文字画像のまま提供する方法は採りません。画像の書体や色を変える方法と、文字画像を使わないテキスト表示を利用できる方法を区別します。

テキスト表示へ切り替える方法

最初からテキストで提供するほか、構造化したHTMLのテキスト表示へ切り替えられる方法が、公式テクニックC30にあります。この方法では、切替操作も含め、関連する基準を満たす必要があります。画像の拡大や、画像内の文字の設定変更だけで対応する方法とは異なります。

図のボタンは、テキストの見た目を調整できる違いを試すためのものです。どのサイトにも同じ切替ボタンを置くことを、この基準が求めているわけではありません。

文字画像の定義と代替テキスト

文字以外にも重要な視覚情報がある写真・グラフ・画面のスクリーンショットなどに含まれる文字は、ここでいう文字画像の定義には含まれません。画像で何を伝えているかを確認し、文字だけの案内を画像化したものと区別します。

画像に代替テキストがあっても、画面上の文字の見た目を利用者が変えられることにはなりません。必要不可欠な文字画像にも、1.1.1「非テキストコンテンツ」など、ほかの基準に応じた代替は必要です。

参照資料

テクニックは達成する方法の例です。出典の最終確認: 2026-11-09。講座サイトと画像の設定は、この教材のために作った架空の例です。