WCAG 2.0解説書

本文へジャンプ

-

文字画像:
達成基準 1.4.5 を理解する

1.4.5 文字画像: 使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられている。ただし、次に挙げる場合を除く: (レベル AA)

  • カスタマイズ可能: 文字画像は、利用者の要求に応じた視覚的なカスタマイズができる。

  • 必要不可欠: テキストの特定の表現が、伝えようとする情報にとって必要不可欠である。

注記: ロゴタイプ (ロゴ又はブランド名の一部である文字) は必要不可欠なものであると考えられる。

この達成基準の意図

この達成基準の意図は、テキストによる特定の視覚的な表現を必要とする方へ、必要に応じてテキスト表現を調整できるように、望ましいデフォルトのビジュアルプレゼンテーションを達成することができる技術をコンテンツ制作者に推奨することである。テキストに、特定のフォントサイズ、前景色及び背景色、書体、行間、又は配置を求める利用者を含む。

もし、テキストを用いて同じ視覚的な効果が得られるのであれば、コンテンツ制作者は、情報を提示するのに画像を用いるのではなく、テキストを用いるべきである。もしも何らかの理由により、コンテンツ制作者がテキストの書式を整えても同じ効果が得られない場合、その効果が一般に入手可能なユーザエージェントでは確実に提示できない場合、又は、この達成基準を満たすウェブコンテンツ技術を用いることが達成基準1.4.4などの他の達成基準を満たすことの妨げになる場合には、画像化された文字を使うことができる。例としては、書体のサンプル、ロゴタイプ、ブランドなどのように、伝える情報にとってそのテキストの特定の表現が必要不可欠な場合を含む。また、画像化された文字は、広く普及していない又はコンテンツ制作者が再配布する権利を持っていない特定の書体を用いる目的で使われることもある。あるいは、そのテキストがすべてのユーザエージェントでアンチエイリアスをかけた状態になるようにする目的で使われることもある。

利用者が画像化された文字を自分の好みに合わせてカスタマイズできる場合にも、画像化された文字を用いてもよい。

「文字画像 (image of text)」の定義には、「注記: テキスト以外の部分が重要な視覚的コンテンツである場合、画像に含まれるテキストは該当しない。」とある。例えば、テキストのみよりも視覚的に重要な情報を伝えるグラフ、スクリーンショット、ダイアグラムのような画像が含まれる。

この達成基準を満たすための達成方法は、達成基準 1.4.9 と同じである。ただし、その視覚的な表現がコンテンツ制作者の用いるウェブコンテンツ技術で実現可能な場合に適用されるという点だけが異なる。達成基準 1.4.9 では、利用者がカスタマイズできるときのみ、十分な達成方法が適用される。

達成基準1.4.9 文字画像 (例外なし) を理解するも参照のこと。

達成基準 1.4.5の具体的なメリット:

  • ロービジョンの利用者(コンテンツ制作者の指定した書体、サイズ、及び/又は色では、テキストが読みづらいことがある)

  • 視線移動に問題のある利用者(コンテンツ制作者の指定した行間及び/又は配置では、テキストが読みづらいことがある)

  • 読字に影響を及ぼす認知の障害のある利用者

達成基準 1.4.5の事例

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成基準 1.4.5 の達成方法及び不適合事例 - 文字画像

この節にある番号付の項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組合せを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。他の達成方法についての情報は、達成基準を満たすための達成方法を理解するの「その他の達成方法」を参照のこと。

1.4.5 でさらに対応が望まれる達成方法(参考)

適合するためには必須ではないが、コンテンツをよりアクセシブルにするためには、次の付加的な達成方法もあわせて検討するとよい。ただし、すべての状況において、すべての達成方法が使用可能、または効果的であるとは限らない。

非テキストコンテンツ向けの一般的な達成方法

  1. 情報を提供する非テキストコンテンツを識別する(リンク追加予定)

CSS による達成方法

  1. C12: フォントサイズにパーセントを使用する (CSS)

  2. C13: フォントサイズにキーワードを使用する (CSS)

  3. C14: フォントサイズに em 単位を使用する (CSS)

  4. C8: 単語内の文字間隔を調整するために、CSS の letter-spacing プロパティを使用する (CSS)

  5. C6: 構造を示すマークアップをした上で、コンテンツを配置する (CSS)

  6. 1文字以内でデザインされるテキスト文字を避ける(リンク追加予定)

達成基準 1.4.5 のよくある不適合事例

以下に挙げるものは、WCAG ワーキンググループが達成基準1.4.5に適合していないとみなした、よくある不適合事例である。

(今のところ、文書化された不適合事例はない)

重要な用語

テキスト (text)

プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。

必要不可欠 (essential)

もし取り除いてしまうと、コンテンツの情報あるいは機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

文字画像 (image of text)

特定の視覚的効果を得るために非テキスト形式 (例えば画像) でレンダリングされたテキスト。

注記: テキスト以外の部分が重要な視覚的コンテンツである場合、画像に含まれるテキストは該当しない。

事例: 写真に写っている人の名札にある人名。

視覚的なカスタマイズ (visually customized)

フォント、サイズ、色、及び背景を設定できること。