How to make screenreader read different text in di

Question

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?

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

Answer 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.