如何让屏幕阅读器读取 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;
}