CSSをサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、CSSを使ってテキストの視覚的な表現を制御する方法を実践することである。これにより利用者が要求を満たすたように、ユーザーエージェントを通してテキストの視覚的な特徴を変更できるようになる。テキストの特徴にはサイズ、色、書体、相対配置などの外観を含んでいる。
CSSは主に表現からドキュメント構造を分離することによってアクセシビリティに有益さを与える。スタイルシートは、マークアップの外部から字間、文字配列、ページにおけるオブジェクトの配置、音声やスピーチのアウトプット、フォントなどの正確な制御ができるように設計されている。マークアップからスタイルを分離することにより、コンテンツ制作者はコンテンツの中でマークアップを単純化し、整理することができ、同時によりアクセシブルにすることができる。
画像内にあるテキストはいくつかのアクセシビリティ上の問題があり、以下のことができない：
ブラウザの設定に応じて大きさを調整する
ブラウザの設定、又はユーザー定義のスタイルシートのルールによって指定された色で表示する
ハイコントラストといった、オペレーティングシステムの設定を反映させる
適切な視覚的表現を作り出すためには、これらの要素のテキスト部分には、テキストを使い、セマンティックマークアップとスタイルシートの組み合わせを用いるとよい。このことが効果的に作用するために、利用者のシステム上で利用できると思われるフォントを選び、定義された最初のフォントを持たない利用者のために代替フォントを定義する。最新のマシンとユーザーエージェントはしばしばすべてのテキストにスムーズもしくはアンチエイリアスをかけている。そのため見出しやボタンは画像化された文字に頼ることなくこれらのシステム上できれいに表示される。
次のCSSのプロパティは、テキストのスタイルを指定し、画像化された文字を使う必要性を回避するのに有効である：
font-familyプロパティをを使って、文字の外観を等幅フォントで表示する。
text-alignプロパティをを使って、表示域の右側にテキストを表示する。
font-sizeプロパティをを使って、テキストをより大きいサイズで表示する。
font-styleプロパティを使って、テキストをイタリック体で表示する。
font-weightプロパティを使って、テキストの文字をどのくらい太く又は細く表示すべきか設定する。
colorプロパティを使って、テキストやテキストコンテナに色を表示する。
line-heightプロパティを使って、テキストのブロックに対してラインの高さを指定する。
text-transformプロパティを使って、テキストの文字（大文字小文字の区別）を制御する。
letter-spacingプロパティを使って、テキストの文字間隔を制御する。
background-imageプロパティを使って、非テキストの背景上にテキストを表示させることができる。
first-lineの擬似クラスを使って、テキストのブロックにおける最初の行の表現を修正することができる。
first-letterの擬似クラスを使って、テキストのブロックにおける最初の文字の表現を修正することができる。
:beforeと:afterの擬似クラスを使って、テキストのブロックの前後に装飾的な非テキストコンテンツを挿入することができる。
XHTML：
コード例：
<p>Javascriptで文字列を変換して大文字にする方法は<code>toUpperCase()</code>である。</p>
CSS：
コード例：
code { font-family:"Courier New", Courier, monospace }
XHTML：
コード例：
<p class="right">このテキストは表示域の右側にあるべきである。</p>
CSS：
コード例：
.right { text-align: right; }
XHTML：
コード例：
<p>2008年<strong class="largersize">3月</strong>9日</p>
CSS：
コード例：
strong.largersize { font-size: 1.5em; }
注意 ：この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML：
コード例：
<p>2008年<em class="highlight">3月</em>9日</p>
CSS：
コード例：
.highlight{ color: red; }
注意 ：この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML：
コード例：
<p>この記事は <a href="http://www.example.com" class="featuredsite">内分泌学のブログ</a>で入手可能である。</p>
CSS：
コード例：
.featuredsite{ font-style:italic; }
注意 ：この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML：
コード例：
<p>この取引は <span class="highlight">今</span>利用可能です！</p>
CSS：
コード例：
.highlight { font-weight:bold; color:#990000; }
注意 ：この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML：
コード例：
<p>2008年 <span class="caps">3月</span> 9日</p>
CSS：
コード例：
.caps { text-transform:uppercase; }
CSSのline-heightプロパティを使って、段落の行間をフォントの高さの２倍に表示する。
XHTML：
コード例：
<p>人とその人の運命についての考察はいつも<br />
全ての技術的な試みの最重要な関心を形成する。 <br />
あなたの図式と方程式においてそれを忘れてはいけない。 </p>
CSS：
コード例：
p { line-height:2em; }
CSSのline-heightプロパティを使って、テキストの行間をフォントの高さより少なく表示させる。テキストの2行目は、テキストの1行目の後に配置されて、あたかも1行目の一部だがやや下がっているように見える。
XHTML：
コード例：
<h1 class="overlap"><span class="upper">本日の</span><br />
<span class="byline">ニュース</span></h1>
CSS：
コード例：
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
CSSのletter-spacingプロパティを使って、テキストの2行目では、文字をより接近させて表示する。
XHTML：
コード例：
<h1 class="overlap"><span class="upper">本日の</span><br />
<span class="byline">ニュース</span></h1>
CSS：
コード例:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }
CSSのletter-spacingプロパティを使って、テキストの2行目では、文字をより接近させて表示する。【訳注：おそらく原文が間違っています。WCAGワーキンググループに確認中です。】
XHTMLの構成：
コード例：
<h1 class="upper2">ニュース</h1>
CSS：
コード例：
.upper2 { text-transform:uppercase; letter-spacing:1em; }
CSSのfont-styleプロパティを使って、バナーのテキスト要素を表示させ、background-imageプロパティを使って、テキストの後ろの画像を表示させる。
XHTML：
コード例：
<div id="banner"><span id="bannerstyle1">地域の審議会へ</span>
<span id="bannerstyle2">ようこそ</span></div>
CSS：
コード例：
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}CSSの:first-line擬似クラスを使って、最初の行をより大きなサイズで赤色に表示する。
XHTML：
コード例：
<p class="startline">むかしむかし...<br />
...遠い地で, 遠くへ... </p>
CSS：
コード例：
.startline:first-line { font-size:2em; color:#990000; }
CSSの:first-letter擬似クラスを使って、最初の文字をより大きなサイズで赤く、縦位置を中央揃えにして表示する。
XHTML：
コード例：
<p class="startletter">むかしむかし...</p>
CSS：
コード例：
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
CSSのプロパティを用いてテキストの視覚的な表現を制御している。
1.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。