# ブランド書体の文字画像で作られた見出し

Source: https://easeweb.dev/learn/heading-images
Topics: 画像とメディア > 文字を画像で示すのはロゴだけである (WCAG 1.4.9)
The fix: 見出しを、Webフォントで表示する実際のテキストにします。ブランドの書体にWebのライセンスを加えるか、Webで使える近い書体を選びます。文字の形をどうしても画像のまま残す場合は、ページの上部に、すべての文字画像をテキストに切り替えるスイッチを置けますが、押されるまで見出しは画像のままです。
Test with: forced colors, zoom
References: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text-no-exception.html https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html https://www.w3.org/WAI/WCAG22/Techniques/css/C22 https://www.w3.org/WAI/WCAG22/Techniques/css/C30 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

ある陶芸工房のWebサイトは、書体を中心にデザインされています。書体デザイナーが描いた温かみのある筆記体で、ライセンスは工房の看板、カード、印刷した料金表に使う範囲です。Webサイトへの埋め込みは含まれないため、デザイナーは「教室」「窯」「アクセス」の見出しを、工房の茶色の筆記体で透明な背景の画像として書き出し、開発者はそれぞれを見出しに入れて、言葉を alt にしています。ページはデザインどおりに見え、スクリーンリーダーも「教室」をレベル2の見出しとして読み上げます。そこへ、自分の書体と配色で読む人がページを開きます。ブラウザーはページを黒に近い色にし、段落を本人が選んだ書体で、大きく、クリーム色で表示しますが、見出しはそのままです。黒に近い背景に細い茶色の筆記体で、コントラスト比は2.11:1しかなく、ほとんど見えません。文字だけを拡大すると、段落は大きくなっても、見出しは大きくなりません。見出しの言葉は選択できず、読み上げツールが読んでいる箇所を強調表示することもできません。

## 確認できる問題

このページは、レベルAAの1.4.5を満たしています。1.4.5 文字画像は、同じ見た目を技術で実現できる場合にだけ、文字画像ではなくテキストを使うことを求めています。W3Cによる1.4.5の解説書は、作成者に再配布の権利がない書体を見せる文字画像を認めています。すべての利用者のブラウザーに書体を送ることは、再配布にあたります。レベルAAAの1.4.9 文字画像（例外なし）は、この余地をなくします。文字画像を認めるのは、純粋な装飾である場合と、ロゴのように、文字の特定の見た目が伝える情報にとって不可欠な場合だけです。見出しはどちらでもありません。言葉が情報で、「教室」の意味はどの書体でも同じです。そのため、alt がどれほど適切でも、見出しの画像はどれも1.4.9を満たしません。この達成基準は、文字を特定の見た目にしないと読めない人のためのものです。このページで、その人たちが変えられない文字は見出しだけです。

## 利用者への影響

影響を受ける人は、どのサイトも同じ書体と配色で読めるよう、ブラウザーの設定、読書支援の拡張機能、コントラスト テーマで一度だけ設定しています。AAを満たすページなら問題なく使えると、その人たちは期待しています。そして見出しは、ページの中を移動する手がかりです。

## 自動チェックとAIの限界

axe などのツールは、見出しの中に適切な alt のある画像を見つけ、合格にします。レベルAAはこうした画像を認めるため、AAの診断でも合格になり、暗い配色で確認しない限り、誰も問題に気付きません。この診断では、中身が alt のある横長の画像だけで、ロゴではない見出しを、1.4.5の文字画像の候補として人に報告します。書体のライセンスによってAAで認められるか、サイトがAAAを目指すかは、その人の判断です。AIに手早く直させると alt の文言を整えがちですが、問題は最初から alt ではありません。

## 修正前：見出しがブランドの筆記体の画像

```html
<h2>
  <img src="/type/classes.png" alt="教室" width="168" height="56">
</h2>
<p>初心者向けの電動ろくろと手びねりの教室を、毎週土曜日の午前に開いています。</p>
…
```

```css
h2 img {
  display: block;
  width: auto;
  height: 56px;
}
```

見出しの言葉はピクセルとしてしか存在しません。alt はスクリーンリーダーに言葉を伝えますが、書体、色、大きさ、間隔は誰も変えられず、暗い配色では黒に近い背景の上に茶色のまま残ります。

## 修正後：Webフォントで表示する実際のテキスト

```html
<h2 class="lettered">教室</h2>
<p>初心者向けの電動ろくろと手びねりの教室を、毎週土曜日の午前に開いています。</p>
…
```

```css
@font-face {
  font-family: "Studio Script";
  src: url(/fonts/studio-script.woff2) format("woff2");
  font-display: swap;
}
.lettered {
  font-family: "Studio Script", "Segoe Script", cursive;
  font-size: 2.25rem;
  font-weight: normal;
  line-height: 1.2;
  color: #6b3f2a;
}
```

見出しはテキストに戻り、ブラウザーが同じ筆記体で描きます。書体のファイルは、印刷用のライセンスにWebのライセンスを加えて書体デザイナーから受け取るか、Webで使えるライセンスがあり雰囲気の近い筆記体を選びます。見た目は修正前と同じです。それでいて、利用者が自分の書体を使えば筆記体はその書体に変わり、自分の配色を使えば色が変わります。コントラスト テーマではテーマの文字色で描かれ、文字だけを拡大したときも大きくなります。言葉は選択でき、ページ内検索で見つかり、読み上げツールで読めます。

## 修正後：画像をテキストに切り替えるスイッチ

