Web checklist

Checkpoint 1.3c: Sequencing content

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.


Rationale

The purpose of this checkpoint is to ensure that content sequence can be determined programmatically. For example, the meaning in the sequence of content on a Web page does not change when you listen to the Web page with a screen reader. Whether you are listening to a Web page with a screen reader or viewing a Web page in a text browser, the meaning of the information is the same.

Sequence is not important for some content on a Web page. For example, the order of items in an unordered list does not affect the meaning of the list. However, the order of text, tables and ordered lists is important. When using layout tables to visually organize information on a Web page, the sequence of information must remain meaningful.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques. These techniques are defined in WCAG 2.0 Level A Success Criterion 1.3.2 (link resides outside of ibm.com).

  1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
  2. Mark and order Content: Mark sequences in the content as meaningful AND order the content in a meaningful sequence.
  3. DOM and Visual Order: Make the DOM order match the visual order.
  4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
  5. Position content: Position content based on structural markup.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

General examples

  1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.

    To comply with this technique, you must implement all of the following examples.

    General example 1

    Order the content in a meaningful sequence for all the content in the Web page.

    For additional information, refer to the WCAG 2.0 examples for ordering the content in a meaningful sequence (link resides outside of ibm.com).

    Required unit tests for general development technique 1

    Perform the following unit tests using a Web syntax analysis tool or a screen reader.

  2. Mark and order content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.

    There are no general examples of implementing this technique. Use the HTML examples as a guide.

  3. DOM and visual order: Make the DOM order match the visual order.

    There are no general examples of implementing this technique. Use the script examples as a guide.

  4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.

    There are no general examples of implementing this technique. Use the CSS examples as a guide.

  5. Position content: Position content based on structural markup.

    There are no general examples of implementing this technique. Use the CSS examples as a guide.

 

HTML examples

  1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.

    There are no examples of implementing this technique in HTML. Use the general or Dojo examples as a guide.

  2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.

    To comply with this technique, you must implement all of the following examples.

    HTML example 1

    Use a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline.

    For additional information, refer to the WCAG 2.0 examples of using unicode to mix text direction inline (link resides outside of ibm.com).

    HTML example 2

    Use the dir attribute on an inline element to resolve problems with nested directional runs.

    When a page includes content with mixed directional text, you must identify the change in direction using the dir attribute. An example of nested directional text occurs when you have an English document (read left to right) with a quote in Arabic (read right to left) and English.

    John said, "<span lang="ar" dir="rtl">(Arabic word for dog)</span>" means dog.

    For additional information, refer to the WCAG 2.0 examples of using the dir attribute to resolve problems with nested directional runs (link resides outside of ibm.com).

    Required unit tests for HTML development technique 2

    Manually perform the following unit tests:

  3. DOM and Visual Order: Make the DOM order match the visual order.

    There are no examples of implementing this technique in HTML. Use the script examples as a guide.

  4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.

    There are no examples of implementing this technique in HTML. Use the CSS examples as a guide.

  5. Position content: Position content based on structural markup.

    There are no examples of implementing this technique in HTML. Use the CSS examples as a guide.

 

Script examples

For techniques that have no technology-specific examples, refer to the general examples for guidance.

  1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.

    There are no examples of implementing this technique with scripts. Use the general and Dojo examples as a guide.

  2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.

    There are no examples of implementing this technique with scripts. Use the HTML examples as a guide.

  3. DOM and Visual Order: Make the DOM order match the visual order.

    To comply with this technique, you must implement the following example.

    Script example 1

    Ensure that the order of content in the source code is the same as the visual presentation of the content.

    Assistive technologies read Web content in source code order. If CSS orders Web content that does not visually match the source code order, assistive technologies cannot read the content in the same order as a sighted user would read the content. Therefore, the order of content in the source code must match the visual presentation of the content.

    For additional information, refer to the WCAG 2.0 examples for making the DOM order match the visual order (link resides outside of ibm.com).

    Required unit tests for Script development technique 3

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

  4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.

    There are no examples of implementing this technique with scripts. Use the CSS examples as a guide.

  5. Position content: Position content based on structural markup.

    There are no examples of implementing this technique with scripts. Use the CSS examples as a guide.

 

