--- obsoleteMessage: CSS-generated content does not always constitute a failure, as support for it has improved in user agents and screen readers. It may still present other usability issues, such as unselectable text. obsoleteSince: 20 --- Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS

Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS

ID: F87

Technology: failures

Type: Failure

When to Use

All technologies that support CSS.

Description

The CSS ::before and ::after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize style information in order to view content according to their needs, they may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.

A common way to test this critieria is to disable CSS styles to view whether content added using pseudo-elements remains visible.

Examples

In the following example, ::before and ::after are used to indicate speaker changes and to insert quotation marks in a screenplay.

The CSS contains:

p.jim::before {	content: "Jim: " }
p.mary::before { content: "Mary: " }
q::before { content: open-quote }
q::after  { content: close-quote }

It is used in this excerpt:

<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>

In this example, ::before is used to differentiate facts from opinions.

The CSS contains:

p.fact::before { content: "Fact: "; font-weight: bold; }
p.opinion::before { content: "Opinion: "; font-weight: bold; }

It is used in this excerpt:

<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>

Tests

Procedure

For each instance of content inserted through use of the ::before and ::after pseudo-elements and the content property:

  1. Check that non-decorative information presented by the generated content is available when styles are overridden.

Expected Results

Resources