Accessibility

Accessibility

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

To ensure the Input Field meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Focus and Blur
   • Inputs must display a visible focus style — not only a colour change.
   • Activation gives keyboard control. Blur deactivates the input.
2. No keyboard traps
   • Users must always be able to Tab / Shift+Tab away from the input.
3. Screen Reader Order
   • Label → Status (if Disabled/Error) → Helper (if exists) → Activates field.
4. Responsive Tap Targets
   • Interactive area must be at least 44 px in height to support touch accessibility.

Usage

Do

Guidance on how to use a component.

• Provide a clear, concise label above the input.
• Provide format hint examples in the helper text.
• Group related inputs logically (reference the “Form section” component).

Don’t

Guidance on what to avoid when using a component.

• Don’t hide the label while the user is typing.
• Don’t use Error states prematurely — wait for blur.
• Don’t rely on colour alone for Error/Positive states — always include an icon or helper text.