Techniques for WCAG 2.0

On this page:

-

# G57: Ordering the content in a meaningful sequence

## Applicability

All technologies.

This technique relates to:

- 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 ensure that the order of content presented to assistive technologies allows the user to make sense of the content. Some techniques permit the content to be rendered visually in a meaningful sequence even if the underlying order of the content is confusing.

For example, when mixing languages with different directionality in HTML, the bidirectional algorithm may place punctuation in the wrong place. Correctly ordered content maintains the punctuation in the correct sequence in the content stream and uses markup to override the bidirectional algorithm, rather than moving the punctuation in the content stream so that the default rendering positions it correctly.

When rendered visually, white space characters such a space or tab may not appear to be part of the content. However, when inserted into the content to control visual formatting, they may interfere with the meaning of the content.

At a larger granularity, controlling the placement of blocks of content in an HTML document using layout tables may produce a rendering in which related information is positioned together visually, but separated in the content stream. Since layout tables are read row by row, if the caption of an illustration is placed in the row following the illustration, it may be impossible to associate the caption with the image.

## Examples

### Example 1

A Web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in the navigation bar form a meaningful sequence. The heading, image, and text of the description also form a meaningful sequence. CSS is used to position the elements on the page.

Example Code:

    Markup:

    <h1>My Museum Page</h1>
    <ul id="nav">
    	<li><a href="#">Link 1</a></li>
    	...
    	<li><a href="#">Link 10</a></li>
    </ul>
    <div id="description">
    <h2>Mona Lisa</h2>
    <p>
    <img src="img.png" alt="Mona Lisa">
    </p>
    <p>...detailed description of the picture...</p>
    </div>

    CSS:

    ul#nav
    {
    	float: left;
    	width: 9em;
    	list-style-type: none;
    	margin: 0;
    	padding: 0.5em;
    	color: #fff;
    	background-color: #063;
    }

    ul#nav a
    {
    	display: block;
    	width: 100%;
    	text-decoration: none;
    	color: #fff;
    	background-color: #063;
    }

    div#description
    {
    	margin-left: 11em;
    }

## Resources

No resources available for this technique.

## Related Techniques

- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- C6: Positioning content based on structural markup
- C27: Making the DOM order match the visual order
- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

## Tests

### Procedure

1. Linearize content using a standard approach for the technology (e.g., removing layout styles or running a linearization tool)

2. Check to see if the order of content yields the same meaning as the original

### Expected Results

- Check #2 is true.

- Top
- Contents
- Intro
- Previous: Technique G56
- Next: Technique G58