CSSをサポートするすべてのウェブコンテンツ技術
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、利用者が彼らの好みに従ってコンテンツを見ることができるような方法で構造化されたHTMLテキストを画像化されたテキストに置き換えるためのCSSの用い方を実践することである。この実装方法を用いるには、コンテンツ制作者はページの構造をマークアップするためにセマンティックな要素を用いるHTMLページを作ることから始める。次にコンテンツ制作者はページに対して2またはそれ以上のスタイルシートを作成する。1つめのスタイルシートはHTMLテキストをテキストとして表現し、2つめはいくつかのHTMLテキストをテキストの画像に置き換えるためにCSSの機能を用いている。最後に、server-side 又は client-side scriptingの使用を通して、コンテンツ制作者は利用者が利用するビューを切り替えることができるコントロールを提供する。
この実装方法は、画像化されたテキストを含まない表現が利用可能であり、かつ、利用者が代替表現に切り替えることができるユーザーインタフェースコントロールが関連する達成基準を満たす限り、達成基準1.4.5又は1.4.9を満たすために用いることができる。可能であれば、コンテンツ制作者はデフォルトの表現として画像化されたテキストを含まない表現を配信すべきである。更に、切り替えのためのコントロールはページの先頭近くに配置されるべきである。
「画像の置き換え」の実装方法は、さまざまなユーザーエージェント、構成、及び支援技術の課題との互換性（詳細は「参照リソース」を参照）に取り組むために多様なものが開発されてきた。コンテンツ制作者がテキストの置き換えのために用いる数々のアプローチがある一方、その実装方法がスクリプト、CSS、画像（又はそれらの組み合わせ）をオフにした場合に正確に動作するかどうか、支援技術との互換性を考慮することは重要である。すべての場合において動作する単一の解決法を見出すことは難しいので、この実装方法は、利用者が画像置き換えの実装方法を含んでいない表現へ切り替えることのできるコントロールを用いることを推奨している。
注意：この実装方法は、非適合コンテンツのための適合している代替バージョンのページを提示するために、スタイル切り替えの実装方法との組み合わせで用いることができる。更なる情報として C29: スタイル・スイッチャーを用いて、適合している代替バージョンを提供する と適合している代替バージョンを理解するを参照。
デザインスタジオのサイトは、利用者が彼らのウェブページの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;
}
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ウェブページに利用者が代替表現を選択できるコントロールが含まれている。
コントロールがアクティブである時、結果ページは画像化されたテキストが用いられている箇所全てにおいてテキスト（プログラムで解釈可能なテキスト）を含んでいる。
上記の全てを満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。