Understanding WCAG 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)
Meaningful Sequence Transcript
Hello everyone! Today, we’re going to talk about meaningful sequence and its purpose, importance, failure scenarios, and how we can fix them.Meaningful sequence is necessary because when non-visual users navigate a webpage using screen readers, which often read content divided into several columns, navigation bars, and sidebars, the order of reading must be programmatically determined. This ensures that users can understand the structure and content of the page without difficulties.
The importance of meaningful sequence lies in ensuring that screen readers can understand the content and its underlying flow, which is determined by the code underneath.
To fix issues with meaningful sequence, you can architect the DOM so that the visual order matches the DOM order. When appending dynamic content, ensure it is added as immediate nodes. Avoid relying solely on CSS to structure content, as changes to alternative stylesheets or turning off styles can disrupt the reading order. Additionally, use data tables with appropriate header relationships instead of CSS column breaks where applicable. Always ensure there is at least one reading order available, either left to right, top to bottom, or right to left, depending on the context.
For example, consider an information icon that opens a tooltip upon activation. If the tooltip is appended at the end of the DOM, screen reader users must scroll down the entire page to read the tooltip content, which can lead to confusion about whether they are reading the tooltip or footer content. It is crucial to ensure that the reading order of the tooltip is handled programmatically by appending it immediately after the information icon or through other appropriate methods.
This is the end of the video. Thank you for joining! If you liked the video, do like and subscribe.
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 Success Criterion
Please use a screen reader to understand this example.
List of fruits
- Cricket
- Hockey
- Chess
List of sports
- Apple
- Bananna
- Orange
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.
Hello Phill,
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.
Hi Raghvendra,
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?
Hi Vaibhav,
The CSS seems to be broken. Will fix it soon. Thanks for pointing it out.