Good form validation should not only detect incorrect input. It should make it **easy for every user to understand what went wrong and how to fix it**. Accessibility should therefore be part of form architecture rather than added after the form is finished. ### Always Associate Labels with Inputs Prefer: ```jsx Email address ``` over relying only on: ```jsx ``` A placeholder is not a replacement for a proper label. ### Connect Errors to Their Fields Suppose the server returns: ```javascript { errors: { email: ['Enter a valid email address.'] } } ``` Render the input with an accessible relationship: ```jsx Email {state.errors?.email && (

{state.errors.email[0]}

)} ``` ### aria-invalid This communicates that the current value failed validation: ```jsx aria-invalid={true} ``` ### aria-describedby This connects the field to explanatory content such as: ```text Email must be a valid address. ``` so assistive technology can understand the relationship. ### Announce General Form Messages For submission-level feedback, an `aria-live` region can help: ```jsx

{state.message}

``` This can announce updates such as: ```text Profile saved successfully. ``` or: ```text Please correct the errors below. ``` without requiring the user to find the changed text manually. ### Do Not Rely Only on Color This is weak: ```text Invalid field → red border only ``` Users with visual impairments or color-vision differences may not understand the meaning. Also provide text: ```text Password must contain at least 8 characters. ``` ### Error Messages Should Explain the Fix Weak message: ```text Invalid input ``` Better message: ```text Username must contain 3 to 20 letters, numbers, hyphens, or underscores. ``` ### Preserve User Input Accessibility also includes reducing unnecessary effort. When validation fails, preserve valid fields whenever possible instead of forcing users to re-enter the entire form. ### Interview-Ready Answer Accessible [Next.js](/courses/nextjs) forms should use real labels, connect validation errors to their inputs with attributes such as `aria-describedby` and `aria-invalid`, announce important form-level changes when appropriate, avoid relying only on color, and provide specific error messages that explain how the user can correct the problem.