Form error is not clearly identified

What’s wrong

The form shows an error state but does not clearly label which input has the error.

Why it matters

Screen reader users and people with cognitive disabilities need clear error targeting to recover. If the failing field is unclear, form completion becomes guesswork.

How to fix it

Use semantic HTML and valid ARIA so assistive technology gets the same state and structure as sighted users. Keep labels and states explicit in markup.

<input id="email" type="email" />
<p>Invalid value</p>

<label for="email">Email</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error" />
<p id="email-error">Enter a valid email address.</p>

If this pattern is generated by a component, fix it once in the shared component so every instance inherits the accessible behavior.

Learn more

• WCAG Understanding 3.3.1
• MDN: aria-invalid