WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F87: 達成基準 1.3.1 の失敗例 - CSS の :before や :after 疑似要素及び 'content' プロパティを用いて、装飾目的ではないコンテンツを挿入している

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

CSSをサポートする全てのウェブコンテンツ技術

これは、次の達成基準に関連する失敗例である:

ユーザエージェント及び支援技術によるサポート

F87 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

CSSの:before:afterの擬似要素が、要素のドキュメントツリーコンテンツの前及び後のコンテンツの位置を指定している。そして、contentプロパティが、それらの擬似要素とあわせて、何が挿入されるかを指定している。スタイル情報をカスタマイズしたり完全にオフにしたりして、自分のニーズに合わせてコンテンツを閲覧している利用者の場合、CSSを用いて挿入されている情報に支援技術がアクセスできないことがある。そのため、これらのプロパティを使って非装飾的なコンテンツを挿入するのは、不適合となる。

事例

失敗例 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>彼は間に合うかな?</q>
</p>
<p class="mary">
 <q>無理そうよね。</q>
</p>

失敗例 2

この例では、: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>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. :before:after の疑似要素及び content プロパティを用いて挿入されている全てのコンテンツを探し出す。

  2. コンテンツは、装飾を目的にしたものである。

  3. 挿入されたコンテンツが装飾を目的にしたものではない場合、その情報が支援技術に対して提供されており、CSSをオフにした際にも入手可能である。

判定基準