Understanding SC 1.3.2 Meaningful Sequence
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 Ponder
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.
Why do you say that the “Screen reader is suppose to read fruits heading first & then content related to fruits, then proceed to vegetables heading & content of vegetables.”?
That is NOT the desired experience of a screen reader reading a data table. The point of having a data table, which this is BECAUSE there are column headings, is to be able to navigate using the screen reader by row and/or by column, same as a sighted users scans across the rows and columns. Reading all the column heading of the first row is perfectly correct.
The example and code semantics is confusing when pared with the discussion and the points that its trying to demonstrate. The code example mixes Headings , column headings , row data cells , and list items. If the user experience that is INTENDED or DESIRED is to read the Heading Fruits first only followed by the list of Fruits and then followed by the next Heading Vegetables followed by the list of veggies, then table mark-up whether role=presentation or otherwise should NOT be used at all, but the two column layout should be coded by CSS, not .
This example is missing the mark-up that matches the INTENDED or DESIRED experience, and does a poor job, in my opinion, of explaining why the bad example mark-up will not give the desired experience. It also needs to be clearly explained what screen reader users expect when table layout presentation and data table mark-up is used. In other words, its mixing metaphors and provides no “good example” of code paired with the desired experience.
Thanks for pointing the pitfalls of our example. We changed the example & provided a more suitable example with explanation. Hope this is helpful.
“In the above example, “List of fruits” is visually followed by its related content & “List of sports” is followed by its content.”
It is not.
I think the CSS is broken. We will fix it.
In the above example, Screen Reader reads List of Fruits and then content mention just below it in the list i.e. cricket, hockey, and chess, and then out of the list. Further, it reads List of sports and content below that in the list.
And Visually also it looks the same. So I got a little confused. Could you please elaborate on it exactly what you want to say?
The CSS seems to be broken. Will fix it soon. Thanks for pointing it out.