Techniques for WCAG 2.0

On this page:

-

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

## Applicability

All technologies that support CSS.

This failure relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

## User Agent and Assistive Technology Support Notes

`:before` and `:after` are not supported by IE7 and lower

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

## Examples

### Failure Example 1

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>

### Failure Example 2

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

Resources are for information purposes only, no endorsement implied.

- CSS 2.1: Generated content, automatic numbering, and lists

## Related Techniques

- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

## Tests

### Procedure

1. Examine all content inserted through use of the :before and :after pseudo-elements and the `content` property

2. Verify that the content is decorative.

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

### Expected Results

- If checks #2 or #3 are false, then this failure condition applies and the content fails this Success Criterion.

- Top
- Contents
- Intro
- Previous: Failure F86
- Next: Failure F88