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

Question

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

当有人使用屏幕阅读器悬停在该文本上时，我希望它能读到“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位于标签内部，所以它的信息最终被屏幕阅读器读取，当它在aria标签中时，没有创建任何额外的标签目标。