WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C30: テキストを画像化された文字に置き換え、変換するユーザインタフェースコントロールを提供するために、CSS を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

解説

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

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

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

注記: この達成方法は、非適合コンテンツのための適合している代替版のページを提示するために、スタイル切り替えの達成方法との組み合わせで用いることができる。更なる情報として C29: 適合している代替版を提供するために、スタイル・スイッチャーを使用する適合している代替版を理解するを参照。

事例

事例 1

デザインスタジオのサイトは、利用者が彼らのウェブページの 2 種類の表現を見ることができるようにスタイルの切り替えを用いている。デフォルトのバージョンでは、見出しのテキストが画像化されたテキストで置き換えられている。ページ上のコントロールによって利用者はテキストで見出しを表現したバージョンへ切り替えることができる。

CSS:

コード例:

...
<div id="Header"> 
  <h1><span>パッファーフィッシュデザインスタジオ</span></h1> 
  <h2><span>驚くべき独自性とデザインソリューション</span></h2> 
  </div> 
...

画像化されたテキストを含んだ表現のための CSS を以下に記す。見出し要素のコンテンツを画面の外に配置して非表示にするためにポジショニングを使用することで、テキストはスクリーンリーダー利用者が利用可能な状態に保持されていることに注意。

コード例:

...
#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;
	}

画像化されたテキストを含まないプレゼンテーションのための CSS。

コード例:

...
#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;
	}

参考リソース

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

検証

チェックポイント

  1. ウェブページに利用者が代替表現を選択できるコントロールが含まれている。

  2. コントロールがアクティブである時、結果ページは画像化されたテキストが用いられている箇所全てにおいてテキスト(プログラムで解釈可能なテキスト)を含んでいる。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。