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



解説

画像化されたテキストは、ユーザーがWebブラウザの設定を変更しても拡大されないため、画像を作成する時点で読みやすさに配慮する必要があります。
やむを得ず小さな文字を使う際には、明朝体よりもゴシック体を使う、アンチエイリアスをOFFにする、スクリーンフォントを使用する等により、画面上の読みやすさを多少向上させることができます。


実例

  • テキストのフォントは、できる限り特定のフォントを指定しないようにします。
  • どうしてもテキストのフォントを指定しなければならない際には、モニタ画面で読みやすいゴシック系のフォントを指定します。
  • 小さな文字をできるだけ画像化しないようにします。
  • 小さな文字を画像化する場合は、ゴシック体を使い、アンチエイリアスをオフにします。
  • 小さな文字を画像化する場合は、スクリーンフォントを使用します。

参考:画像化した文字の可読性比較

画像化した文字の可読性比較
12Point / スクリーンフォント / アンチエイリアスOFF 画像化したテキストの例。12ポイントのスクリーンフォント、アンチエイリアスオフ。
10Point / スクリーンフォント / アンチエイリアスOFF 画像化したテキストの例。10ポイントのスクリーンフォント、アンチエイリアスオフ。
10Point / ゴシック体 / アンチエイリアスON 画像化したテキストの例。10ポイントのゴシック体。アンチエイリアスオン。
10Point / 明朝体 / アンチエイリアスON 画像化したテキストの例。10ポイントの明朝体。アンチエイリアスオン。文字がかすれて読みにくくなっています。
10Point / スクリーンフォント無し / アンチエイリアスOFF 画像化したテキストの例。10ポイント、スクリーンフォントなし、アンチエイリアスオフ。テキストが読みにくくなっています。

  • 文字を画像化する場合は、HTML(XHTML)のimg要素のalt属性で等価な代替テキストを指定するようにします。

関連するJISの項目

5.6 b (推奨)




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

このページの先頭へ戻る