Error messages: associate via aria-describedby

Errors that screen readers can't find

<!-- ✗ BAD — visual only, screen readers don't know which input it belongs to -->
<label>Email <input type="email" /></label>
<p style="color:red">Email is required</p>

Sighted users see the red text next to the input. Screen-reader users hear "Email, edit text" — no error mention. They submit the form again, get the same silent failure, give up.

The fix: aria-describedby

<label for="email">Email</label>
<input id="email" type="email"
       aria-invalid="true"
       aria-describedby="email-err" />
<p id="email-err" style="color:red">Email is required</p>

Now screen readers say: "Email, edit text, invalid, Email is required." Three pieces of useful info instead of one.

aria-invalid

aria-invalid="true" tells assistive tech the field has an error. Pair with red styling and the user knows what to fix.

Best UX

• Don't show errors on every keystroke — only on blur (focus leaving the field) OR on submit.
• On submit, focus the FIRST invalid field automatically. Don't dump 5 errors on the user.
• Clear aria-invalid="true" and aria-describedby when the user corrects the input.