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

<div class="name-row" style="display:flex; flex-direction: row-reverse;">
  <input type="text" placeholder="Last Name">
  <input type="text" placeholder="First Name">
</div>

Why it matters

A sighted keyboard user watches focus jump into the right-hand Last Name box first, then back to First Name on the left, making the form feel broken.

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

Reorder the actual markup instead of visually reversing it with flex-direction, so tab order always matches what is on screen.

<div class="name-row" style="display:flex;">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
</div>

Outcome

A keyboard user now tabs from First Name to Last Name in the same order they appear on screen.

Who is affected

Sighted keyboard users and screen magnifier users, whose expected left-to-right focus order no longer matches the on-screen layout.

Learn more

Understanding Understanding document (opens in a new tab)