WCAG 1.4.9: 文字の画像（例外なし）

WCAG 1.4.9 は、純粋に装飾的なコンテンツや、特定の視覚的な表現が伝達される情報にとって本質的に重要な場合を除き、テキストをテキストの画像ではなく実際のテキストを用いて提示することを求めています。この基準は、すべてのユーザーが自分の個別のニーズに合わせてテキストの表示を調整できるようにするものです。

この規定の意味

WCAG 1.4.9 — 文字画像（例外なし）はレベルAAAの達成基準であり、WCAG 1.4.5（文字画像、レベルAA）の要件を論理的に突き詰めたものです。1.4.5では、画像が視覚的にカスタマイズ可能な場合や、特定の視覚的表現が本質的に重要な場合には文字画像を許容していますが、1.4.9ではそれらの例外のほとんどを排除します。この達成基準の下では、テキストはテキストとしてレンダリングされなければならず、テキストを含むラスタ画像やベクター画像としてではなく、DOM内の実際の文字として表示される必要があります。

1.4.9で認められる唯一の例外は、テキストが純粋に装飾的（情報的な価値を一切持たない）である場合、または特定の視覚的処理が伝えられるアイデンティティと切り離せないロゴやブランド名の一部である場合です。実務上は、テキストを含む製品スクリーンショット、販促コピー入りのバナー画像、ラベル付きデータを含むインフォグラフィック、証明書画像、SNS風の引用カード、ウェブ上に表示されるスキャン文書などは、すべて実際にレンダリングされたテキストに置き換えるか、少なくともそれで補完しなければならないことを意味します。

1.4.9に合格するのは、ユーザーに見える意味のあるテキストがすべてブラウザのテキストエンジンによってレンダリングされている場合です。これは、HTMLのテキストノード、適切な場合のCSS生成コンテンツ、SVGの<text>要素などを通じて行われ、ユーザーエージェントがテキストをリフロー、リサイズ、再配色、再スペースできるようにします。<img>、<canvas>、CSSの背景画像、SVGの<image>、埋め込みPDF、その他の非テキストリソースが、意味を持つテキストの表示に使われている場合は、alt属性の有無にかかわらず不合格となります。よく書かれたalt属性は1.1.1（非テキストコンテンツ）には対応しますが、代替テキストは視覚的にレンダリングされず、元の画像が視覚ユーザーにテキストの視覚的表現を適応させる能力を依然として奪っているため、1.4.9を満たすことにはなりません。

この達成基準は、次のような一般的なHTMLパターンに影響します。ソースファイルにテキストを含む<img>要素、埋め込みテキストを含む画像を指すCSSのbackground-imageプロパティ、プログラム的にテキストが描画された<canvas>要素、<text>ではなく<image>を使用するインラインSVG要素、レンダリングされた画像コンテンツを含むiframeなどのサードパーティ埋め込みです。SVGのような技術的にスケーラブルな形式であっても、テキストがSVGの<text>ノードではなくパスや画像として埋め込まれている場合は、同様に問題となります。

なぜ重要か

世界保健機関によると、世界で約2.2億人が何らかの視覚障害を抱えています。これらの人々の重要な一部、すなわち弱視、色覚異常、ディスレクシア、その他の印刷物に関する障害のある人々は、コンテンツを読めるようにするためにブラウザレベルまたはOSレベルのテキストカスタマイズツールに依存しています。これらのツールには、ズーム機能、フォントの置き換え、文字間・単語間隔の拡大、高コントラストまたはカスタム配色、レンダリングされたDOMテキストを対象とする音声読み上げエンジンなどが含まれます。テキストが画像の中に埋め込まれていると、そのコンテンツに対してこれらの適応は一切利用できなくなります。

