HTML: aria-invalid

The aria-invalid attribute tells assistive technology that a form control’s current value does not pass validation.

Minimal example

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

The error message explains how to fix the value. The input keeps its visible label, while aria-describedby connects the supplementary error text.

Update it when validation changes

Set aria-invalid="true" after validation finds an error. Remove the attribute or set it to false when the value becomes valid. Keep the visual error style and accessible state synchronized.

Common mistakes

• Do not mark every untouched empty field as invalid before the user has a chance to fill it in.
• Do not rely only on a red border; provide text that explains the problem.
• Do not leave an invalid state after the value has been corrected.