• Success Criterion 2.4.3
  • Conformance level A

Failed Form Submission Sending Focus to the Wrong Field

2.4.3 — Focus Order

Scenario

Setting

A calendar app's event-creation form

What’s wrong

After a failed form submission, focus jumps to the wrong place — the last error instead of the first, or somewhere unrelated, so keyboard users fix errors out of order or hunt for them.

Example 

function validateForm() {
  const errors = [];
  if (!title.value) errors.push(title);
  if (!date.value) errors.push(date);
  if (errors.length) {
    showErrorSummary(errors);
    guestsField.focus();
  }
}

Why it matters

The user is dropped into the Guests field, which has no error, while the actual problems in Title and Date go unnoticed.

How to test

Submit a form with multiple errors: check where focus lands — it should move to the first error (or an error summary), not the last error or somewhere unrelated.

How to fix

Always focus the first invalid field, or an error summary linking to it, never an arbitrary control.

function validateForm() {
  const errors = [];
  if (!title.value) errors.push(title);
  if (!date.value) errors.push(date);
  if (errors.length) {
    showErrorSummary(errors);
    errors[0].focus();
  }
}

Outcome

A user submits the form, and focus lands directly on the first field that needs correcting.

Who is affected

Keyboard and screen reader users must hunt through the whole form to find which fields actually failed validation.

Learn more

Related scenarios