HIGHWCAG 2.4.3 A

Misleading Focus Order

Elements are positioned visually in one order but focus follows DOM order, causing confusing jumps.

Try It Yourself

Demo warning

Focus appears to skip or jump around the page, breaking user expectation.

Tab through the panel and watch the focus order jump against the visual layout.

Visual layout order

Actual focus order (DOM):

1. First name
2. Last name
3. Email address

Visual order is Last, First, Email. Focus does not match.

Manual Testing Protocol

Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.

1. Setup

Start focus before the form grid.
Observe the visual order of fields before tabbing.

2. Reproduction Steps

Tab through each field and watch focus jumps.
Compare focus order to visual layout order.
Attempt to complete the form sequentially.

3. Expected Failure Signals

Focus jumps out of the visible order.
Users skip fields unintentionally.
Completion is slower due to disorientation.

4. Fix Verification

DOM order matches the visual layout.
Tabbing moves through fields in a logical sequence.
Users can predict the next focus target consistently.

Evidence Capture Checklist

Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
Capture screen recording + keyboard path from first interaction to failure state.
Map failure to WCAG 2.4.3 (Level A) and affected user groups.
Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.

Share evidence with Accessibility.build

The Impact

What Happens

Users lose context as focus jumps unpredictably
Form completion slows due to disorientation
Errors increase when fields are missed

Who Gets Hurt

Keyboard users

Users relying on predictable sequences

Screen reader users

The Broken Code

<div class="grid">
  <input style="order:2" />
  <input style="order:1" />
  <button style="order:3">Submit</button>
</div>
<!-- DOM order does not match visual order -->

WCAG 2.4.3: Reference

"If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability."

Level A - Focus order must match the visual flow or users cannot build a stable mental model.