CSS examples

  1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.

    There are no examples of implementing this technique with CSS. Use the general and Dojo examples as a guide.

  2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.

    There are no examples of implementing this technique with CSS. Use the HTML examples as a guide.

  3. DOM and Visual Order: Make the DOM order match the visual order.

    Scripts can be used to insert content into the DOM, but CSS must also provide a visual presentation of the content that matches the DOM order to preserve its meaning. Refer to the Script examples for technique 3 for development and test guidance.

  4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.

    To comply with this technique, you must implement the following example.

    CSS example 1

    Adjusting the space between letters is commonly used to create specific visual effects. However, this may cause assistive technology to incorrectly interpret content. For example, most screen readers announce "F L O R I D A" letter by letter. You can achieve the same visual look with CSS letter-spacing and have assistive technology read the word "Florida."

    For example, define the following heading in the HTML markup:

    <h6>FLORIDA</h6>

    In the style sheet, define the rule:

    <style type="text/css">h6 {letter-spacing: 0.5em;}</style>

    The CSS rule renders Florida with space between the letters.

    F L O R I D A

    For additional information, refer to the WCAG 2.0 examples for using CSS letter-spacing to control spacing within a word (link resides outside of ibm.com).

    Required unit test for CSS development technique 4

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

  5. Position content: Position content based on structural markup.

    To comply with this technique, you must implement the following example.

    CSS example 2

    Position content based on structural markup.

    For additional information, refer to the WCAG 2.0 examples for positioning content based on structural markup (link resides outside of ibm.com).

    Required unit tests for CSS development technique 5

    Perform the following unit test:

    Manually identify any content in which the visual appearance is enhanced using CSS and follow the instructions to disable style sheets in the Web browser. Display the Web page in the browser and verify that the structural relationships and the meaning of the content are preserved.

    Disabling style sheets in a Web browser:

    Internet Explorer®:

    Firefox®:

 

Dojo examples

  1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.

    To comply with this technique, you must implement the following example.

    Dojo example 1

    You can use the Dojo BorderContainer widget to layout a page in sections. It contains child content panes that have a region attribute. Use the region attribute to set left, right, bottom, top or center. Content panes that have left, right, top or bottom attributes are laid out around the edges of the BorderContainer widget. A content pane with a center attribute appears in the remaining space in the middle.

    Content panes should be laid out in source code order. In the following example, the three div attributes are laid out top, left, and center. If the div defined as top is moved in the source code to below the div marked center, Dojo renders the content panes in the correct visual order. However, a screen reader announces the content of each div in source code order, which in this case is incorrect. For example, if the div defined as top is moved below the div defined as left and center in the source code, the screen reader announces the content of the div defined as left first followed by the content in the div defined as center and finally the content in the div defined as top. In the source code, content panes must be ordered so that a screen reader will encounter them.

    <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">
    <div dojoType="dijit.layout.ContentPane" layoutAlign="top">
    Top content
    </div>
    <div dojoType="dijit.layout.ContentPane" layoutAlign="left“ style="width: 120px;">
    Left content
    </div>
    <div dojoType="dijit.layout.ContentPane" layoutAlign="center">
    Center content fills remaining area
    </div>
    </div>

    Required unit tests for Dojo development technique 1

    Perform the following unit test.

  2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.

    There are no examples of implementing this technique in Dojo. Use the HTML examples as a guide.

  3. DOM and Visual Order: Make the DOM order match the visual order.

    There are no examples of implementing this technique in Dojo. Use the script examples as a guide.

  4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.

    There are no examples of implementing this technique in Dojo. Use the CSS examples as a guide.

  5. Position content: Position content based on structural markup.

    There are no examples of implementing this technique in Dojo. Use the CSS examples as a guide.

 

Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application. Refer to WCAG 2.0 Additional Techniques (Advisory) for Success Criterion 1.3.2 (link resides outside of ibm.com).


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.