Forms - Textarea

• Textarea field allows users to enter multiline responses.
• A descriptive visual label MUST be placed above or to the left of the textarea field.
• Color requirements MUST be met for the visual label or instructions if any as mentioned in the “Label placement and structure” component.
• The contrast requirement of 3:1 ratio MUST be always met between the border with the adjacent colors.
  • In the absence of any border for the textarea, the inner and outer background colors of the text area field MUST meet the requirement of 3:1 ratio.
• The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for the custom focus indicator of the textarea field.
• For more information on additional requirements for form fields, see “Input Structure” component.
• DO NOT use textarea field wherein single line input has to be entered. Instead, use text input field. See “Text Input” component for more information on to implement a text input field.

Native HTML is the preferred method to implement a textarea.

• Textarea field is defined using native HTML <textarea> element.
• A descriptive and programmatic label MUST be provided for the textarea field. See “Label placement and structure” component for more information on labelling and how to provide additional instructions if any.
• The size of the textarea field can be set using rows and cols attributes.
  • The cols attribute is used to define the visible width of the textarea. It SHOULD be a positive integer.
    Note: The default value is 20.
  • The rows attribute is used to define the number of visible text lines for the textarea. It SHOULD be a positive integer.
    Note: The default value is 2.
• For textarea fields where additional information like number of characters left is dynamically updated and displayed below the field, the information MUST be made available for screen reader users.
  • It can be achieved by using aria-live="polite" attribute on the <div> container containing the number of characters information.
  • Please note that the announcement MUST NOT be made for every character typed.
    • It SHOULD be announced politely at intervals and as a warning when the user gets to within a small number of characters left.
      For example, for a textarea that can take 500 characters, the screen reader SHOULD politely announce the remaining characters at 400, 300, 200, 100 and 50 characters. Then once the number reduces to 10 or 20 characters the announcements MUST be made more frequent for the users.
  • The aria-describedby attribute SHOULD be used to associate the number of characters left pertaining to the textarea field.
    • This attribute MUST be provided for the <textarea> element.
    • The value of aria-describedby attribute SHOULD be referenced with the id attribute value of the instruction.

For example,

<label for="question">Questions or Comments:</label>
<textarea name="question" id="question"></textarea>

Examples of textarea fields where the number of characters entered is displayed and is dynamically updated.

<!-- aria-live attribute set to &#8220;off&#8221; initially -->
<!--suppress XmlDuplicatedId, XmlDuplicatedId -->lDuplicatedId -->lDuplicatedId -->lDuplicatedId -->lDuplicatedId -->lDuplicatedId -->lDuplicatedId -->lDuplicatedId -->
<label for="message">Message *</label>
<textarea name="message" id="message" aria-describedby="input-info" aria-required="true"></textarea>
<span aria-live="off" id="input-info">Characters remaining: <span id="chars">500</span></span>

<!-- aria-live attribute value gets updated to "polite" using JavaScript when the remaining characters are 401 -->
<label for="message">Message *</label>
<textarea name="message" id="message" aria-describedby="input-info" aria-required="true"></textarea>
<span id="input-info" aria-live="polite">Characters remaining: <span id="chars">401</span></span>

<!-- aria-live attribute value gets updated to &#8220;off&#8221; using JavaScript when the remaining characters are 399 -->
<label for="message">Message *</label>
<textarea name="message" id="message" aria-describedby="input-info" aria-required="true"></textarea>
<span aria-live="off" id="input-info">Characters remaining: <span id="chars">399</span></span>

Though ARIA can be used as an alternative, it is advisable to use correct semantic HTML element since native elements have built-in keyboard accessibility, roles and states.

• The textarea field MUST be defined using role="textbox" on neutral container such as <div> element.
• The aria-multiline attribute MUST be provided on neutral container such as <div> element having role="textbox".
  • Set the aria-multiline attribute to true.
• To provide an accessible name for the textarea field, aria-label attribute SHOULD be used in absence of visual label text.
  Alternatively, in case where visual text is present, an aria-labelledby attribute MUST be used by referencing the value of id attribute of the visible text.
• The contenteditable="true" attribute MUST be provided for the neutral container such as <div> element that is specified with role="textbox".

For example,

<span id="LBL">Questions or Comments:</span>
<div role="textbox" contenteditable="true" aria-labelledby="LBL" aria-multiline="true"></div>

A well-defined textarea field benefits majorly the below users.

• People with cognitive disabilities
• People using speech input
• People with limited dexterity
• People using screen readers
• People using keyboard only