Web forms are critical touchpoints for user interaction. Ensuring they are accessible to everyone, including those using assistive technologies like screen readers or keyboard navigation, is essential for a good user experience and compliance with WCAG standards.
1. Semantic Form Elements & Linking Labels
Never use plain <div> grids to mock input boxes. Always use semantic input fields wrapped inside associated <label> structures. Linking labels using the htmlFor React property allows screen readers to read the descriptive label name when users focus on the input:
// Accessible Form Field
<div className="flex flex-col gap-1">
<label htmlFor="email-input" className="text-xs font-bold text-text-primary">
Email Address <span className="text-red-500">*</span>
</label>
<input
id="email-input"
type="email"
required
aria-required="true"
placeholder="e.g. name@domain.com"
className="p-3 rounded-xl border border-border-strong bg-surface-hover text-sm text-text-primary outline-none focus:border-brand-primary"
/>
</div>
2. Advanced ARIA Properties for Error Management
When a form submission fails, screen readers need to be notified instantly. Use ARIA attributes to coordinate errors and accessibility descriptions:
aria-invalid="true": Programmatically marks the input field as containing errors.aria-describedby="error-message-id": Links the input field directly to an validation error box, ensuring the screen reader speaks the validation error message automatically on focus.aria-live="polite": Directs assistive technologies to speak dynamic updates (like visual counter limits or password strength warnings) without interrupting active screen read operations.
3. Focus Indicators & Color Contrast
Ensure that interactive elements have high color contrast (at least a 4.5:1 ratio for WCAG AA compliance) and clear, prominent focus indicators (like bright border rings). Keyboard users rely entirely on focus rings to see where their cursor is currently located. Never remove outline borders (outline: none) without styling distinct, high-contrast focus rings in your CSS layouts.