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

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

<button>Play</button>

我希望有一个这样的按钮,但是语音提示会读取一个隐藏的标签,例如“按此按钮以播放录音”.我怎样才能做到这一点？

最佳答案

您可以为此使用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 …

即使未显示该元素,此方法也可以工作,但我认为对那些也可以阅读它的人来说,具有上下文也是一件好事.