See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
All technologies that support CSS.
This failure relates to:
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 or turn off style information in order to view content according to their needs, assistive technologies 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.
In the following example, :before
and :after
are used to indicate speaker changes and to insert quotation marks in a screenplay.
The CSS contains:
Example Code:
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:
Example Code:
<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:
Example Code:
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }
It is used in this excerpt:
Example Code:
<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>
Resources are for information purposes only, no endorsement implied.
Examine all content inserted through use of the :before and :after pseudo-elements and the content
property
Verify that the content is decorative.
If the inserted content is not decorative, check that the information is provided to assistive technologies and is also available when CSS is turned off.
If checks #2 or #3 are false, then this failure condition applies and the content fails this Success Criterion.