How to make screenreader read different text in div

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?

Heinz Schilling · Answer 1 · 2021-11-03T14:30:31.513

7

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

edited Nov 03 '21 at 14:30

answered Feb 23 '18 at 19:48

Heinz Schilling

2,177
4
18
35

score 1 · Accepted Answer · edited Nov 03 '21 at 21:38

1

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.

edited Nov 03 '21 at 21:38

slugolicious

15,824
2
29
43

answered Mar 28 '18 at 21:20

Arya

1,382
2
15
36

1

Where did you put the `aria-label`? On the `
` or the ``? It won't work if on the `
` but should be ok if on the ``.
– slugolicious Nov 03 '21 at 21:39
I don't work at YouTube anymore unfortunately, so I can't reference the code to check, but I assume it was on the directly. Thanks for the edit! – Arya Nov 05 '21 at 22:45

How to make screenreader read different text in div

2 Answers2

Linked