• Success Criterion 2.4.3
  • Conformance level A

Visual Layout Order That Doesn’t Match the Keyboard Tab Order

2.4.3 — Focus Order

Scenario

Setting

A nonprofit's donation form

What’s wrong

Visual layout (CSS order/grid) diverges from page code (DOM) so Tab jumps around the page illogically.

Example 

.donation-form { display: flex; }
.amount-field { order: 2; }
.donor-name-field { order: 1; }
.payment-field { order: 3; }

<!-- DOM order is amount, name, payment, but CSS order visually shows name first -->

Why it matters

A sighted keyboard user watches focus jump to the amount field before the name field they see listed first, filling fields out of sequence.

How to test

Compare visual layout order to DOM order (View Source or DevTools): if CSS order/grid-placement reorders content visually without matching DOM order, Tab jumps around illogically.

How to fix

CSS order only changes paint order, not tab order; keep DOM order aligned with the intended reading order.

<div class="donor-name-field">...</div>
<div class="amount-field">...</div>
<div class="payment-field">...</div>

Outcome

A donor tabs through name, amount, then payment in the exact order they see on screen.

Who is affected

Sighted keyboard users experience a mismatch between what they see on screen and where focus actually lands.

Learn more

Related scenarios