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

Question

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

当有人使用屏幕 reader 将鼠标悬停在该文本上时，我希望它显示为“17 分 3 秒”

执行此操作的标准做法是什么？

Answer 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;
}

Answer 2

我最后只是将英文文本设为 Aria 标签，因为这个 div 在 <a> 标签内，所以当它在aria 标签，无需创建任何额外的制表符目标。