Validate forms accessibly

Inaccessible form validation leaves screen reader users unable to understand what went wrong and how to fix it, causing frustration and form abandonment.

Quick Reference

• Associate error messages with fields using aria-describedby
• Use aria-invalid to indicate validation state
• Mark required fields programmatically with required or aria-required
• Provide inline error messages near the field
• Don't rely solely on color to indicate errors
• Keep help text and error text linked to the field throughout validation

Check

Verify forms have client-side validation with accessible error messages linked to form fields via aria-describedby. Do not flag React forms just because they omit method or action when onSubmit clearly handles submission client-side. Confirm required fields are exposed programmatically and grouped controls use fieldset and legend.

Fix

Implement validation with clear error messages, aria-invalid states, and aria-describedby references to error text. For client-handled forms, improve validation semantics without forcing server-post patterns that the component is not using. Add required or aria-required where ap…