たとえば、弱視のユーザーが、ブラウザを大きなサンセリフ体と高コントラストの黄地に黒文字でテキストをレンダリングするよう設定しているとします。このユーザーが「Summer Sale — 50% Off」と書かれたプロモーションバナーをJPEGとして埋め込んだものに遭遇しても、ブラウザはそのテキストの色やレイアウトを変更できません。ページズームで画像自体は拡大されるかもしれませんが、すぐにピクセル化して読みづらくなり、明瞭さは向上しません。同じメッセージがCSSでスタイルされた本物のHTMLテキストとしてレンダリングされていれば、ユーザーのブラウザ設定が自動的に適用され、コンテンツは鮮明で調整可能かつアクセシブルなままです。

ディスレクシアのあるユーザーは、OpenDyslexicのようなディスレクシアに配慮した書体にフォントを切り替え、文字間・単語間隔を広げて視覚的な詰まりを軽減するブラウザ拡張機能やカスタムスタイルシートをよく利用します。文字画像はこれらの適応を完全に迂回してしまいます。画像としてレンダリングされたコールトゥアクションボタンは、スタイルされたHTML要素ではないため、これらのカスタマイズから事実上見えなくなり、パーソナライズされたレンダリングに依存するユーザーから重要なインタラクティブ要素を隠してしまう可能性があります。

スイッチアクセスや視線追跡ソフトに依存する運動障害のあるユーザーは、正確なターゲットをクリックするためにズームツールを積極的に使用することがあります。高倍率ズーム時のぼやけた低解像度の文字画像は、ターゲットを狙う難易度をさらに高めます。残存視力がありつつ理解のためにスクリーンリーダーを使用するユーザーも、作者が完全なalt属性を書くのを忘れたかどうかによって、文字画像が一貫性のない読み上げになり得ることに直面します。そして、完璧なaltテキストであっても、必要としている視覚的なテキスト表現を回復することはできません。

障害者アクセスを超えて、文字画像ではなく実際のテキストを使用することには、意味のあるSEO上の利点もあります。検索エンジンクローラーは、画像コンテンツを解釈するよりもDOMテキストをはるかに確実にインデックス化します。そのため、画像に埋め込まれたプロモーション見出し、商品名、カテゴリラベルは、検索順位の評価をほとんど、あるいはまったく受けない可能性があります。多くのタイポグラフィ用途において、実際のテキストはファイルサイズも軽く、Core Web Vitalsのスコアを改善し、モバイルデータ接続のユーザーの帯域消費を削減します。これは、モバイルインターネット普及率が高く、データコストが依然として課題となる市場では特に重要な懸念事項です。

テスト方法

最初のステップとして自動スキャンを実行する。axe DevTools、Dequeブラウザ拡張機能、またはChrome DevToolsのLighthouseを開き、ページ全体の監査を実行します。フラグされた画像関連の問題を確認します。1.4.9を直接カバーする自動ルールはありませんが、このステップにより、フォローアップの手動レビュー対象となるすべての<img>要素とCSS背景画像が抽出されます。結果をエクスポートし、空でない文のようなalt属性を持つ画像や、axeがimage-altでフラグした画像をすべて記録します。
すべての画像と背景グラフィックを目視で確認する。ページをスクロールし、各画像、CSS背景、canvas要素、SVGグラフィックを確認します。この画像にはテキストが含まれているか、と自問します。含まれている場合、そのテキストは純粋に装飾的か（情報を追加しておらず、削除しても損失がないか）。特定の文字スタイルがブランドアイデンティティと切り離せないロゴタイプか。どちらの例外にも当てはまらない場合、その画像は1.4.9の不合格です。
ブラウザで画像を無効にする。Firefoxでは、about:configに移動し、permissions.default.imageを2に設定するか、「Disable Images」のような拡張機能を使用します。ページを再読み込みします。消えてしまい、かつ可視のDOMテキスト（スクリーンリーダーが読み上げるだけのalt属性ではない）で置き換えられていないテキスト情報は、1.4.9の不合格を意味します。テスト後は画像を再度有効にします。
カスタムユーザースタイルシートを適用する。Firefoxでは、プロファイルのchrome/userContent.cssにファイルを配置し、* { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }のようなルールを追加します。ページを再読み込みします。実際のHTMLとしてレンダリングされたテキストはこれらのスタイルを採用しますが、画像に埋め込まれたテキストは変化しません。これらの強制スタイルの下でも視覚的に変化せず読めないままのテキストコンテンツは、不合格です。
NVDAとFirefoxでテストする。NVDAのブラウズモードを使ってページをナビゲートします。各画像について、NVDAが何を読み上げるかを確認します。NVDAが実質的なテキストコンテンツを含むalt属性を読み上げる場合、その内容を画像に視覚的に表示されているものと比較します。意味のあるテキストコンテンツを含むalt属性の存在は、その画像がテキストを含んでいる強い指標であり、1.1.1が技術的に満たされている場合でも1.4.9の不合格を裏付けます。
macOSのVoiceOverとSafariでテストする。VO + 右矢印を使ってコンテンツを移動します。完全な文、見出し、販促テキストを説明する画像の説明を聞きます。視覚的な確認と照らし合わせて、そのソースが実際のテキストではなく画像であることを確認します。
400%までズームする。WCAG 1.4.4と1.4.10は、高倍率ズームでもテキストが読める状態であることを求めています。ブラウザズームで拡大すると文字画像はピクセル化しますが、ブラウザエンジンがレンダリングする実際のテキストは鮮明なままです。400%ズームでぼやけたりピクセル化して見えるテキストは、文字画像である可能性が高く、1.4.9の不合格として調査すべきです。

