When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
Description
Any user who comes to a webpage can quickly glance at it and understand the layout. They can skim through the page to find the required content. They can even relate the content by the appearance of the page.
For a screen reader user the mode of the page navigation is very different. The screen reader read the content element by element. The screen reader user do not understand the next element until screen reader navigates their and announces it. For people who have tunnel vision also face similar kind of difficulty.
Care should be taken that the screen reader reads the content in a meaningful and logical manner. Not only the sequence between Elements such as links, ordered list, headings but also the containers that hold these elements should be sequential. To say in simple words the DOM order should match the visual order forming a meaningful sequence.
Example
In the following example a layout table is used to describe three different topics in a column structure. Detail explanation follows the code example.
Code
<table>
<tr>
<td><h2>Concept 1 heading</h2></td>
<td><h2>Concept 2 Heading </h2></td>
<td><h2>Concept 3 Heading </h2></td>
</tr>
<tr>
<td><p>Detailed description for concept One</p></td>
<td><p>Detailed description for concept Two</p></td>
<td><p>Detailed description for concept Three</p></td>
</tr>
</table>
Check how the screen reader reads
Concept 1 heading |
Concept 2 Heading |
Concept 3 Heading |
|
Detailed description for concept One |
Detailed description for concept Two |
Detailed description for concept Three |
Explanation of the problem
In the above example screen reader reads the entire row that contains the headings and then start reading the content of concept one. In other words after reading the heading of concept 3 screen reader reads the concept one. For a sited user the content of concept one will be right below the heading of concept one and they can relate it very well.
Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If a layout table is used, however, it is important that the content make sense when linearized.