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

Question

我正在为残障人士设计一个网站，重点是手机的使用。现在，我有一些简单的按钮，例如“播放”，“停止”和画外音读取了我在TIME_ZONE = 'UTC' 标签之间放置的内容。但是，我想使其尽可能精确，因为老年人也可能会使用它，并包含诸如“按此按钮来播放录音”之类的内容，但是它变得很长，并且按钮看起来很糟糕。有没有一种方法可以将这些信息包含在按钮中，而不必在网站上显示此文本？我找不到答案，这是我第一次进行针对盲人的项目。

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

  

播放，按钮。按此按钮播放录音。您当前正在使用按钮...

即使没有显示该元素也可以，但是我认为对可以也可以阅读它的人来说，最好有这样的上下文。