GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.4.5 画像化された文字に関する達成基準

7.1.4.5 画像化された文字に関する達成基準

使用しているウェブコンテンツ技術で意図した視覚的な表現が可能である場合は、画像化された文字ではなくテキストを用いて情報を伝えなければならない。ただし、次に挙げる場合を除く。

a) カスタマイズ可能
画像化された文字が利用者の要求に応じて視覚的にカスタマイズできる。
b) 必要不可欠
文字の特定の表現が、伝えようとする情報にとって必要不可欠である。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

テキスト」を用いて意図した視覚的な表現が可能であれば、「画像化された文字」ではなく、「テキスト」を用いる必要があります。これは、ブラウザの設定やユーザー・スタイルシートなどによって、「テキスト」に特定の書体や文字色、サイズ、行間などを指定しているユーザーがいるためです。

「使用しているウェブコンテンツ技術で意図した視覚的な表現が可能である場合」というのは、例えばHTMLのウェブページであれば、CSSで書体や色を指定することによって、ターゲットブラウザの画面で同じように表現できる場合のことを指します。

そのため、使用したい書体をCSSで指定しても一部のブラウザでしか表示できなかったり、すべてのブラウザでアンチエイリアスをかけた状態で表示させたかったりした場合は、「使用しているウェブコンテンツ技術で意図した視覚的な表現が可能」ではないので、「テキスト」ではなく「画像化された文字」を使用してもよいことになります。

また、背景に写真や絵柄などがある場合、「テキスト」でも同じ見た目にすることができたとしても、ユーザーが文字サイズを変更した際に、文字の配置がずれてしまうことによって「意図した視覚的な表現」ではなくなってしまうのであれば、文字の配置を固定するために「画像化された文字」を用いることができます。

なお、企業名や商品名などのロゴタイプや書体のサンプルなどは、「b) 必要不可欠」に該当するため、本達成基準は適用されません。

事例と実装

良い例 1:画像化された文字による見出し

スクリーンショット:画像を用いた見出しの文字

デザイナーが見出しで使用したいフォントをCSSで指定しても対象ブラウザで表示できないため、画像化された文字を用いている。

良い例 2:写真上にある文字

スクリーンショット:写真上にある画像化された文字

背景に写真や絵柄がある場合、文字をテキストにすると、ユーザーが文字サイズを変更した際などにデザイナーが意図した配置が崩れてしまうため、画像化された文字を用いている。

参考情報

関連する達成基準

等級AAA