修正方法

埋め込みテキストを含むプロモーションバナー — 不適切

<!-- 見出しとCTAが画像に焼き込まれたマーケティングバナー。
     altテキストがあっても、ユーザーはテキストのレンダリングをカスタマイズできない。 -->
<a href='/sale'>
  <img src='/images/summer-sale-banner.jpg'
       alt='Summer Sale — Up to 50% off all products. Shop Now.'
       width='1200' height='400'>
</a>

埋め込みテキストを含むプロモーションバナー — 適切

<!-- バナーは視覚的な装飾として実際の背景画像を使用しつつ、
     すべてのテキストは本物のHTMLとしてレンダリングされるため、
     ユーザーはテキストを独立してリサイズ、再配色、リフローできる。 -->
<a href='/sale' class='sale-banner'>
  <!-- 背景画像はCSSで設定: .sale-banner { background-image: url(/images/summer-bg.jpg); } -->
  <h2 class='sale-banner__headline'>Summer Sale</h2>
  <p class='sale-banner__offer'>Up to 50% off all products</p>
  <span class='sale-banner__cta'>Shop Now</span>
</a>

ラベル付きデータポイントを含むインフォグラフィック — 不適切

<!-- カテゴリラベルとパーセンテージがPNG内に描画されたインフォグラフィック。
     スクリーンリーダーユーザーはaltを聞けるが、弱視の視覚ユーザーは
     ラベルを拡大したり再配色したりできない。 -->
<img src='/images/market-share-2024.png'
     alt='Market share 2024: Product A 42%, Product B 31%, Product C 27%'
     width='800' height='600'>

ラベル付きデータポイントを含むインフォグラフィック — 適切

<!-- すべてのラベルがSVG <text>ノードであるアクセシブルなSVGチャート。
     ユーザーはテキストをズーム、リフローし、高コントラストテーマを適用できる。
     隣接する<table>が同じデータを表形式で提供する。 -->
<figure>
  <svg viewBox='0 0 800 400' role='img'
       aria-labelledby='chart-title chart-desc'>
    <title id='chart-title'>Market Share 2024</title>
    <desc id='chart-desc'>Pie chart: Product A 42%, Product B 31%, Product C 27%</desc>
    <!-- chart paths -->
    <text x='200' y='150' class='chart-label'>Product A — 42%</text>
    <text x='450' y='200' class='chart-label'>Product B — 31%</text>
    <text x='350' y='320' class='chart-label'>Product C — 27%</text>
  </svg>
  <figcaption>
    <details>
      <summary>View data as table</summary>
      <table>
        <caption>Market Share 2024</caption>
        <thead><tr><th>Product</th><th>Share</th></tr></thead>
        <tbody>
          <tr><td>Product A</td><td>42%</td></tr>
          <tr><td>Product B</td><td>31%</td></tr>
          <tr><td>Product C</td><td>27%</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

