html - 使 HTML textarea Voice Over 可读

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 <label> 的属性将标签与文本区域相关联。

注意:bootstrap 中的“sr-only”类(参见 What is sr-only in Bootstrap 3? )用于在视觉上隐藏屏幕阅读器仍可阅读的文本。只需添加 <span>带有隐藏文本的 不会将该文本与 textarea 元素相关联。