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

Question

我正在为视力障碍人士设计一个网站，重点关注移动设备的使用。现在我有一些简单的按钮，如“播放”、“停止”和语音读取我在

<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 时，我得到：

播放，按钮。按此按钮可播放录音。您当前正在点击按钮...

即使没有显示该元素，这也会起作用，但我认为对于那些可以阅读它的人来说，拥有这样的上下文是件好事。

Answer 2

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

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