Success Criterion 1.3.2
Conformance level A

CSS Reordering That Makes Code Order Differ From Visual Order

1.3.2 — Meaningful Sequence

Scenario

Setting

A job board's application form

What’s wrong

CSS order, flex-direction: *-reverse, or grid placement re-arranging content so page code (DOM) order tells a different story.

Example

.step-2 { order: 1; } .step-1 { order: 2; } /* visual order ≠ DOM order */

Why it matters

Screen-reader and keyboard users who encounter content in DOM order.

How to test

Disable CSS entirely and compare the DOM order to what you expect: CSS order, flex-direction reverse, or grid placement that reorders content visually but not in the DOM fails.

How to fix

The screen reader must read content in an order matching the visual/logical order, item by item — nothing skipped, merged, fragmented, or added.

<!-- DOM order matches the order the CSS makes visible: step-1, then step-2 -->

When CSS reorders content visually, the underlying DOM order must still match, or the reading order breaks.

Outcome

On a job board's application form, this barrier is gone for screen-reader and keyboard users who encounter content in DOM order — they no longer have to work around this.

Who is affected