Text Area
How the Text Area works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
The Text Area is a native <textarea> with the Input's label, hint and states. The browser supplies typing, selection and line breaks. The component adds a native length limit, a counter announced politely, and the resize glyph from the platform.
Keyboard#
Moves focus into the field. Tab does not indent; it always moves on.
Moves focus to the previous focusable element.
Adds a new line. It does not submit the form.
Semantics#
<textarea>Native role, multi-line, announced as an edit text with its label.
Always<label for>Gives the field its name, and a click on the label focuses it.
Alwaysmaxlength200 by default. Typing stops at the limit rather than failing later.
Alwaysaria-live="polite"The count is announced after a pause in typing. It is not linked to the field, so it is not read on focus.
Counteraria-invalid="true"Announced as invalid. The hint says what to fix.
erroraria-describedbyLinks the hint or error, so it is read after the name.
Alwaysreadonly / disabledRead Only stays focusable and its text can be selected; Disabled leaves the tab order.
Read Only, DisabledColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Text and label · Default, Hover, Focused, Read Only
The text and label in #2a2a2a pass on white, the 4% wash and the #f2f2f2 read-only fill.
WCAG 1.4.3 Contrast (Minimum) ↗Placeholder and counter · Empty, Always
Both are #8f8f8f, 3.23:1 on white. The counter is 10px uppercase, so the small size makes it harder still. Both fail.
WCAG 1.4.3 Contrast (Minimum) ↗Field boundary · Default, Hover
The 1px #e1e1e1 stroke, 1.31:1 on white. The focused (#070707) and error (#ec0d33) strokes pass.
WCAG 1.4.11 Non-text Contrast ↗Error · Error
The red stroke is backed by the hint's words and aria-invalid.
WCAG 1.4.1 Use of Color ↗WCAG 3.3.1 Error Identification ↗Focus indicator · Focus visible
A 2px ring in #1a6ef8 off a white gap, on keyboard focus only. It measures 4.54:1 on white, so it clears 3:1 on every light surface the library uses.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Disabled · Disabled
Inactive controls are exempt. The disabled text and glyphs (#cbcbcb) are deliberately faint.
WCAG 1.4.3 Contrast (Minimum) ↗Measured contrast#
Each part against the field's white fill, or the 4% hover wash over it, from the ds.css tokens; text, the counter included, is held to 4.5:1 and the stroke, a graphic, to 3:1. 11 of 20 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- The fill and stroke change over 150ms, and are turned off under prefers-reduced-motion.
- Resizing follows the pointer; nothing animates on its own.
Checklist#
Every text area has a visible label, and the limit is said before it is reached: in the hint, or by the counter.
The counter (#8f8f8f at 10px, 3.23:1) and the placeholder are under 4.5:1 and need a darker shade before the code library ships.
Announcing every keystroke's count is noisy. Consider announcing only near the limit (say, 20 left) and at it.
The resting stroke (#e1e1e1, 1.31:1) is under the 3:1 non-text minimum, as on the Input.
Resize is vertical only, so the field never pushes the layout sideways. The resize glyph is the browser's own handle; keyboard users get the full height by scrolling inside.