Is there a way to make a screen reader announce '5m' as '5 minutes'?

Question

I am building a page that displays some time information e.g.

<span>Time elapsed: 5m</span>

Apple VoiceOver screen reader announces this as "Time elapsed: 5 meters". I would like it to announce "Time elapsed: 5 minutes".

I know it would be better to have

<span>Time elapsed: 5 min</span>

but designer is being strict on maintaining the condensed '5m' format.

The aria-label attribute is unsuitable here as this is not an interactive element.

Is there any other way to specify what should be announced?

Answer 1

You could use the visually-hidden class to print the word "minutes" and use a pseudoelement to print the "m", so the result is something like

<p>Time elapsed: <span data-units="m">5</span> <span class="visually-hidden">minutes</span></p>

---

CSS

[data-units]::after {
   content: attr(data-units)
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}