1.3.2 Meaningful Sequence

Level A · added in WCAG 2.0

When the order of content affects its meaning, the code must give the correct reading order. Screen readers and other tools follow the DOM order, not the visual layout.

Who it helps

Screen reader users hear content in DOM order, so a mismatch can scramble instructions or data. People who use reader modes, custom style sheets or text-to-speech tools are affected the same way.

How to meet it

Write the HTML in the order people should read it, then use CSS for the layout.
Take care with CSS order, flex-direction: row-reverse, grid placement and absolute positioning when they change what comes first.
Use CSS letter-spacing, padding or margins for spacing, not spaces between letters or rows of  .
Build columns and tables with HTML and CSS, not with spaces in plain text.
Check the order by turning off CSS or by reading the page with a screen reader.
Know the limit: order that doesn't change meaning, such as a sidebar placed before or after the main content, is fine.

Examples

Fails:CSS order fixes the steps visually, but the DOM has them backwards

<div style="display: flex; flex-direction: column;">
  <p style="order: 2">Enter the code we texted you.</p>
  <p style="order: 1">Enter your phone number.</p>
</div>

Fails:Spaces between letters, so screen readers read single letters

<h1>W E L C O M E</h1>

Passes:The DOM order matches the order of the steps

<div style="display: flex; flex-direction: column;">
  <p>Enter your phone number.</p>
  <p>Enter the code we texted you.</p>
</div>

Passes:The same look with CSS letter-spacing on a real word

<h1 style="letter-spacing: 0.5em; text-transform: uppercase;">
  Welcome
</h1>

Can a scanner detect this?

axe-core has no rule for reading order, because only a person can judge whether a different order changes the meaning. Compare the visual order with the DOM order, for example by turning off CSS or using a screen reader.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Using flex-direction: row-reverse or CSS order on content that must be read in sequence.
Spacing out the letters of a heading with spaces, so it is read letter by letter.
Using a layout table whose cells read in a different order than the visual columns.
Moving a price or label with absolute positioning, so it is read next to unrelated content.

Official W3C explanation of 1.3.2

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026