How to make screenreader read different text in di

问题:

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?

回答1:

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

回答2:

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.