Textarea multiline input

How to test a textarea multiline input

Gherkin Condensed WCAG

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

1 Keyboard for mobile & desktop

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)
- I HEAR Character counter updates dynamically after keypress and a short delay

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) 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)
- I HEAR Character counter updates dynamically after keypress and a short delay

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 for all devices

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)
Status	Character counter updates dynamically after keypress and a short delay

A textarea multiline input must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Type size is optically no smaller than 16px Helvetica
The text has a 4.5:1 minimum contrast ratio
Label is always visible (placeholder cannot be used as a label)
Color is not used as the only means of conveying information or state (error, success, focus, disabled etc)

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The disabled and focus states have a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3Understandable

The input purpose should be clear in the context of the whole page
The width of the input accommodates/affords the intended input, reinforcing its purpose

4Robust

Conveys the correct semantic role
Expresses its state (if applicable)
Meets criteria across platforms, devices and viewports
Status messages are announced by screen readers

Code examples

Use semantic HTML

There are two containers in the HTML that have the same counter content. One of them is hidden from screen readers by use of aria-hidden="true" and the other visually hidden container’s content is dynamically updated after a slight pause. This is to ensure the screen reader does not interrupt the announcement of the key pressed with the announcement of the dynamic counter text update.
While the visible counter text container is hidden with aria-hidden="true" it is still programmatically associated with the textarea by use of aria-describedby. This will ensure the text will be announced when the textarea receives focus.
Delay the update for dynamic role="status" counter
- Use setTimeoutto allow the accessibility tree and screen reader time to update in a logical fashion e.g. 1500ms
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');
    const srOutputTarget = document.getElementById('sr-counter-target');
    textarea.addEventListener("input", event => {
        const target = event.currentTarget;
        const maxLength = target.getAttribute("maxlength");
        const currentLength = target.value.length;
        // update the visible counter text
        chars.innerHTML = maxLength - currentLength;
        // update the visually hidden counter text
        setTimeout(function() {
            srOutputTarget.innerHTML = maxLength - currentLength;
        },1000);
    });
}

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

Your message