Question

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

如何通过语音软件使此文本区域可读？

Answer 1

您要使哪一部分可读？

当焦点移到已经有内容的文本区域（以前键入时）时，应选择文本，并且画外音应已读取整个文本。如果您开始输入文字，先前（自动）选择的文字将被清除，而您输入的任何文字都将被替换。

在该字段中键入时，至少在OSX上，在键入时会说出字符或单词（取决于您的设置）。在iOS上，屏幕键盘会在您键入时读取每个字母（除非您拥有适用于iOS的蓝牙键盘，否则它将与OSX具有相似的体验，即在键入时会宣布字符或单词）。

如果需要标签，只需使用<label>元素。屏幕阅读器可能会读取也可能不会读取placeholder上的<textarea>属性，并且spec for placeholder说不可以用它代替标签。（请参阅规格页面上的警告。）

所以您想要类似的东西：

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

确保使用for的{{1}}属性将标签与文本区域相关联。

注意：引导程序中的“仅sr”类（请参见What is sr-only in Bootstrap 3?）用于可视地隐藏仍可由屏幕阅读器读取的文本。仅添加带有隐藏文本的<label>会不将该文本与textarea元素相关联。

Answer 2

在引导程序中，我们为屏幕阅读器提供了一个名为.sr-only的类。

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;
}