- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tab Order That Jumps Around the Page Illogically
- Dialog That Opens Far From the Button That Triggered It
- Visual Layout Order That Doesn’t Match the Keyboard Tab Order
- Modal That Opens Without Moving Keyboard Focus Into It
- Modal That Closes Without Returning Focus to Its Trigger
- Expanded Content That Never Receives Keyboard Focus