Textarea

Label

• Avoid using generic single-word labels, like Notes or Details for textarea labels.
• The ambiguous nature of these labels can cause users to be confused about their meaning.
• Instead, always add a modifier to generic single-word labels, like Name or ID. For example:
• Meeting notes
• Absence details

Hint text

Use hint text only if the label does not provide enough context to help users interact with the input.

• Write hint text in full sentences with ending punctuation. This makes screen readers pause before reading out any error or warning message after the hint text.
• Do not use hint text that repeats the message in the label.
• Hint text should make it clear that the user can enter multi-line free text.

Placeholder text

You can use placeholder text if it does not provide critical information for users but instead provides a small amount of additional context.

• Make sure to provide enough context in the label and hint text so that users can easily interact with the input without the aid of the placeholder text.

Requirements

Users should be able to:

• Identify the input as a field for entering multiple lines of text.
• Understand the purpose of the input from its label.
• Edit the text within the field using assistive technology.

Interactions

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the textarea.
• Pressing ‘tab’ again moves focus to the next interactive element on the page.
• Enter. Adds new lines in the textarea.

Design considerations

• Textareas should support the ability for users to copy and paste content as well as type within the input.
• If there are character limits, these must be communicated to users.
• When a user has reached a character limit, they must not be prevented from further typing within the input.
• Visually communicate that a textarea is multi-line by giving it a greater height than surrounding text inputs.
• Make sure the textarea border has a 3:1 minimum contrast ratio with the background it's placed against.

Development considerations

• The textarea should have a clear, visible label so that users can understand its purpose.
• The textarea should be a textareawith type=”text” so that users are able to input whatever characters they need to.
• If hint text is used, it should be associated with the textarea using aria-describedby pointing at the unique id of the hint text.
• If using a character count, this should be associated to the textarea using aria-describedby pointing at the unique id of the character count. 
• As the character count updates, use aria-live=”polite” so that the count is announced to users when the screen reader is idle.
• Make sure any error or warning messages are programmatically associated with the field, so that they are announced to screen reader users.