Input

General

• Ensure sufficient colour contrast for all text elements
• All inputs must have associated labels
• Helper text should guide without being essential to understanding the field
• Error messages must be clear and actionable
• Keep labels concise and descriptive

Web

Semantic markup

• Use the <input> element with the appropriate type attribute
• Use <label> associated with the input via the for attribute
• Use <fieldset> and <legend> to group related inputs

Accessible labelling

All inputs must be properly labelled and associated:

• Label: Use <label for="input-id"> to associate the label with the input
• Helper text: Use aria-describedby="helper-id" to associate helper text with the input
• Error messages: Use aria-describedby="error-id" to associate error messages with the input
• Multiple associations: Stack IDs in aria-describedby for both helper text and errors: aria-describedby="helper-id error-id"

Error Handling

• Use aria-invalid="true" when the input contains an error
• Use role="alert" on error messages to announce them to screen readers
• Update aria-describedby to include the error message ID
• Provide clear, actionable error messages that explain how to fix the issue

Keyboard navigation

• Users should be able to Tab to the input field
• Standard text editing keyboard shortcuts should work
• Form submission should work with Enter key where appropriate

Required fields

• Use the required attribute for required fields
• Use aria-required="true" for enhanced screen reader support
• Clearly indicate required fields visually (e.g., with an asterisk and a legend explaining it)

React Native

• Use the Input component
• Provide accessibilityLabel That describes the field's purpose
• Use accessibilityHint for additional context if needed (similar to helper text)
• Use appropriate inputMode and keyboardType props for the expected data
• Use autoComplete to help users fill in common fields

Error states:

• Update accessibilityLabel or use accessibilityHint to include error information
• Ensure error messages are announced when they appear
• Use accessibilityLiveRegion="polite" on error text containers