0

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?

spinners
  • 2,449
  • 3
  • 23
  • 34
  • This question should be closed. It's almost the same as https://stackoverflow.com/questions/74021046/getting-voiceover-to-read-distance-and-time-correctly – QuentinC Oct 13 '22 at 14:57
  • This frustrates me so much. There are standards on how to abbreviate different units, just like there are web standards. [International System of Units](https://en.m.wikipedia.org/wiki/International_System_of_Units), anyone? A lot of expert work goes into these to avoid ambiguities and take into account different language’s needs. Would people (designers) respect these, developers of assistive technologies could make sure they are read correctly. But instead, people “know better” and do whatever they like, resulting in very unpredictable announcements (for developers). – Andy Oct 15 '22 at 09:27

1 Answers1

2

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;
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177