开发网站时如何控制画外音朗读的内容

Question

我正在为视障人士设计一个专注于移动使用的网站。现在，我有一些简单的按钮，例如 "play"、"stop"，语音会朗读我放在 <button></button> 标签之间的内容。但是，我想让它尽可能精确，因为老年人可能也会使用它并包含 "press this button to play recording" 之类的内容，但它变得非常长并且按钮看起来很糟糕。有没有办法将此信息包含在按钮中而不必在网站上显示此文本？找不到答案，第一次做盲人项目

<button>Play</button>

我想要一个这样的按钮，但是画外音读到一个像 "press this button to play recording" 这样的隐藏标签。我该怎么做？

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, button. Press this button to play recording. You are currently on a button ...

即使该元素未显示，这也能正常工作，但我认为为 也可以 阅读它的人提供该上下文是件好事。

Answer 2

如果您不打算在屏幕上显示标签文本，您可以使用aria-label

<button 
  id="play-button" 
  aria-label="Press this button to play recording"
>
  Play
</button>

开发网站时如何控制画外音朗读的内容

how to control what voiceover reads when developing a website

html

voiceover

talkback