Textarea 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 textarea 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 textarea has an error message, the error message is included in the field's accessible name or accessible description |
| 1.3.1 Info and Relationships, Level A |
If the textarea is visually marked as required, the required state is conveyed to screen readers |
| 1.3.1 Info and Relationships, Level A |
If the textarea 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 |
| 2.5.3 Label in Name, Level A |
The textarea's accessible name matches or includes the visible text label |
| 3.1.2 Language of Parts, Level AA |
If the textarea 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 textarea has an accessible name |
| 4.1.2 Name, Role, Value, Level A |
The textarea has a role of textbox, with the Multi-line property set to true in the accessibility API |
| 4.1.2 Name, Role, Value, Level A |
The textarea's current value is conveyed to screen readers |
| Recommendation | The textarea uses the native HTML <textarea> element, and its label the native HMTL <label> element |
| Recommendation | The text label is programmatically associated with the textarea using the label’s for attribute and the textarea’s id attribute |
| Recommendation | If the textarea 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 textarea in error |
| 1.4.3 Contrast (Minimum), Level AA |
All the text content in the textarea 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 textarea'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 textarea has a custom focus style, this has a contrast ratio of at least 3:1 against the background colours |
| 1.4.6 Contrast (Enhanced), Level AAA |
All the text content in the textarea 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 textarea receives keyboard focus, it does not initiate a change of context when focused |
| 3.2.2 On Input, Level A |
Entering a value in the textarea does not result in a change of context |
| Recommendation | The textarea's size is appropriate for the content to be entered |
| Recommendation | Disabled textareas are avoided |
| Recommendation | The text label, hint, and error messages are positioned above and left aligned to the textarea 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, it is indicated in text and visually associated with the textarea |
| 3.3.2 Labels or Instructions, Level A |
The textarea'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 textarea 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 textarea 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 textarea does not trap focus |
| 2.4.7 Focus Visible, Level AA |
The textarea has a visible focus indicator when it receives keyboard focus |
| 2.4.11 Focus Not Obscured (Minimum), Level AA |
The textarea is not fully hidden by other content when it receives keyboard focus |
| 2.1.3 Keyboard (No Exception), Level AAA |
The textarea component is accessible by keyboard, with no exceptions |
| 2.4.12 Focus Not Obscured (Enhanced), Level AAA |
The textarea is fully visible when it receives keyboard focus |
| 2.4.13 Focus Appearance, Level AAA |
If the textarea 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 textarea 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 textarea has a target area size of at least 44 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 textarea 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 textarea is required. Fields are required unless they are marked as optional |