テキストを文字画像に置き換えるために CSS を利用し、切り替えのためのユーザインタフェースコントロールを提供する

適用 (対象)

CSS をサポートするすべてのウェブコンテンツ技術

これは、次の達成基準に関する達成方法である:

• 達成基準 1.4.5: 文字画像 (十分な達成方法)
• 達成基準 1.4.9: 文字画像 (例外なし) (十分な達成方法)

解説

この達成方法の目的は、利用者が好みに従ってコンテンツを表示できるように、構造化された HTML テキストを文字画像に置き換える CSS の用い方を示すことである。この達成方法を用いるには、コンテンツ制作者はページの構造をマークアップするためにセマンティックな要素を用いる HTML ページを作ることから始める。次にコンテンツ制作者はページに対して二つ以上のスタイルシートを作成する。一つめのスタイルシートは HTML テキストをテキストとして表現し、二つめはいくつかの HTML テキストを文字画像に置き換えるために CSS の機能を用いている。最後に、サーバーサイド又はクライアントサイドスクリプトの使用を通して、コンテンツ制作者は利用者が利用するビューを切り替えることができるコントロールを提供する。

この達成方法は、文字画像を含まない表現が利用可能であり、かつ、利用者が代替表現に切り替えることができるユーザインタフェースコントロールが関連する達成基準を満たす限り、達成基準 1.4.5 又は 1.4.9 を満たすために用いることができる。可能であれば、コンテンツ制作者はデフォルトの表現として文字画像を含まない表現を配信すべきである。更に、切り替えのためのコントロールはページの先頭近くに配置されるべきである。

「画像の置き換え」の達成方法は、さまざまなユーザエージェント、構成、及び支援技術の課題との互換性 (詳細は「参照リソース」を参照) に取り組むために多様なものが開発されてきた。コンテンツ制作者がテキストの置き換えのために用いる数々のアプローチがある一方、その達成方法がスクリプト、CSS、画像 (又はそれらの組み合わせ) をオフにした場合に正確に動作するかどうか、支援技術との互換性を考慮することは重要である。すべての場合において動作する単一の解決法を見出すことは難しいので、この達成方法は、利用者が画像置き換えの達成方法を含んでいない表現へ切り替えることのできるコントロールを用いることを推奨している。

事例

...
<div id="Header"> 
  <h1><span>Pufferfish Design Studio</span></h1> 
  <h2><span>Surprising Identity and Design Solutions</span></h2> 
  </div> 
...

...
#Header h1 {
	background-image: url(pufferfish-logo.png);
	height: 195px;
	width: 290px;
	background-repeat: no-repeat;
	margin-top: 0;
	position: absolute;
	}
#Header h1 span {
	position: absolute;
        left: -999em;
	}
#Header h2 {
	background-image: url(beauty.png);
	background-repeat: no-repeat;
	height: 234px;
	width: 33px;
	margin-left: 8px;
	position: absolute;
	margin-top: 250px;
	}
#Header h2 span {
	position: absolute;
        left: -999em;
	}
	

...
#Header h1 {
	font: normal 200%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #000099;
	background: #ffffff;
	}

#Header h2 {
	font: normal 160%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #336600;
	background: #ffffff;
	}

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

• Replacing Text By An Image
• Facts and Opinion About Fahrner Image Replacement
• In Defense of Fahrner Image Replacement
• Fahrner Image Replacement
• CSS2: 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'

関連する達成方法

• C29: 適合している代替版を提供するために、スタイルスイッチャーを使用する
• F3: 達成基準 1.1.1 の失敗例 － 重要な情報を伝える画像を付加するために、CSS を使用している

検証