CSSをサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関連する不適合事例である：
:before 及び :afterは、IE7以下ではサポートされていない。
CSSの:before と:after の擬似要素が、要素のドキュメントツリーコンテンツの前及び後のコンテンツの位置を指定している。そして、contentプロパティが、それらの擬似要素とあわせて、何が挿入されるかを指定している。スタイル情報をカスタマイズしたり完全にオフにしたりして、自分のニーズに合わせてコンテンツを閲覧している利用者の場合、CSSを用いて挿入されている情報に支援技術がアクセスできないことがある。そのため、これらのプロパティを使って非装飾的なコンテンツを挿入するのは、不適合となる。
次の例では、:before 及び :after を用いて話者の切り替わりを示し、また脚本内の引用文を挿入している。
CSSは、次のようになっている。
コード例：
p.jim:before { content: "Jim: " }
p.mary:before { content: "Mary: " }
q:before { content: open-quote }
q:after { content: close-quote }
これが、次のように使われている。
コード例：
<p class="jim">
<q>彼は間に合うかな？</q>
</p>
<p class="mary">
<q>無理そうよね。</q>
</p>
この例では、:before を用いて、意見と事実の違いを区別している。
CSSは、次のようになっている。
コード例：
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }
これが、次のように使われている。
コード例：
<p class="fact">
事件発生時、被告人はその犯罪現場にいた。
</p>
<p class="opinion">
被告人がその罪を犯した。
</p>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
:before や :after の疑似要素及び content プロパティを用いて挿入されている全てのコンテンツを探し出す。
コンテンツは、装飾を目的にしたものである。
挿入されたコンテンツが装飾を目的にしたものではない場合、その情報が支援技術に対して提供されており、CSSをオフにした際にも入手可能である。
2. 又は 3. を満たしていなければ、この不適合の条件が適用され、そのコンテンツは達成基準を満たしていないことになる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。