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

ある陶芸工房の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を満たすページなら問題なく使えると、その人たちは期待しています。そして見出しは、ページの中を移動する手がかりです。

10グループ中2グループに影響

• 全盲 （影響なし）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 届く範囲・力 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚が限られる 黒に近い背景に明るい文字など、自分の配色で読む人の画面では、ページ全体の色が変わっても、見出しだけは透明な背景に描かれた茶色の文字のまま残り、暗いページとのコントラスト比は2.11:1です。文字サイズを大きくしても、文字だけを拡大しても、見出しは描かれた大きさのままです。
• 言語・認知・学習の能力が限られる ディスレクシアの人は、すべてのページを読みやすい書体に切り替えたり、文字や行の間隔を広げたりしています。それでも見出しだけは工房の続け字の筆記体のままで、言葉を選択して読み上げツールに渡すこともできません。

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