表示サンプル： このページの修正箇所は次のように表示されます。
CSSに対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、スタイルシートが適用されなくても意味の伝わる表現がなされるようにした上で、スタイルシートを使って見栄えをさらに良くする方法を示すことである。 CSS2の配置関連のプロパティを使用すれば、コンテンツを利用者のビューポート内の任意の位置に配置することができる。構造を示す要素を使っていれば、スタイルが適用されていない際でもコンテンツの意味は正しく伝えられる。
この事例では、コンテンツに対して構造（定義リスト）を示すマークアップがなされている。そして、コンテンツを段組み形式で表示させるためにCSSが使用されている。コンテンツは各クラスの指定でそれぞれの段に絶対配置され、HTMLの定義リストを表示する際にdd要素をインデントするユーザーエージェントのデフォルト値を上書きするために、マージンの値を0にしている。
表示させるコンテンツは以下の通り：
コード例:
<div class="box">
<dl>
<dt class="menu1">製品</dt>
<dd class="item1">電話</dd>
<dd class="item2">コンピューター</dd>
<dd class="item3">ポータブル MP3 プレイヤー</dd>
<dt class="menu2">所在地</dt>
<dd class="item4">アイダホ</dd>
<dd class="item5">ウィスコンシン</dd>
</dt>
</dl>
</div>
上記要素の配置及び表示指定をするCSSは以下の通り：
コード例：
.item1 {
left: 0;
margin: 0;
position: absolute;
top: 7em;
}
.item2 {
left: 0;
margin: 0;
position: absolute;
top: 8em;
}
.item3 {
left: 0;
margin: 0;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0;
margin: 0;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}
スタイルシートが適用されると、データは「製品」と「所在地」の2段組みで表示される。スタイルシートが適用されない場合は、構造と読み上げ順序を保持した状態の定義リストとしてテキストが表示される。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
CSS-Discuss Home Page
[削除ここまで]CSS-Discuss on CSS Layouts
[削除ここまで]CSSで表示位置を調整しているコンテンツに対して：
文書からスタイル情報を取り除く、又はユーザーエージェントでスタイルシートを無効にする。
構造的な関係及びコンテンツの意味が保持されている。
2.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。