```html
<button type="button" class="type-switch" aria-pressed="false">テキストの見出し</button>
<script>
  const toggle = document.querySelector('.type-switch');
  const set = (on) => {
    document.documentElement.classList.toggle('text-headings', on);
    toggle.setAttribute('aria-pressed', String(on));
    localStorage.setItem('text-headings', on ? 'on' : 'off');
  };
  set(localStorage.getItem('text-headings') === 'on');
  toggle.addEventListener('click', () => set(toggle.getAttribute('aria-pressed') !== 'true'));
</script>
…
<h2 class="lettered">
  <img src="/type/classes.png" alt="教室" width="168" height="56">
  <span class="as-text">教室</span>
</h2>
<p>初心者向けの電動ろくろと手びねりの教室を、毎週土曜日の午前に開いています。</p>
…
```

```css
h2 img {
  display: block;
  width: auto;
  height: 56px;
}
.lettered .as-text {
  display: none;
}
.text-headings .lettered img {
  display: none;
}
.text-headings .lettered .as-text {
  display: inline;
}
```

各見出しには画像を残したまま、隣に同じ言葉をテキストで入れておき、ページ上部のスイッチが押されるまで隠します。押すと画像がすべて隠れ、どの見出しも、利用者自身の書体と配色のテキストで表示されます。選択は保存され、スクリプトはスイッチの直後、どの見出しよりも前で動くため、以降のページもテキストの見出しで開きます。これは1.4.9の十分な達成方法の一つである、W3Cの達成方法C30に基づく方法で、文字の形を描いたとおりに保てます。代わりに、順序の問題が残ります。ページは画像の状態で開くため、利用者はスイッチがあることを知ったうえで、見出しより先に見つけ、使う端末とブラウザーごとに押し直さなければなりません。スイッチはすべてのページの上部に置き、最初の見出し画像より前に到達できるようにします。

## どの方法を選ぶか

どちらの方法でも1.4.9を満たします。使うべきなのは、Webフォントで表示する実際のテキストです。デザインはそのままで、どの利用者にも最初に開いたページから効果があり、必要なのは書体のファイルと数行のCSSだけです。スイッチでも達成基準は満たせますが、見出しは初めは画像のままなので、テキストを必要とする人がまず画像に出会うことになります。一点物の手描き文字のように書体にできない文字に限って使い、その場合でも、近いWebフォントで見出しを組むことを検討してください。

## 実装の判断

**書体のライセンス。** 多くの書体メーカーは、デスクトップ用のライセンスとは別にWeb用のライセンスを販売しており、価格はページビュー数で決まることがよくあります。雰囲気の近い書体にもWeb用のライセンスがあるものが多く、無料で使えるものもあります。ライセンスは、デザインが確定した後ではなく、書体を選ぶ段階で確認します。ブラウザーに送れない書体は実際のテキストに使えず、その画像は1.4.9を満たしません。

**ロゴは画像のままでよい。** ロゴやブランド名の一部である文字は、1.4.9でも不可欠なものとされるため、工房のロゴは alt のある画像のままにできます。書体見本や、手描きの看板の写真のように、文字の形そのものが主題のものも、画像のままにできます。

**日本語などの大きな書体。** 日本語の書体は、すべての文字を含めると数メガバイトになります。`unicode-range` で分割して配信するフォントサービスを使い、ページで使う文字を含む部分だけを読み込むか、見出しで使う文字だけにサブセット化します。手作業のサブセットは、後から編集者が見出しに加えた文字を含まず、その文字だけが別の書体で表示されます。書体全体を分割して配信するサービスなら、この問題は起きません。

**書体の読み込み中。** `font-display: swap` を指定すると、見出しはまず代わりの書体ですぐに表示され、筆記体が届いた時点で切り替わります。幅の近い代わりの書体を選ぶか、代わりの書体の `@font-face` に `size-adjust` を指定して、書体が変わるときに見出しがずれないようにします。

**SVGの文字。** 言葉が `<text>` 要素になっているインラインSVGはテキストですが、やはり書体を配信する必要があり、折り返しもしません。文字をアウトライン化して書き出したSVGは、どれほど鮮明でも文字画像に戻ります。実際のテキストで表現できるほかの見た目は、下のデザインのアイデアで紹介します。

## 修正の確認

1. 見出しの言葉をマウスで選択し、ブラウザーのページ内検索で「教室」を探す。見出しがすべてテキストであることを確認する。スイッチがあるページでは、先にテキストの見出しをオンにし、スイッチが最初の見出しより前に到達できることも確認する。
2. 自分の書体と配色を適用する。たとえばFirefoxの設定で「ウェブページが指定したフォントを優先する」をオフにし、「配色を上書き」を「カスタム」にする。すべての見出しが、本文と一緒に自分の書体と配色に変わることを確認する。
3. Windowsのコントラスト テーマをオンにする。すべての見出しが、段落と同じようにはっきりと、テーマの文字色で描かれることを確認する。
4. Firefoxの「文字サイズのみ変更」や、最小フォントサイズの設定で、文字だけを拡大する。見出しがほかの文字と一緒に大きくなることを確認する。
5. 文字の入ったほかの画像を探す。どれもロゴか、文字の形そのものが主題の画像であることを確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。デザインの書体を変えたときや、テンプレートに見出しが加わった際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。パス、書体名、色、クラス名は仮のもので、使う書体に適用されるライセンスはご自身で確認してください。1.4.9はレベルAAAで、WCAGは、レベルAAAをサイト全体に一律に求めることを推奨していません。言葉を画像に描き込むAAの問題は、[実際のテキストの代わりに使われた文字画像](/ja/learn/images-of-text)で扱っています。残る画像がロゴや不可欠な文字かどうかは判断が必要なため、デザインのレビューで確認してください。利用者が頼りにしている設定で、操作全体を確認してください。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）