Form errors are not announced to screen readers

Why does it matter?

When a contact form or checkout rejects a submission, sighted visitors see red messages appear. A screen reader user hears nothing, and may wait for a reply that will never come, or give up on the order.

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: on the Forms card of Lumtera → Checks → Page checks, "Test form" submits a form with every field empty in a hidden frame and watches for three seconds. For review when errors appear but are not added to a live region that was already on the page, no role="alert" is shown, and focus does not move to them; or, when the page reloads with errors, focus does not move to them and the page title does not mention an error. Nothing is sent: fields are never filled in, spam traps and captchas are left alone, and a safety guard stops any email, form entry or order for about two minutes, only for you. Works with Contact Form 7, WPForms, Gravity Forms, the classic WooCommerce checkout, and plain HTML forms that post to the same page, admin-post.php or wp-comments-post.php, which are never allowed to leave the frame.

Check ID form-errors-not-announced, as shown in review mode and saved results.

How do I fix it in WordPress?

Put the error summary in an element with role="alert" (or aria-live="assertive") that is already on the page before the errors appear, or move keyboard focus to an error summary or to the first field with an error. Many form plugins have an accessibility setting for this; if yours does not, ask its developer.

Example

<!-- added only after the submit -->
<div class="form-errors">Please fix 2 fields.</div>

<!-- on the page from the start, filled in when errors appear -->
<div class="form-errors" role="alert">Please fix 2 fields.</div>

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.