Accessibility
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- Maintain accessible contrast across all states.
- Focus styles must meet WCAG AA contrast requirements and be clearly distinguishable from hover.
- Use semantic colour tokens (e.g.,
foreground/neutral/default) rather than fixed values to ensure the component adapts correctly to different themes or surfaces.
For Dev
Section titled “For Dev”To ensure the Field meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:
- Focus and Blur
- Inputs must display a visible focus style — not only a colour change.
- Activation gives keyboard control. Blur deactivates the input.
- No keyboard traps
- Users must always be able to Tab / Shift+Tab away from the input.
- Screen Reader Order
- Label → Status (if Disabled/Error) → Helper (if exists) → Activates field.
- Responsive Tap Targets
- Interactive area must be at least 44 px in height to support touch accessibility.
Do
Provide a clear, concise label above the input, include format hint examples in the helper text, and group related inputs logically (see the Form section component).
Don't
Don’t hide the label while the user is typing, don’t trigger Error states prematurely — wait for blur — and don’t rely on colour alone for Error or Positive states; always pair them with an icon or helper text.