WCAG 1.3.2 Meaningful Sequence (level A) explained

What it asks for, in plain English

Screen readers, reader modes and keyboard users work through the page in the order it appears in the code, not the order it appears on screen. If the two orders differ, the reading experience can become nonsense: a price before the product it belongs to, a caption before its image, step three before step one.

This only applies where the order carries meaning. A sidebar of related links can sit anywhere in the code. A set of instructions cannot.

The usual culprits are CSS flexbox and grid reordering, absolute positioning, floated elements, and multi-column layouts built from separately positioned blocks. Tables used for layout can also scramble the order.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.3.2 page has the full intent, techniques and definitions.

Who it affects

Someone using a screen reader hears the delivery cost before the item and the 'Buy' button before the price, and cannot tell which belongs to which.

A person who has zoomed to 400 percent sees the page collapse into a single column in code order, which now puts the footer above the main content.

Someone using reader mode on a phone reads the recipe method before the ingredients because the two columns were swapped with CSS.

Example

Broken

<style>.product{display:flex}.price{order:-1}</style>
<div class="product">
  <h2>Enamel mug</h2>
  <p>Dishwasher safe, 350 ml.</p>
  <p class="price">12.00</p>
</div>
<div class="product">
  <h2>Travel flask</h2>
  <p>Keeps drinks hot for six hours.</p>
  <p class="price">24.00</p>
</div>

On screen the price is first. In the code it is last, so a screen reader reads 'Enamel mug, dishwasher safe, 12.00, Travel flask', and the price seems to belong to the mug on screen but sounds unattached.

Fixed

<style>.product{display:flex}</style>
<div class="product">
  <p class="price">12.00</p>
  <h2>Enamel mug</h2>
  <p>Dishwasher safe, 350 ml.</p>
</div>
<div class="product">
  <p class="price">24.00</p>
  <h2>Travel flask</h2>
  <p>Keeps drinks hot for six hours.</p>
</div>

Put the elements in the code in the order you want them read and let the layout follow. Here the price comes first both on screen and in the code.

How to check it

Switch CSS off (most browsers have a 'no style' view, or use a bookmarklet) and read the page top to bottom. It should still make sense.
Tab through the page. Focus should move in the order you would expect from the visual layout.
Zoom to 400 percent so the layout drops to one column, and check the order of the column.
Look for CSS that uses order, flex-direction: row-reverse, column-reverse or absolute positioning on content that has a sequence.

What Websight checks for 1.3.2

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Only a person can check this. A scanner can see the code order but has no idea what order would make sense to a reader. Websight lists it in its manual checklist.

Practical tips

Write the HTML in reading order first, then make it look right with CSS. Not the other way round.
Treat the CSS order property as a last resort and never use it on steps, prices or anything numbered.
If a design needs a different order on mobile and desktop, reconsider the design before reaching for reordering.

1.3.1 Info and Relationships (level A)
1.3.3 Sensory Characteristics (level A)
1.3.4 Orientation (level AA)
1.3.5 Identify Input Purpose (level AA)