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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

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

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

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

注記

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

事例

例 1

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

CSS:

...
<div id="Header"> 
  <h1><span>Pufferfish Design Studio</span></h1> 
  <h2><span>Surprising Identity and Design Solutions</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;
	}

参考リソース

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

訳注

Background に関するプロパティは、CSS Backgrounds and Borders Module Level 3 で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2020 によれば、今日の CSS を構成する仕様として位置づけられている。

検証

手順

  1. ウェブページに利用者が代替となる提示を選択できるコントロールが含まれていることを確認する。
  2. コントロールがアクティブである時、結果のページは文字画像が用いられている箇所全てにおいてテキスト (プログラムによる解釈が可能なテキスト) を含んでいることを確認する。

期待される結果

  • 上記の全ての結果が真である。