Agent WranglersAccessibility Required
Explain form errors next to the field
Show form errors as text next to the field, tie them to it with aria-describedby, and say how to fix them. These are WCAG criteria 3.3.1 (A) and 3.3.3 (AA).
How to do it
Check the form on submit and put each message in text next to its field. Link it with aria-describedby and set aria-invalid="true". Move focus to the first invalid field or to an error summary at the top.
Example
<label for="email">Email</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address, like name@example.com.</p>How to check
A browser test submits each form empty. Every invalid field has aria-invalid="true" and an aria-describedby pointing at visible, non-empty text. Focus is on the first error or the summary.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/form-errors.