• Success Criterion 2.4.3
  • Conformance level A

Multi-Column Form With an Illogical Keyboard Tab Order

2.4.3 — Focus Order

Scenario

Setting

A childcare-booking service's scheduling page

What’s wrong

Multi-column forms tabbing across rows instead of down logical groups where order affects meaning (e.g., paired label/value entry).

Example 

<div class="grid">
  <input placeholder="Child 1 name">
  <input placeholder="Child 2 name">
  <input placeholder="Child 1 age">
  <input placeholder="Child 2 age">
</div>

Why it matters

A parent booking care for two kids tabs from Child 1 name straight to Child 2 name, then has to jump back to fill in ages.

How to test

Tab through a multi-column form: if the order jumps across columns/rows instead of following the logical fill sequence, it fails.

How to fix

Group related fields together in the DOM first, then use CSS grid purely for visual placement.

<fieldset>
  <legend>Child 1</legend>
  <input placeholder="Name">
  <input placeholder="Age">
</fieldset>
<fieldset>
  <legend>Child 2</legend>
  <input placeholder="Name">
  <input placeholder="Age">
</fieldset>

Outcome

A parent completes one child's full entry before moving to the next, with no need to cross-check afterward.

Who is affected

Keyboard users filling multi-child forms can mismatch names and ages when tab order crosses columns instead of following each child's group.

Learn more

Related scenarios