Textarea
A text area lets users enter long-form, plain text over multiple lines and is commonly found in forms.
import { ... } from '@ag.ds-next/react/textarea';Learn more about how to meet WCAG success criteria when implementing textareas. This makes them accessible and inclusive for users of all abilities and situations.
Clear and descriptive labels
Requirements
- Labels clearly identify the purpose of the textarea.
- The purpose of the text input is understood and conveyed by assistive technology.
- Hint text is provided when it’s helpful.
Benefits
- Users of assistive technologies have equal access to labels and instructions.
- Helps all users avoid submitting an incomplete or incorrect form.
- Reduces the cognitive load for all users.
- Makes filling in forms easier for people with cognitive and learning disabilities.
- Improves understanding of available options.
- Clear labelling supports users with English as a second language.
WCAG references
- Understanding success criterion 1.3.5 Identify input purpose
- Understanding success criterion 3.3.2 Labels or instructions
Error identification
Requirements
- Input errors are detected and communicated to the user.
- Error messages are accessible to all users, including those with disabilities.
- Error messages clearly identify the error.
- Error messages provide sufficient information for users to locate and fix the problem.
- Error messages are understood and conveyed by assistive technology.
Benefits
- Assistive technology users have equal access to error messages.
- Reduces user frustration by clearly explaining what went wrong.
- Helps users with cognitive disabilities understand and fix problems.
- Saves time by preventing repeated unsuccessful attempts.
- Enables users to solve errors themselves without having to contact tech support.
WCAG references
- Understanding success criterion 3.3.1 Error identification
- Understanding success criterion 3.3.2 Labels or instructions
Error prevention
Requirements
- Hint text is provided when it’s helpful – for example, to communicate maximum character length for the textarea.
- Labels and hint text are clear and succinct.
- Users can check, reverse or confirm their input on forms with legal commitments, financial transactions or data modifications.
Benefits
- Clear guidance reduces anxiety about making mistakes.
- Helps users understand form requirements.
- Saves time by preventing the entry of incorrect information.
- Particularly valuable for users with cognitive or motor impairments.
- Provides safeguards against critical errors with significant consequences.
WCAG references
- Understanding success criterion 3.3.2 Labels or instructions
- Understanding success criterion 3.3.4 Error prevention (legal, financial, data)
Name, role, value
Requirements
- All form components have appropriate names, roles and values that are understood and conveyed by assistive technology.
- Clear label identifying the textarea.
- ARIA roles and states where needed – for example,
aria-invalid,aria-required.
Benefits
- Assistive technology users have equal access to information on the state of the component.
- Improves usability for voice control software users.
- Helps users with cognitive challenges understand component functionality.
- Makes automation and testing more reliable.