【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
CSS をサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関連する失敗例である:
F87 に関するユーザエージェントサポートノートを参照のこと。
CSS の :before と :after の疑似要素が、要素のドキュメントツリーコンテンツの前及び後のコンテンツの位置を指定している。そして、content プロパティが、それらの疑似要素とあわせて、何が挿入されるかを指定している。スタイル情報をカスタマイズしたり完全にオフにしたりして、自分のニーズに合わせてコンテンツを閲覧している利用者の場合、CSS を用いて挿入されている情報に支援技術がアクセスできないことがある。そのため、これらのプロパティを使って非装飾的なコンテンツを挿入するのは、不適合となる。
訳注: MDN の疑似要素 (Pseudo-elements) に示されているように、:after 及び :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
次の例では、: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>Do you think he's going to make it?</q>
</p>
<p class="mary">
<q>It's not looking good.</q>
</p>この例では、:before を用いて、意見と事実の違いを区別している。
CSS は、次のようになっている。
コード例:
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }これが、次のように使われている。
コード例:
<p class="fact">
The defendant was at the scene of the crime when it occurred.
</p>
<p class="opinion">
The defendant committed the crime.
</p>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: Selectors Level 3 §7.4. The ::before and ::after pseudo-elements も参照のこと。この仕様の記述が、「CSS 2.1: Generated content, automatic numbering, and lists」に取って代わることに注意されたい。
:before 及び :after 疑似要素並びに content プロパティを用いて挿入されている全てのコンテンツを探し出す。
コンテンツが、装飾を目的にしたものであることを確認する。
挿入されたコンテンツが装飾を目的にしたものではない場合、その情報が支援技術に対して提供されており、CSS をオフにした際にも入手可能であることを確認する。
2. 又は 3. の結果が偽である場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。