Text input accessibility requirements
Adaptability
Helping people by honouring user preferences and by allowing adaptations to content presentation and time limits.
View test scenarios: Adaptability
| Standard | Description |
|---|---|
| 1.3.4 Orientation, Level AA |
Content is not restricted to a single orientation, unless it's essential |
| 1.4.4 Resize Text, Level AA |
Text can scale up to 200% without loss of content or functionality |
| 1.4.10 Reflow, Level AA |
Content reflows without horizontal scrolling when the viewport is 320px wide |
| 1.4.12 Text Spacing, Level AA |
No loss of content occurs when line, letter or word spacing is increased |
| 1.4.8 Visual Presentation, Level AAA |
Content adjusts as expected when people apply their preferences for text colour, width, alignment, spacing, and size |
| Recommendation | Content and information remain visible and understandable when using high contrast themes |
Animation and movement
Helping people to limit animation or reduce motion within content.
No component-specific requirements
Assistive technologies and semantics
Helping people who use a screen reader or other assistive tech by using appropriate code.
View test scenarios: Assistive technologies and semantics
| Standard | Description |
|---|---|
| 1.3.1 Info and Relationships, Level A |
If the text input has hint text, the text is included in the field's accessible name or accessible description |
| 1.3.1 Info and Relationships, Level A |
If the text input includes suffix or prefix, such as a currency symbol, this is included in the field's accessible name or accessible description |
| 1.3.1 Info and Relationships, Level A |
If the text input has an error message, the error message is included in its accessible name or accessible description |
| 1.3.1 Info and Relationships, Level A |
If the text input is visually marked as required, the required state is conveyed to screen readers |
| 1.3.1 Info and Relationships, Level A |
If the text input is visually marked as disabled, the disabled state is conveyed to screen readers |
| 1.3.2 Meaningful Sequence, Level A |
The order of content in the accessibility tree matches the logical reading order |
| 1.3.5 Identify Input Purpose, Level AA |
If the text input collects personal information about the person who is filling in the form and it maps to an autocomplete field described in Input Purposes for User Interface Components, the text input has the autocomplete attribute with the appropriate value |
| 2.5.3 Label in Name, Level A |
The text input's accessible name matches or includes the field's visible text label |
| 3.1.2 Language of Parts, Level AA |
If the text input component includes any text in a language other than the language of the page, the correct language is declared using the lang attribute |
| 4.1.2 Name, Role, Value, Level A |
The text input has an accessible name |
| 4.1.2 Name, Role, Value, Level A |
The text input has a role of textbox |
| 4.1.2 Name, Role, Value, Level A |
The text input's current value is conveyed to screen readers |
| Recommendation | The text input uses the native HTML <input> element, and its label the native HMTL <label> element |
| Recommendation | The text label is programmatically associated with the text input using the label’s for attribute and the input’s id attribute |
| Recommendation | If the text input has an error, the invalid state is conveyed to screen readers using the aria-invalid attribute |
| Recommendation | Markup can be parsed without errors |
Colour and contrast
Helping people who struggle with colour perception or low vision.
View test scenarios: Colour and contrast
| Standard | Description |
|---|---|
| 1.4.1 Use of Color, Level A |
Colour alone is not used to identify a text input in error |
| 1.4.3 Contrast (Minimum), Level AA |
All text content in the text input component has a contrast ratio of at least 4.5:1 against the background colours. This includes the label, value, instruction and error text, and applies to the default, focus, hover, and error states. Note: there are no contrast requirements for disabled fields |
| 1.4.11 Non-text Contrast, Level AA |
The text input's borders have a contrast ratio of at least 3:1 against the background colours |
| 1.4.11 Non-text Contrast, Level AA |
If the text input uses a custom focus indicator, this has a contrast ratio of 3:1 against the background colours |
| 1.4.6 Contrast (Enhanced), Level AAA |
All text content in the text input component has a contrast ratio of at least 7:1 against the background colours, except when disabled |
Consistency and predictability
Helping people by keeping functionality and content consistent and predictable.
View test scenarios: Consistency and predictability
| Standard | Description |
|---|---|
| 3.2.1 On Focus, Level A |
When the text input receives keyboard focus, it does not initiate a change of context |
| 3.2.2 On Input, Level A |
Entering a value in the text input does not result in a change of context |
| Recommendation | The text input's width is appropriate for the content to be entered |
| Recommendation | Disabled text inputs are avoided |
| Recommendation | The text label, hint, and error messages are positioned above and left-aligned to the text input to aid readability and reduce the need to scroll horizontally |
Images and media
Helping people to access (and remove distractions caused by) image, video and audio content.
View test scenarios: Images and media
| Standard | Description |
|---|---|
| 1.1.1 Non-text Content, Level A |
If an error message starting with an error icon is displayed, either the error message includes the word "Error" at the start or the icon has a text alternative. If the message does start with "Error", the icon is hidden from screen readers |
Input assistance
Helping people to complete forms, enter data and pass authentication.
View test scenarios: Input assistance
| Standard | Description |
|---|---|
| 3.3.1 Error Identification, Level A |
When there is an error, this is indicated in text and visually associated with the text input |
| 3.3.2 Labels or Instructions, Level A |
The text input's label, and hint text if provided, are persistent. The component does not rely on the use of placeholder text alone to act as the visible label or hint |
| 3.3.2 Labels or Instructions, Level A |
If there are requirements for the information the user is expected to enter, these are included in the label or as an additional hint |
| 3.3.2 Labels or Instructions, Level A |
There is a visible indication of whether the text input is required or optional |
| 3.3.3 Error Suggestion, Level AA |
Whenever possible, error messages include a suggestions for how to correct the error |
Keyboard
Helping people who use a keyboard.
| Standard | Description |
|---|---|
| 2.1.1 Keyboard, Level A |
The text input can be focused using the Tab key |
| 2.1.1 Keyboard, Level A |
A value can be entered using the keyboard |
| 2.1.2 No Keyboard Trap, Level A |
The text input does not trap focus |
| 2.4.7 Focus Visible, Level AA |
The text input has a visible focus indicator when it receives keyboard focus |
| 2.4.11 Focus Not Obscured (Minimum), Level AA |
The text input is not fully hidden by other content when it receives keyboard focus |
| 2.1.3 Keyboard (No Exception), Level AAA |
The text input component is accessible by keyboard, with no exceptions |
| 2.4.12 Focus Not Obscured (Enhanced), Level AAA |
The text input is fully visible when it receives keyboard focus |
| 2.4.13 Focus Appearance, Level AAA |
If the text input uses a custom focus style, this has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colours |
| Recommendation | A custom focus style is used instead of the browser’s default, which can be hard to see against some backgrounds |
Pointer and touch
Helping people use single pointer or touch interactions.
View test scenarios: Pointer and touch
| Standard | Description |
|---|---|
| 2.5.8 Target Size (Minimum), Level AA |
The text input has a target area size, or a target area size together with spacing, of at least 24 by 24 CSS pixels |
| 2.5.5 Target Size (Enhanced), Level AAA |
The text input has a target area size of at least 44 pixels by 44 CSS pixels |
Text comprehension (optional)
Helping people to read and understand text content.
View test scenarios: Text comprehension
| Standard | Description |
|---|---|
| Recommendation | An optional text input has the text "(optional)" in its label, so people can tell it apart from the required ones |
| Recommendation | An asterisk is not used to indicate that a text input is required. Fields are required unless they are marked as optional |