如何让屏幕阅读器阅读 div 中的不同文本答案

【问题标题】：How to make screenreader read different text in div如何让屏幕阅读器阅读 div 中的不同文本
【发布时间】：2018-02-23 19:37:40
【问题描述】：

我有一个这样的 div： <div class="whatever">17:03</div>

当有人使用屏幕阅读器将鼠标悬停在该文本上时，我希望它读到“17 分 3 秒”

这样做的标准做法是什么？

【问题讨论】：

标签： html accessibility wai-aria screen-readers

【解决方案1】：

您可以只为屏幕阅读器添加一些附加文本：

<div class="whatever">17<span class="sr-only"> minutes and </span>:03<span class="sr-only">seconds</span></div>

和 CSS（取自 Bootstrap 3）

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

【讨论】：

【解决方案2】：

我最终只是将英文文本设为 Aria 标签，因为此 div 位于 <a> 标签内，因此当屏幕阅读器位于 aria 标签中时，它的信息最终会被屏幕阅读器读取，而无需创建任何额外的选项卡目标。

【讨论】：

你把aria-label放在哪里了？在<div> 或<a> 上？如果在<div> 上它将不起作用，但如果在<a> 上应该没问题。
不幸的是，我不再在 YouTube 工作，所以我无法参考代码进行检查，但我认为它直接在上。感谢您的编辑！