Definition for WCAG 2.0 success criterion 1.3.2
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
The intent of this Success Criterion is to enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning. It is important that it be possible to programmatically determine at least one sequence of the content that makes sense. Content that does not meet this Success Criterion may confuse or disorient users when assistive technology reads the content in the wrong order, or when alternate style sheets or other formatting changes are applied.
A sequence is meaningful if the order of content in the sequence cannot be changed without affecting its meaning. For example, if a page contains two independent articles, the relative order of the articles may not affect their meaning, as long as they are not interleaved. In such a situation, the articles themselves may have meaningful sequence, but the container that contains the articles may not have a meaningful sequence.
Generally, content is read in "source order" - the order in which it appears in the markup. Problems of meaningful sequence happen most commonly when a page uses certain techniques to create a visual layout, without consideration for the actual source order:
- Layout tables
- Table cells are read / linearized left to right, top to bottom. Depending on the underlying structure of the table and how it is used, this can lead to layouts that visually appear correct (for instance, what appears to be a simple two column layout, with an article or similar in each column) but are in fact read by assistive technologies in an incorrect order (for instance, if the apparent two-column layout is actually divided into multiple rows, in which case content from the first and second article will be read in an alternating fashion, as assistive technologies first read one column, then the other, for each row)
- CSS floating/positioning
- With CSS it is possible to visually lay out pieces of content anywhere within a page. However, this does not change the source order. Visually, a page may look correctly structured, and all content presented in a meaningful and sensible sequence, but the content's actual reading order may be incorrect.
Input into spreadsheet
- ❌ Fail
- Content order is incorrect when visual layout is removed, indicating the source order of the content is not appropriate.
- ✔ Pass
- Page content is logical and understandable even without visual layout (CSS or layout table), indicating that the reading order is correct and meaningful.
How to test
-
Use Miscellaneous > Linearize Page.
-
Use CSS > Disable CSS and CSS > Disable inline styles, linearize layout tables if present with Tables > Linearize.
The following screenshot shows a page after it has been linearized using the Web Developer Toolbar "Linearize Page" function.
Evaluate linearized page
- Ensure that the content as it is now presented (which matches the order in which content appears in the page's source) remains logical and understandable when read sequentially, top to bottom
- If the page contains dynamic elements such as modal dialogs, disclosure widgets, or functionality which displayed or generates content, trigger these and re-run the preceding step if necessary.
Note: as a result of disabling styles/linearizing, some content may overlap or otherwise be displayed in a way that makes it hard to discern. This is normal and does not indicate a failure of this criterion. Disabling the CSS and linearizing the table is done here purely to aid in visually assessing the source order of the content, not to test whether or not the page works and is still understandable without CSS, as was the case, for instance, when strictly assessing the old Section 508 1194.22 (d) ("Documents shall be organized so they are readable without requiring an associated style sheet.")
Input into spreadsheet
- ❌ Fail
- Content is read out in an illogical order which makes it difficult/impossible to understand (indicating the source order of the content is not appropriate).
- ✔ Pass
- The order in which page content is read out by the screen reader is logical and meaningful.
How to test
-
- Turn on JAWS or NVDA.
- Navigate the content of the page sequentially by using the ↑up and ↓down cursor keys, or use INSERT + ↓down arrow ("Say All" shortcut) to read the entirety of the page.
-
- Turn on VoiceOver by pressing command + F5
- Navigate the content of the page sequentially by pressing control + option + →right, or use control + option + A ("Say All" shortcut) to read the entirety of the page.