適用 (対象)
CSS をサポートする全てのウェブコンテンツ技術
これは達成基準 1.3.1: 情報及び関係性 (失敗) に関する達成方法である。
解説
CSS の :before と :after の疑似要素が、要素のドキュメントツリーコンテンツの前及び後のコンテンツの位置を指定している。そして、content プロパティが、それらの疑似要素とあわせて、何が挿入されるかを指定している。スタイル情報をカスタマイズして自分のニーズに合わせてコンテンツを閲覧している利用者の場合、CSS を用いて挿入されている情報にアクセスできないことがある。そのため、これらのプロパティを使って非装飾的なコンテンツを挿入するのは、不適合となる。
この達成基準を検証する一般的な方法は、CSS スタイルを無効にして、疑似要素を使って追加されたコンテンツが可視のままになっているかどうかを確認することである。
MDN の疑似要素 (Pseudo-elements) に示されているように、:after 及び :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
事例
例 1
次の例では、: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>
例 2
この例では、: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 プロパティを用いて挿入されたコンテンツの各インスタンスについて:
- 生成されたコンテンツによって提示される非装飾的な情報が、スタイルがオーバーライドされた場合であっても、利用可能であることを確認する。
期待される結果
- #1 の結果が偽である場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。