1.3.2: Meaningful Sequence

What it means

When the sequence of content affects meaning, the order in the code must match a logical reading order. Screen readers and keyboard users follow the DOM order, not necessarily the visual layout.

Multi-column layouts and CSS reordering can confuse people if the code order is wrong.

How to fix it

• Check reading order with a screen reader or linearised view.
• Avoid CSS that visually reorders content in a way that breaks meaning (for example flex order).
• Place the main message before sidebars in the HTML when it should be read first.
• Test narrow-screen reflow to confirm sentences still make sense top to bottom.

Quick examples

• Good: Article text comes before the related-links sidebar in the HTML.
• Bad: A two-column form reads “Postcode” before “Street address” because columns are reordered visually.
• Good: Step numbers in a checkout flow follow 1, 2, 3 in both sight and screen reader order.
• Bad: Keyboard focus jumps from the footer back to the middle of the article due to tabindex hacks.