テキストが多いヘッダーを含むCSS背景画像 — 不適切

<!-- ページタイトルが実際のテキストではなくCSS背景画像として設定されている。
     これは2000年代初頭の画像置換時代によく見られたデザインパターンであり、
     現代のコードベースには登場すべきではない。 -->
<h1 class='logo-header'></h1>
<!-- CSS: .logo-header {
       background: url('/images/page-title-about-us.png') no-repeat;
       width: 400px; height: 80px; display: block;
       text-indent: -9999px;
     } -->

テキストが多いヘッダーを含むCSS背景画像 — 適切

<!-- 実際のテキストがブラウザによってレンダリングされる。カスタムWebフォントにより、
     適応性を損なうことなく望ましいタイポグラフィスタイルを再現できる。
     背景画像は、必要であっても純粋に装飾的なテクスチャにとどまる。 -->
<h1 class='page-title'>About Us</h1>
<!-- CSS: .page-title {
       font-family: 'BrandTypeface', serif;
       font-size: 3rem;
       color: #1a1a2e;
       letter-spacing: 0.05em;
     } -->

よくある間違い

完全なalt属性が1.4.9を満たすと誤解すること。alt属性で十分なテキスト代替を提供することはWCAG 1.1.1に対応しますが、1.4.9には何の効果もありません。この達成基準は、テキストの視覚的レンダリングがカスタマイズ可能な形でアクセシブルであることに特化しており、スクリーンリーダー向けのプログラム的同等物についてのものではありません。
<h1>〜<h6>要素に画像置換CSSテクニック（text-indent: -9999pxやclipメソッド）を使用すること。これらのレガシーテクニックは実際のテキストを視覚的に隠し、背景画像に置き換えます。その結果、弱視の視覚ユーザーは画像しか得られず、スクリーンリーダーユーザーは隠されたテキストしか得られないという不一致が生じ、両方のユーザー層に異なる形で不利益をもたらします。
カスタムフォントがWebフォントとして利用できないためにWebタイポグラフィをPNGやJPEGとして書き出すこと。ライセンスされた書体をWebフォントとして合法的に配信できない場合、正しい解決策はWebフォントの権利を交渉するか代替書体を選ぶことであり、テキストを画像にラスタライズすることではありません。
SVGファイルを本質的にアクセシブルだとみなすこと。テキストを<path>要素として埋め込んだSVG（Illustratorの「アウトラインテキスト」オプションなどのグラフィックツールの一般的な出力）は、PNGと同じくらいアクセシビリティが低いものです。1.4.9に合格するには、SVGが<text>要素を使用している必要があります。
実際のテキストのフォールバックなしに<canvas>要素にテキストを埋め込むこと。canvasコンテンツはピクセルレベルでラスタライズされます。ctx.fillText()で描画されたテキストはDOMの一部ではなく、ユーザーエージェントによって適応されることはありません。実際のテキストのオーバーレイまたは代替が必要です。
OCRベースの実テキストレイヤーなしでスキャン文書画像（画像としてレンダリングされたPDF）を放置すること。<img>タグ内で提示されるスキャン文書や、画像のみのPDFは1.4.9に不合格です。OCRを実行して選択可能なテキストレイヤーを埋め込むか、文書を適切にタグ付けされたHTMLに変換する必要があります。
価格、在庫数、ユーザー生成コンテンツなどの動的データに文字画像を使用すること。サーバーがテキストデータを含む画像を生成するたびに、そのデータは画像形式に固定されます。商品一覧の価格、予約プラットフォームの座席空き状況、ライブスポーツのスコアなどは、ユーザーがリサイズや再配色できるよう、実際のテキストとしてレンダリングされなければなりません。
メール署名画像を見落とすこと。マーケティングチームは、視覚的なブランディングを維持するために署名ブロックを画像として作成することがよくあります。これらのメールがアーカイブされ、ウェブサイトからリンクされると、署名画像は1.4.9の対象となるウェブコンテンツになります。
サードパーティウィジェットのコンテンツを無視すること。チャットウィジェット、ソーシャルプルーフバッジ、サードパーティベンダーが提供するレビューカルーセルなどは、ページに文字画像を挿入する場合があります。サイト所有者はページ上のすべてのコンテンツのアクセシビリティに責任を負います。ベンダーがテキストベースのレンダリングを提供できない場合は、別のベンダーを検討すべきです。
ロゴタイプの例外と一般的なブランディングの例外を混同すること。ロゴタイプの例外は、ロゴやワードマークそのもの、つまりスタイライズされたブランド名にのみ適用されます。同じ画像内でロゴと並んで表示されるタグライン、ナビゲーションラベル、その他のテキストには適用されません。

