An accessible [React](/courses/reactjs) form should clearly communicate what each field is for, whether it is required, what went wrong, and how keyboard and assistive-technology users can complete it. ### Always Provide a Label Good: ```jsx Email address ``` In [JSX](/courses/reactjs), the [HTML](/courses/html) `for` attribute becomes: ```text htmlFor ``` Clicking the label can also focus the associated input. ### Placeholder Is Not a Replacement for a Label Avoid relying only on: ```jsx ``` Placeholder text disappears when users type and should not be the only accessible name for the field. Prefer a visible label. ### Group Related Controls For related options, semantic [HTML](/courses/html) can communicate their relationship: ```jsx

Preferred contact method Email Phone

``` ### Communicate Errors Clearly Suppose email validation fails. ```jsx Email {error && (

Enter a valid email address.

)} ``` Now the field communicates both: ```text It is invalid Which message describes the problem ``` ### Do Not Rely on Color Alone Avoid showing only a red border: ```text red border = error ``` because some users may not perceive the color difference. Also provide text: ```text Password must contain at least 8 characters. ``` ### Required Fields Native HTML can help: ```jsx ``` The visible UI should also make required expectations understandable when necessary. ### Keep Error Messages Specific Weak: ```text Invalid input ``` Better: ```text Password must be at least 8 characters. ``` Specific errors help all users recover faster. ### Focus the First Invalid Field When Useful For long forms, after submission you may move focus to the first invalid control or an error summary. For example: ```jsx emailRef.current?.focus(); ``` This should be done intentionally rather than moving focus unexpectedly during normal typing. ### Use Appropriate Input Types Instead of using `type="text"` for everything, choose meaningful types: ```text email password number tel url date ``` where appropriate. Browsers and mobile devices can provide better input behavior as a result. ### Preserve Normal Form Semantics Prefer: ```jsx ``` instead of attaching all form behavior to unrelated clickable elements. This preserves expected keyboard submission behavior. ### Accessible Form Checklist ```text Every field has an accessible name Labels are associated correctly Related controls are grouped Errors contain useful text aria-invalid reflects actual state Errors can be associated with fields Color is not the only signal Keyboard submission works Focus behavior is predictable ``` ### Interview-Ready Answer Accessible React forms use properly associated labels, semantic form elements, meaningful input types, clear validation messages, and keyboard-friendly submission. Error state should be communicated with text and, when helpful, ARIA attributes such as `aria-invalid` and `aria-describedby`. Placeholders and color alone should not be used as substitutes for labels or error explanations.