1.3.2 Meaningful Sequence

What does it mean?

Screen readers and keyboard users follow the order of the code, not the visual layout. If CSS moves things around, for example with flexbox order, grid placement or absolute positioning, the order a screen reader reads can differ from what sighted users see. Where the order matters for understanding, the code order must be correct.

Not every difference is a failure. It only matters where a different order changes the meaning, such as steps in instructions, a price separated from its product, or a label read after its field.

Who does it help?

• Blind people using a screen reader
• Keyboard users who move through the page in code order
• People using reader modes or text-to-speech tools

Common failures

• CSS order or grid placement that visually reverses steps, while the code keeps the old order
• A layout table whose cells read in a confusing sequence when linearised
• Using spaces or tabs to position text into columns
• A modal dialog placed at the end of the code, far from the button that opens it, without moving focus

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Does the reading order (DOM order, see list) make sense when the layout is removed?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<div class="steps" style="display:flex; flex-direction:row-reverse">
  <p>3. Pay</p><p>2. Check address</p><p>1. Choose product</p>
</div>

<ol class="steps">
  <li>Choose product</li>
  <li>Check address</li>
  <li>Pay</li>
</ol>

The code order now matches the visual order, so every user gets the steps in the right sequence.

Practical tips

• Test by turning off CSS or using a reader mode and checking that the page still reads sensibly.

Official source

Understanding WCAG 2.2 at the W3C: 1.3.2 Meaningful Sequence