Textarea multiline input

How to test a textarea multiline input

Gherkin Condensed

Given that I am on a screen with a textarea multiline input

1 Keyboard

WHEN I use the tab key to move focus to a textarea I SEE focus is strongly visually indicated

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a textarea
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a textarea
- I HEAR Hints or errors (ex: chars remaining) are read after the label, related inputs include a group name (ex: Contact us)
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable)

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus on a textarea
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a textarea
- I HEAR Hints or errors (ex: chars remaining) are read after the label, related inputs include a group name (ex: Contact us)
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable)

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the textarea unless it's disabled

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the textarea
Keyboard	Keyboard appears

3 Screenreader output

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a textarea
Group	Hints or errors (ex: chars remaining) are read after the label, related inputs include a group name (ex: contact us)
State	If applicable, it expresses its state (required, disabled / dimmed / unavailable)

A textarea multiline input must meet WCAG principles:

1 Perceivable

The purpose (name, description) can be programmatically determined - 1.3.5 AA
Color is not used as the only means of conveying state (checked/unchecked) - 1.4.1 A
Text can resize up to 200% with no loss of information - 1.4.4 AA
The text has a 4.5:1 minimum contrast ratio - 1.4.3 AA

2 Operable

Is keyboard operable - 2.1.1 A
The purpose of can be determined from the text alone - 2.4.4 A
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The disabled and focus states have a 3:1 minimum contrast ratio against default - 2.4.13 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
Label is always visible (placeholder cannot be used as a label) - 3.3.2 A

3 Understandable

Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA

4 Robust

Conveys the correct name, role, state/value 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

Delay the update for dynamic counters
- Use setTimeoutto allow the accessibility tree and screen reader time to update in a logical fashion
Do not reference the role="status" element with aria-describedby
- This causes a bug in VoiceOver

const textarea = document.getElementById('message');
if(textarea) {
    const chars = document.getElementById('currentChars');
    textarea.addEventListener("input", event => {
        const target = event.currentTarget;
        const maxLength = target.getAttribute("maxlength");
        const currentLength = target.value.length;
        setTimeout(function() {
            chars.innerHTML = maxLength - currentLength;
        }, 10);
    });
}

<label for="message">
  Your message
</label>
<textarea 
  id="message"
  maxlength="50"
  aria-describedby="charcounter">
</textarea>
<div role="status">
  <!-- Do not reference the status element with aria-describedby 
       Doing so will not work in VoiceOver -->
  <div id="charcounter" class="hint">
    <span id="currentChars">50</span> 
    of 50
    <span class="hidden">
      characters remaining
    </span>
  </div>
</div>

Your message

50 of 50

Related textarea multiline input entries

Textarea multiline input design criteria