How to make screenreader read different text in di

2019-08-23 03:43发布

I have a div like this: <div class="whatever">17:03</div>

And when someone using a screen reader hovers over that text, I'd like it to read "17 minutes and 3 seconds"

What's the standard practice for doing this?

2条回答
Melony?
2楼-- · 2019-08-23 04:29

You can include some additional text for screenreader only:

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

and CSS (taken from Bootstrap 3)

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
查看更多
做自己的国王
3楼-- · 2019-08-23 04:39

I ended up just making the English text the Aria Label, as this div was inside of an tag, so it's information ended up being read by the screenreader when it was in the aria label, without creating any extra tab targets.

查看更多
登录 后发表回答