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

.field-3 { order: 1; } .field-1 { order: 3; } /* tab order scrambled by CSS */

Why it matters

Keyboard and screen-reader users who follow focus rather than the pointer.

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

Keep DOM order aligned with visual order (or manage tabindex (keyboard-focus setting) deliberately) so Tab follows the layout.

<!-- Reorder the actual DOM nodes to match the intended focus sequence -->

Focus order should follow a sequence that preserves meaning, matching how the content is meant to be read.

Outcome

On a nonprofit's donation form, this barrier is gone for keyboard and screen-reader users who follow focus rather than the pointer — they can finish what they came here to do.

Who is affected