WCAG 2.1 AA • AODA compliant • Updated 2025-10-04
What is this component? A textarea (<textarea>) captures multi‑line text. It exposes native semantics, keyboard behavior, and value.
Where used? Comments, descriptions, messages, addresses—any long‑form user input.
| Requirement | WCAG Criteria | Description |
|---|---|---|
| Programmatic label | 1.3.1, 3.3.2 | Associate with <label for>/id or aria-labelledby. |
| Helpful instructions | 3.3.2 | Use aria-describedby for hints like character limits. |
| Error identification | 3.3.1, 3.3.3 | Show and announce errors; provide suggestions. |
| Keyboard | 2.1.1 | Reachable by Tab; Enter inserts newline; no traps. |
| Name, Role, Value | 4.1.2 | Exposes role “textbox (multiline)”, accessible name, and current value. |
| ARIA Role/Attribute | Used On | Purpose & Usage |
|---|---|---|
<textarea> | Native multiline | Preferred control with built‑in semantics. |
aria-describedby | Textarea with hints/errors | Associates guidance and validation messages. |
aria-invalid="true" | Invalid input | Set on validation failure. |
Max 500 characters. Be specific and concise.
aria-describedby.| Test Item | WCAG Criteria | Pass Criteria |
|---|---|---|
| Label/Hints announced | 1.3.1, 3.3.2 | Screen reader announces label and hint text. |
| Error handling | 3.3.1, 3.3.3 | Error is visible and announced; suggestions provided. |
| Keyboard operability | 2.1.1 | Reachable, editable; no traps. |