Focus does not move to the first error

Why does it matter?

On a long checkout, the first error may be far above the Place order button. If focus stays on the button, keyboard and screen reader users have to hunt back through the whole form to find what to fix.

Who it affects: Keyboard and screen reader users filling in forms, people with low vision who rely on clear hover and focus styles, people distracted or made unwell by motion, and anyone who finds their way around a site by its menus and help links.

What does Lumtera flag?

Found by Lumtera Pro's form tests (the Forms card of Lumtera → Checks → Page checks, "Test form"): the errors were announced, but keyboard focus stayed where it was instead of moving to the first field with an error or to an error summary. For review: WCAG does not require it on its own, but it is the most reliable way for keyboard users to find the errors. Nothing is sent: a safety guard stops any email, form entry or order while the test runs.

Check ID form-error-focus, as shown in review mode and saved results.

How do I fix it in WordPress?

After a submission with errors, move keyboard focus to an error summary with links to each field, or to the first field with an error. Many form plugins have a setting to "scroll to" or "focus" the first error.

Example

form.addEventListener( "submit", showErrors ); // focus stays on "Send"

<div id="error-summary" tabindex="-1" role="alert">…</div>
<!-- after showErrors(): document.getElementById( "error-summary" ).focus(); -->

How do I check the fix?

1. Run the page check again from Lumtera Pro's Page checks screen. The finding disappears once the page passes.
2. Submit the form with the required fields empty, using only the keyboard and then a screen reader: the errors should be announced, focus should move to them, and each message should say what to fix. Hover over and Tab to links and buttons to see that they stay readable, and compare the menus on a few pages.