WCAG 1.3.2 Meaningful Sequence

Success criterion 1.3.2 makes sure that when a screen reader reads a page from top to bottom, or a page is shown without its styles, the content still comes in an order that makes sense. It is level A and part of EN 301 549 (clause 9.1.3.2).

What the criterion requires

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined — in practice, the order of elements in the HTML (the DOM order) must give that meaning.

Two things are worth knowing:

• the criterion only applies where order matters. Navigation, main content and a sidebar can come in any order; the content inside an article, a form or a price block must stay in order;
• at least one meaningful sequence is enough. It does not have to be the only possible one.

Typical failures on an online shop

• CSS order, flex-direction: row-reverse or grid placement puts the price before the product name visually, but the code reads it differently;
• a "was / now" price block where the code reads the new price as "was";
• size guide or comparison laid out in columns with spaces or divs, which reads row-wise into nonsense;
• a layout table that does not make sense when its cells are read one after the other;
• a cookie banner or popup inserted at the end of the code but shown at the top, so its context is read last.

How to check it

Automated: no automated rule in our checker maps to this criterion. A tool can see the DOM order, but not whether the meaning changes. This needs a manual check.

By hand: turn off CSS (for example with a browser extension or the reader view) and read the page from top to bottom: does each block still make sense? Or listen to it with a screen reader in reading mode. Pay special attention to prices, product details, forms and multi-column layouts.

How to fix it

• Write the HTML in the order you want it read, and use CSS only for layout, not to change meaning.
• Avoid CSS reordering for content whose order matters; if you need a different order on mobile, change the markup.
• Use real tables for tabular data rather than spaces or positioned blocks.
• Insert dialogs and banners in the DOM where they belong logically, and move focus to modal dialogs.

Related criteria

• 1.3.1 Info and Relationships — structure marked up in code.
• 1.3.3 Sensory Characteristics — instructions that rely on position.
• WCAG 2.2 checklist — including 2.4.3 Focus Order.

Frequently asked questions

Does the code order have to match the visual order?

Only where the order affects meaning. Independent blocks such as navigation and main content can come in any order; the steps of a recipe, a price and its label or a product title and its details must stay in a sequence that makes sense.

Is CSS flex or grid reordering a failure?

Not automatically. It becomes a failure when the reordered visual sequence carries meaning that the code order does not, for example when the "old price" and "new price" swap places.

Is 1.3.2 the same as focus order?

No. 1.3.2 is about the reading order of content. The order in which keyboard focus moves is covered by 2.4.3 Focus Order, although both are usually fixed the same way.