как контролировать то, что читает голос за кадром при разработке сайта

Question

Я разрабатываю веб-сайт для людей с нарушениями зрения с акцентом на мобильное использование. На данный момент у меня есть несколько простых кнопок, таких как «play», «stop» и голос за кадром читает то, что я положил между <button></button> тегами. Тем не менее, я хочу сделать его как можно более точным, потому что пожилые люди могут также использовать его и включать что-то вроде «нажмите эту кнопку, чтобы воспроизвести запись», но затем она становится действительно длинной, и кнопка просто выглядит ужасно. Есть ли способ включить эту информацию в кнопку, не отображая этот текст на веб-сайте? Я не могу найти ответ, и я впервые делаю проект, ориентированный на слепых людей.

<button>Play</button>

Я хотел бы иметь такую ​​кнопку, но голос за кадром читает скрытый тег типа «нажмите эту кнопку для воспроизведения записи». Как я могу это сделать?

Answer 1

Вы можете использовать aria-describedby для этого:

.help-text {
  color: gray;
  font-size: 0.75rem;
}

<button 
  id="play-button" 
  aria-describedby="play-button-explanation"
>
  Play
</button>
<span 
  id="play-button-explanation" 
  class="help-text"
>
  Press this button to play recording.
</span>

Когда я использую VoiceOver для этой кнопки, я получаю:

Кнопка Play.Нажмите эту кнопку для воспроизведения записи.Вы находитесь на кнопке ...

Это сработало бы, даже если элемент не отображался, но я думаю, что хорошо иметь такой контекст для людей, которые могут прочитайте это тоже.