Technique G57:Ordering the content in a meaningful sequence

Applicability

All technologies.

This technique relates to:

1.3.2: Meaningful Sequence (Sufficient)
1.3.2: Meaningful Sequence (Sufficient using a more specific technique)

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 this is different from the order in which the content is encoded in the underlying source file.

For example, when mixing languages with different directionality in HTML, the bidirectional algorithm may position punctuation in the wrong location in the visual rendering. The visual rendering problem could be corrected by moving the punctuation in the content stream so that the bidirectional algorithm positions it as desired, but this would expose the incorrect content order to assistive technology. The content is both rendered in the correct order visually and exposed to assistive technology in the correct order by using markup to override the bidirectional algorithm.

When rendered visually, white space characters such as 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.

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

Tests

Procedure

Linearize content using a standard approach for the technology (e.g., removing layout styles or running a linearization tool)
Check to see if the order of content yields the same meaning as the original

Expected Results

Check #2 is true.