Form Error Accessibility
Error messages must be programmatically associated with their fields using aria-describedby and announced live with aria-live.
HTML
Intermediate
4 min read
Accessible Form Error Messages
Example
<form novalidate>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email"
aria-describedby="email-error" aria-invalid="true">
<p id="email-error" role="alert">
Please enter a valid email address.
</p>
</div>
</form>
<script>
// Set aria-invalid dynamically after validation
input.setAttribute("aria-invalid", isValid ? "false" : "true");
errorEl.textContent = isValid ? "" : "Please enter a valid email.";
</script> Pro Tip
role="alert" is equivalent to aria-live="assertive" — the error is announced immediately.