When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
On this page:
Rationale
This purpose of this checkpoint is to ensure that content sequence can be programmatically determined. 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. When you listen to the page with a screen reader or when you view the content of the 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. The order of text, tables and ordered lists is important. When layout tables are used to visually organize information on a Web page, the sequence of information must still be meaningful.
Required development techniques
Compliance with this checkpoint requires all of the following techniques be met. These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 1.3.2 (link resides outside of ibm.com).
- Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
- Mark and order Content: Mark sequences in the content as meaningful AND order the content in a meaningful sequence.
- DOM and Visual Order: Make the DOM order match the visual order.
- CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
- Position content: Position content based on structural markup.
Examples for General developers
1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
To comply with this technique, all of the following examples must be implemented.
Example 1
Order the content in a meaningful sequence for all the content in the Web page.
For additional information, refer to WCAG 2.0 examples (link resides outside of ibm.com) for ordering the content in a meaningful sequence (link resides outside of ibm.com).
2. Mark and order content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.
There are no specific techniques for General developers.
3. DOM and visual order: Make the DOM order match the visual order.
There are no specific techniques for General developers.
4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
There are no specific techniques for General developers.
5. Position content: Position content based on structural markup.
There are no specific techniques for General developers.
Examples for HTML developers
For techniques that have no technology-specific examples, refer to the General section for guidance.
1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
There are no specific examples for HTML developers.
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, all of the following examples must be implemented.
Example 2
Use a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline.
For additional information, refer to WCAG 2.0 examples for using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline (link resides outside of ibm.com).
Example 3
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 WCAG 2.0 examples for using the dir attribute on an inline element to resolve problems with nested directional runs (link resides outside of ibm.com).
3. DOM and Visual Order: Make the DOM order match the visual order.
There are no specific techniques for HTML developers.
4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
There are no specific techniques for HTML developers.
5. Position content: Position content based on structural markup.
There are no specific techniques for HTML developers.
Examples for Script developers
For techniques that have no technology-specific examples, refer to the General section for guidance.
1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
There are no specific techniques for Script developers.
2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.
There are no specific techniques for Script developers.
3. DOM and Visual Order: Make the DOM order match the visual order.
To comply with this technique, all of the following examples must be implemented.
Example 4
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 is used to order Web content so that it does not visually match the source code order, assistive technologies will not read the content in the same order as a sighted user. Therefore, the order of content in the source code must match the visual presentation of the content.
For additional information, refer to WCAG 2.0 examples for making the DOM order match the visual order (link resides outside of ibm.com).
4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
There are no specific techniques for Script developers.
5. Position content: Position content based on structural markup.
There are no specific techniques for Script developers.
Examples for CSS developers
For techniques that have no technology-specific examples, refer to the General and HTML sections for guidance.
1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
There are no specific techniques for CSS developers.
For additional information, refer to WCAG 2.0 examples (link resides outside of ibm.com) for ordering the content in a meaningful sequence (link resides outside of ibm.com).
2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.
There are no specific techniques for CSS developers.
3. DOM and Visual Order: Make the DOM order match the visual order.
There are no specific techniques for CSS developers.
4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
To comply with this technique, all of the following examples must be implemented.
Example 5
Use CSS letter-spacing to control spacing within a word.
Adjusting the space between letters is a common practice to create specific visual effects. Using spaces to create more space between letters may cause assistive technology to incorrectly interpret content. For example, "F L O R I D A" will be read letter by letter with most screen readers. 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 WCAG 2.0 examples for using CSS letter-spacing to control spacing within a word (link resides outside of ibm.com).
5. Position content: Position content based on structural markup.
To comply with this technique, all of the following examples must be implemented.
Example 6
Position content based on structural markup.
For additional information, refer to WCAG 2.0 examples for positioning content based on structural markup (link resides outside of ibm.com).
Examples for Dojo developers
For techniques that have no technology-specific examples, refer to the General and HTML sections for guidance.
1. Meaningful sequence: Order the content in a meaningful sequence for all the content in the Web page.
To comply with this technique, all of the following examples must be implemented.
Example 7
The Dojo BorderContainer widget provides a way to layout a page in sections. It contains child content panes that have a region attribute. The region attribute can be set to left, right, bottom, top or center. Content panes that have left, right, top or bottom attributes are laid out around the edges of the border container widget. The content pane with a center attribute takes up the remaining space in the middle.
Content panes should be laid out in source code order. In the following example, the three div elements are laid out top, left, and client. If the div marked "top" is moved in the source code to below the div marked "center", Dojo will still render the content panes in the correct visual order. However, a screen reader will speak the content of the divs in source code order which, in this case is incorrect. For example, if the top div was moved below the left and center divs in the source code, the content of the left div would be spoken first followed by the content of the center div and finally the content of the top div. Content panes must be ordered in the source code in the order they should be encountered by a screen reader.
<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="client">
Client content fills remaining area
</div>
</div>2. Mark and order Content: Mark sequences in the content as meaningful and order the content in a meaningful sequence.
There are no specific techniques for Dojo.
3. DOM and Visual Order: Make the DOM order match the visual order.
There are no specific techniques for Dojo.
4. CSS letter spacing: Use CSS letter-spacing to control spacing within a word.
There are no specific techniques for Dojo.
5. Position content: Position content based on structural markup.
There are no specific techniques for Dojo.
Recommended development techniques
The techniques above are required; the following techniques are recommended to enhance accessibility:
See WCAG 2.0 Additional Techniques (Advisory) for 1.3.2 for a list of techniques and examples (link resides outside of ibm.com).
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
- Screen reader
- A tool that removes the CSS from a Webpage (such as, Kill Styles Sheets if testing with Miscrosoft Internet Explorer™)
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result |
|---|---|
|
Verify the following compliance criteria are true, as per instructions below.
|
Pass:
Fail:
|
| Additional instructions for the above testing techniques: | |
How to turn off stylesheet support in your Web browser
|
|
| Action | Result |
|---|---|
|
Verify the following compliance criteria with a screen reader.
|
Pass: All applicable compliance criteria in the action column to the left are verified to be true. Fail: Any failure from applicable compliance criteria in the action column to the left. |
©2009 IBM Corporation
Last updated November 01, 2009.
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.