WCAG 1.3.2: Meaningful Sequence
Back to all WCAG criteriaOVERVIEW
What's it about?
Content on websites can be arranged visually in many different ways. This can be done using CSS grids, flexboxes, or spacing. However, the order of the content must make sense not only visually but also when read by a screen reader.
The visual arrangement must not change the linear, logical order of elements in a way that makes them meaningless when read with a screen reader.
If the order of the elements is not important for understanding the content, then it is acceptable for the visual layout to differ from the linear order.
Examples of content whose meaning depends on their order:
-
numbered lists
-
tables
-
related headings and paragraphs
Examples of content whose meaning does not depend on the order:
-
unordered lists
-
product list views
How to
Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.
Ensure that all content is arranged in a meaningful order
When building a website, make sure that when styling with CSS or arranging elements, all content makes sense in a linear order.
Example: We are displaying a comparison of our mascots in a column format and showing this in a grid. If we simply placed the information in our grid side by side, the grid would not make sense when read from left to right.
It would read the name of each mascot, then each mascot’s image, and then the description. We would have created a column that visually makes sense from top to bottom, but in the code, it would be arranged so that it reads the individual elements of the column from left to right.
Therefore, we must structure our grid properly in the code so that it is read as we visually intend it.
It’s best to test your result with a screen reader.
Technique(s):
Accessible development?
Our workshop for developers!
Learn everything you need to know in our workshop to build accessible websites!
Learn accessibility with us?
Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.