Сделайте HTML текстовой голос за кадром для чтения

Question

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

Как сделать эту текстовую область читаемой программным обеспечением для передачи голоса?

Answer 1

Какую часть вы пытаетесь сделать читабельным?

• содержание текстовой области?
• содержимое как вы печатаете?
• ярлык для текстовой области?
• все вышеперечисленное?

Когда фокус перемещается к текстовой области, в которой уже есть содержимое (от набора текста ранее), текст должен быть выделен, и весь текст уже должен быть прочитан закадровым переводом. Если вы начнете печатать, ранее (автоматически) выбранный текст будет очищен, и все, что вы введете, заменит его.

При вводе в поле символы или слова (в зависимости от ваших настроек) будут произноситься по мере его ввода, по крайней мере, в OSX. В iOS экранная клавиатура будет читать каждую букву при вводе текста (если у вас нет bluetooth-клавиатуры для iOS, это будет аналогично OSX, а именно, что символы или слова будут объявляться при вводе).

Если вы хотите ярлык, просто используйте <label> элемент. placeholder атрибут на <textarea> может или не может быть прочитан программой чтения с экрана и спецификацией дляplaceholder говорит не использовать его в качестве замены для этикетки. (См. Предупреждение на странице спецификации.)

Итак, вы хотите что-то вроде:

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

Убедитесь, что вы используете for атрибут <label> ассоциировать метку с текстовой областью.

Примечание. Класс "sr-only" из начальной загрузки (см. " Что такое sr-only" в Bootstrap 3?) Предназначен для визуального скрытия текста, который все еще может быть прочитан программами чтения с экрана. Просто добавив <span> со скрытым текстом не будет связывать этот текст с элементом 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;
}