Skip to content

解説書 達成基準 1.4.5:文字画像 (レベル AA)

要約

目標
文字がどのように提示されるかを利用者が調整できる。
何をすればよいか
画像による文字の代わりに、テキストを用いる。
なぜそれが重要か
画像内では、文字の見えかたを変更することができない。

意図

この達成基準の意図は、テキストによる特定の視覚的な提示を必要とする人が、必要に応じてテキストによる提示を調整できるように、所望のデフォルトの視覚的提示を達成できる技術をコンテンツ制作者に推奨することである。これは、テキストに、特定のフォントサイズ、前景色及び背景色、書体、行間、又は配置を必要とする人を含む。

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

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

文字画像の定義には、「注記: テキスト以外の部分が重要な視覚的コンテンツである場合、画像に含まれるテキストは該当しない。」とある。そのような画像の事例としては、グラフ、スクリーンショットやダイアグラムなどが挙げられ、それらは文字以外のものを通じて重要な情報を視覚的に伝えているからである。

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

達成基準 1.4.9: 文字画像 (例外なし)も参照のこと。

利点

  • ロービジョンの利用者 (コンテンツ制作者の指定した書体、サイズ、及び/又は色では、テキストが読みづらいことがある)
  • 視線移動に問題のある利用者 (コンテンツ制作者の指定した行間及び/又は配置では、テキストが読みづらいことがある)
  • 読字に影響を及ぼす認知の障害のある利用者

事例

スタイルを指定した見出し
ビットマップ画像を用いて特定のフォント及びサイズで見出しを提示するのではなく、コンテンツ制作者は CSS を用いて同じ見栄えにする。
動的に生成された画像
あるウェブページでは、サーバーサイドのスクリプトを用いてテキストを画像として提示している。そのページには、利用者が生成される画像のフォントサイズ及び前景色と背景色を調節することのできるコントロールがある。
引用
あるウェブページに引用がある。その引用部分自体は、イタリックのテキストで、左側をインデントした状態で提示されている。その引用した部分の人名が、引用の下に 1.5 倍の行間を空けて、左側からさらにインデントした状態になっている。そのテキストの配置、行間スペースの指定、そしてテキストの書体、サイズ、色及び装飾には、CSS を用いている。
ナビゲーション
ウェブページに、ナビゲーションリンクのメニューがあり、アイコンとテキストの両方でリンク先を示している。CSS を用いて、テキストの書体、サイズ、前景色及び背景色、そしてナビゲーションリンク間の間隔を指定している。
文字を含んだロゴ
あるウェブサイトには、各ウェブページの左上のコーナーに組織のロゴがある。そのロゴには、ロゴタイプ (ロゴの一部又は全部がテキスト) がある。テキストの視覚的提示は、そのロゴの特定に不可欠であり、そのテキストの特徴を変更することができない GIF 画像として含まていれる。そして、その画像には、テキストによる代替がある。
書体のサンプル
ウェブページに、特定の書体に関する情報がある。その書体を他の書体に置き換えると、サンプルとしての目的が損なわれてしまう。そのサンプルは、その文字の特徴を変更することができない JPEG 画像である。そして、その画像には、テキストによる代替がある。
手紙の写し
ウェブページに、手紙の原本を描写したものがある。オリジナルの体裁でその手紙を見せることが、その手紙の書かれた時代に関する情報を伝える上で不可欠である。その手紙は、その文字の特徴を変更することができない GIF 画像である。そして、その画像には、テキストによる代替がある。
記号的な文字
利用者がテキストのブロックを入力できるフォームがある。そのフォームは、テキストのスタイル指定やスペルチェックなどの機能のボタンをたくさん提供している。ボタンの中には文字を用いたものがあり、その文字に自然言語で何かを表現する並び順はない。例えば、フォントを太字にする機能には "B"、テキストをイタリックにする機能には "I"、そしてスペルチェックの機能には "ABC" が使われている。その記号的な文字は、その文字の特徴を変更することができない GIF 画像としてボタンになっている。そして、そのボタンにはテキストによる代替がある。
文字画像のカスタマイズ可能なフォント設定
あるウェブサイトでは、利用者がフォントを設定できるようになっており、このウェブサイトのすべての文字画像は、その設定に基づいて提供される。

関連リソース

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

テクニック

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

十分なテクニック

参考テクニック

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加のテクニックを検討することが望ましい。ただし、すべての状況において、すべてのテクニックが使用可能、又は効果的であるとは限らない。

CSS のテクニック

重要な用語

支援技術 (assistive technology)

障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び/又はソフトウェア。

注記

支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。

注記

支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。

注記

主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。

必要不可欠 (essential)

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

自然言語 (human language)

人間とコミュニケーションをとるために話される、書かれる、又は (視覚的もしくは触覚的な手段で) 手話にされる言語。

注記

手話も参照。

文字画像 (image of text)

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

注記

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

プログラムによる解釈 (programmatically determined)

支援技術を含む様々なユーザエージェントが抽出でき、利用者に様々な感覚モダリティで提示できるような形のデータがコンテンツ制作者によって提供されたとき、そのデータがソフトウェアによって解釈されること。

手話 (sign language)

意味を伝えるために、手と腕の動き、顔の表情又は身体の姿勢の組み合わせを用いる言語。

テキスト (text)

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

ユーザエージェント (user agent)

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。

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

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

テストルール

以下は、この達成基準の特定の側面に関するテストルールである。この特定のルールを使用して WCAG に適合しているかどうかを確認する必要はないが、これらのルールは定義され、承認されたテスト方法である。テストルールの使用については、WCAG 達成基準のテストルールを理解するを参照のこと。

Back to Top