CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readers
Arya
Arya

Reputation: 1469

How to make screenreader read different text in div

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?

Upvotes: 1

Views: 2864

Answers (2)

Arya
Arya

Reputation: 1469

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

Upvotes: 1

Heinz Schilling
Heinz Schilling

Reputation: 2252

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

Upvotes: 7

Related Questions