トルコのアクセシビリティ規制との関係

2025年6月21日付官報第32933号で公布されたトルコ大統領通達2025/10は、トルコで事業を行う幅広い組織に対して、ウェブアクセシビリティに関する義務を定めています。この通達は、対象となる組織に対し、最低限の基準としてWCAG 2.1レベルAAへの準拠を求めています。対象として明示されているのは、公的機関および政府機関、eコマースプラットフォーム、銀行および金融機関、病院および民間医療提供者、20万以上の加入者を持つ通信会社、旅行代理店、民間輸送会社、国民教育省に認可された私立学校などです。

WCAG 1.4.9はレベルAAAの達成基準であり、したがって大統領通達2025/10で定められた必須の最低基準より上位に位置します。対象組織は、この通達のベースライン義務を満たすために1.4.9に法的に準拠する必要はありません。しかし、該当する達成基準でレベルAAAを達成することは、インクルージョンに対する最高水準のコミットメントを示すものであり、そのサービスを効果的に利用できる利用者層を大きく広げます。

通達の対象となるいくつかのセクターは、特に自発的に1.4.9への準拠を追求する強い動機を持っています。eコマースプラットフォームは、プロモーションバナー、セール用グラフィック、商品カテゴリヘッダーを画像としてレンダリングすることが多く、これらはすべて1.4.9の典型的な不合格パターンです。購入判断のためにテキストカスタマイズに依存する弱視やディスレクシアのあるユーザーにとって、これらの不備は、コンバージョンの損失や、トルコのより広範な消費者保護・差別禁止の枠組みの下での法的リスクに直結します。銀行や金融機関も同様に、ローン金利、口座サマリー、手数料体系などを提示します。これらの情報のいずれかが画像に埋め込まれている場合、弱視の顧客は表示を適応させて自信を持って読めず、通達および金融サービスの消費者保護規則の両方の観点から懸念が生じます。病院や医療提供者が、投薬指示、予約詳細、患者情報を画像形式で表示することは、テキストレンダリングを適応できないユーザーに対して患者安全上のリスクを生み出します。

規制の進化に対してデジタル資産を将来にわたって保護しようとする組織や、アクセシビリティリーダーシップの実証を求める公共調達契約を目指す組織は、包括的なアクセシビリティプログラムの一環として1.4.9の不備を監査・是正することが強く推奨されます。AccsibleのオーバーレイSDKは、一部のレガシーな文字画像シナリオに対してランタイムでのテキスト適応を支援できますが、長期的な準拠のための最も堅牢で持続的な解決策は、文字画像をCSSとWebフォントでスタイルされた本物のHTMLテキストに置き換えるといったコードレベルでの恒久的な是正です。

出典と参考資料

AWCAG 1.1.1: 非テキストコンテンツ AWCAG 1.2.1: 音声のみおよび映像のみ（事前録画）AWCAG 1.2.2: キャプション（事前録画）