Error messages are not linked to their fields

Why does it matter?

An error message that sits under a field but is not connected to it is skipped when a screen reader user moves to that field. They hear the label and "invalid", but not what is wrong.

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"): after the empty submission, a field's error message is neither in the field's aria-describedby nor inside its label. For review, with the message quoted; fields with the same problem are grouped. Nothing is sent: a safety guard stops any email, form entry or order while the test runs.

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

How do I fix it in WordPress?

Give each error message an id and add it to the field's aria-describedby, so screen readers read the message when people move to the field. Many form plugins do this in their accessibility settings.

Example

<input id="email" aria-invalid="true">
<span class="error">Enter your email address.</span>

<input id="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" class="error">Enter your email address.</span>

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.