Make an HTML textarea Voice Over readable

Question

<div>
  <textarea placeholder="Type a message...."> </textarea>
</div>

How to make this text area readable by the voice over software?

Answer 1

What part are you trying to make readable?

• the contents of the textarea?
• the contents as you're typing?
• a label for the textarea?
• all of the above?

When focus moves to a textarea that already has contents (from typing previously), the text should be selected and the entire text should already be read by voiceover. If you start typing, the previously (automatically) selected text will be cleared and whatever you type will replace it.

As you type in the field, the characters or words (depending on your settings) will be spoken as you type it, at least on OSX. On iOS, the onscreen keyboard will read every letter as you type (unless you have a bluetooth keyboard for iOS, then it will be a similar experience to OSX, namely that characters or words will be announced as you type).

If you want a label, just use the <label> element. The placeholder attribute on the <textarea> may or may not be read by a screen reader and the spec for placeholder says to not use it as a replacement for a label. (See the warning on the spec page.)

So you'd want something like:

<label for="mytext">here's my label</label>
<textarea id="mytext"></textarea>

Make sure you use the for attribute of the <label> to associate the label with the textarea.

Note: The "sr-only" class from bootstrap (see What is sr-only in Bootstrap 3?) is for visually hiding text that can still be read by screen readers. Just adding a <span> with hidden text will not associate that text with the textarea element.

Answer 2

In bootstrap, we have a class called .sr-only for screen reader.

HTML

<div>
  <span class="sr-only">Readable text</span>
  <textarea placeholder="Type a message...."> </textarea>
</div>

CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}