1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
This success criterion requires that content presented on the page must be meaningful during navigation to all users. Users navigate content from left to right & assistive technology users such as screen reader users depend on the accessibility tree & DOM structure to let them know how the content is presented on the page. It is a best practice to match the DOM order & visual order. Writing clean HTML & then managing the design with CSS is the best way to preserve the meaning of content which is logical & intuitive.
Example That Fails This SC
Please use a screen reader to understand this example.
List of fruits
List of sports
In the above example, “List of fruits” is visually followed by its related content & “List of sports” is followed by its content. But in reality this is not the case, if you observe the DOM “List of Fruits” is followed by content of “List of sports” & vice versa. Using CSS the reading order is changed visually but for an assistive technology user this content will be confusing & is not logical/intuitive. As a result the above content fails this checkpoint.
Points to Remember
- Make sure that content presented on the page is logical & intuitive.
- Write HTML first & then manage design with CSS.
- Make sure visual order matches the DOM order.
- Use headings, lists, paragraphs etc to mark your content.
- Make sure your users can differentiate the navigation menus from main content.
The best way to check this success criterion is to invest in a screen reader like NVDA or by checking if content is making sense by disabling the style sheets.