Techniques for WCAG 2.0

On this page:

-

# C6: Positioning content based on structural markup

## Applicability

All technologies that support CSS

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)
- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)

## Description

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.

## Examples

### Example 1

In this example structural markup (definition lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the DD element indented.

Here is the content to be displayed:

Example Code:

     <div class="box">
      <dl>
        <dt class="menu1">Products</dt>
        <dd class="item1">Telephones</dd>
        <dd class="item2">Computers</dd>
        <dd class="item3">Portable MP3 Players</dd>
        <dt class="menu2">Locations</dt>
        <dd class="item4">Idaho</dd>
        <dd class="item5">Wisconsin</dd>
        </dt>
      </dl>
     </div>

Here is the CSS which positions and styles the above elements:

Example Code:

     .item1 {
       left: 0;
       margin: 0;
       position: absolute;
       top: 7em;
     }
     .item2 {
       left: 0;
       margin: 0;
       position: absolute;
       top: 8em;
     }
     .item3 {
       left: 0;
       margin: 0;
       position: absolute;
       top: 9em;
     }
     .item4 {
       left: 14em;
       margin: 0;
       position: absolute;
       top: 7em;
     }
     .item5 {
       left: 14em;
       margin: 0;
       position: absolute;
       top: 8em;
     }
     .menu1 {
       background-color: #FFFFFF;
       color: #FF0000;
       font-family: sans-serif;
       font-size: 120%;
       left: 0;
       margin: 0;
       position: absolute;
       top: 3em;
     }
     .menu2 {
       background-color: #FFFFFF;
       color: #FF0000;
       font-family: sans-serif;
       font-size: 120%;
       left: 10em;
       margin: 0;
       position: absolute;
       top: 3em;
     }
     #box {
       left: 5em;
       position: absolute;
       top: 5em;
     }

When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order.

## Resources

Resources are for information purposes only, no endorsement implied.

- CSS-Discuss Home Page

- CSS-Discuss on CSS Layouts

## Related Techniques

- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

## Tests

### Procedure

For content which uses CSS for positioning

1. Remove the style information from the document or turn off use of style sheets in the user agent.

2. Check that the structural relations and the meaning of the content are preserved.

### Expected Results

- Check #2 is true.

- Top
- Contents
- Intro
- Previous: Technique H91
- Next: Technique C7