ビジュアルデザインのアクセシビリティ指針
優先度2



解説

フォントや色などの文字の見栄えを調整する目的でテキストを画像化しているケースでは、ブラウザの設定やユーザーCSSによって文字サイズを変更したり、色の組み合わせを変更して閲覧している場合にユーザーの設定が反映されない問題が発生します。
また、画像化された文字は、ブラウザ上でテキストを選択してコピーできなくなります。


実例

  • 文字の画像化は最小限とし、できる限りCSSで表現します。
  • 文字を画像化する場合は、読みやすい大きさと色の組み合せを用い、画像のalt属性には等価なテキスト情報を指定します。

悪い例:

単純な文字情報が画像化されているため、ブラウザ上で文字を選択することができません。

悪い例の画面イメージ。見出しの文字は画像化されていて、ブラウザ上で文字の選択ができません。

文字サイズや色の設定を変更した場合

悪い例の画面イメージ。文字サイズを変更した場合、画像化された文字の大きさが変更されないため、文字サイズが逆転しています。また、背景色を黒にしてテキストを明るい色にしたい場合でも、画像化した文字の色は変更できません。

※リンクテキストを画像化することによって、訪問済みリンクでも色が変わらなくなることに注意してください。

良い例:

文字の装飾はCSSで行っているため、ブラウザ上で文字を選択することができます(注釈。)。

良い例のイメージ。文字が画像化されていないため、ブラウザ上で選択できている例。

注釈。特定の色の組み合せが見にくいユーザーが、ブラウザ上で文字を選択して反転表示させて文章を読んでいるケースがあります。


ページ内のテキストを検索した場合

画面イメージ。ページ内検索をする場合、画像化された文字は検索できませんが、テキストは検索できます。

当行における特記事項:

ページ内の重要な情報(特にコンテンツ部)や、小さい文字はできるだけ画像化を避ける。



関連するJISの項目

なし




アクセシビリティガイドライン トップ

このページの先頭へ戻る