The <textarea> Element
As defined in the HTML Living Standard, the <textarea> element represents a multi-line plain text edit control for the element's raw value.
<label for="story">Tell us your story:</label>
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>
View HTML Living Standard: The textarea element
Accessibility Fundamentals
As with all form controls, the <textarea> relies on external elements and attributes to be accessible.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined...
You must associate the textarea with a <label> using the for and id attributes. This ensures the "Name" (the label text) is announced by screen readers when the user enters the control. Without this association, the textarea is an anonymous box to anyone using assistive technology.
Standard Attributes
rows&cols: Define the initial visual size of the textarea in characters. However, modern CSS is usually preferred for layout.maxlength: Limits the number of characters a user can enter. This provides native validation that is communicated to screen readers.required: A boolean attribute that informs both the browser and assistive technology that the field must contain text before submission.wrap: Controls how the text is submitted (softorhardbreaks).
<textarea id="bio" maxlength="200" required></textarea>
Best Practices
- Placeholder Warning: Do not use the
placeholderattribute as a replacement for a<label>. Sighted users may forget the field's purpose once they start typing, and screen readers do not always announce placeholders reliably. - Resizing: Users often find it helpful to resize textareas. If your CSS disables this (
resize: none), ensure the default size is large enough to accommodate typical entries. - Default Text: Any text placed between the opening and closing
<textarea>tags becomes the default value. Note that unlike standard inputs, spaces and line breaks inside the tags are preserved.
A11y Tip: Character Counters
If using maxlength, consider adding a visible character counter that uses aria-live="polite". This informs users with low vision or cognitive disabilities how much space they have remaining as they type.