How do I indicate to a screen reader that a time is hours and minutes, not minutes and seconds?

Question

I've got the following fragment of markup in a webpage:

Time spent: <span id="time_spent">00:02</span>

JAWS reads this as "Time spent colon zero minutes and two seconds". How do I indicate to JAWS that this should be read as "zero hours and two minutes" (or just plain "two minutes")? Ideally, any solution would also work with other screen readers as well.

Cambell

You can try changing from <span> to <time> element which is more semantic and it also has an option of datetime attribute which gives more info on the pattern you have written in the time element – Passacaglia

Personally, I'd just add another :00 to the end. (EG: 00:02:00). This defaults to hours, minutes, seconds. – Branle

@J.Afarian, that would give false precision. The times aren't measured to better than the nearest minute, and users don't care about the seconds. – Cambell

@Cambell Sure, users don't care about seconds, but NVDA and JAWS both default to minutes and seconds when it's set as 00:00. The answer below from zzzzBov doesn't resolve that. It's just an option. Perhaps consider a format other than 00:00, e.g. 0hrs 2min. – Branle

Answer 1

The advice above about semantics remains, but unfortunately you have in fact almost no influence on the way the screen reader actually announce it. It depends heavily on the language and the speech synthesizer used.

In my case, Jaws 2019, eloquence, French, "0:02" is told as "zéro heure deux" => "zero hours two", while "0:02:00" is told "zéro heure deux zéro zéro" => "zero hours two zero zero". VoiceOver on iOS 13.1.2 with the voice Audrey says the same. The same Jaws 2019, eloquence, English US, says "zero o two". As you can see, there are cases where the format isn't particularely interpreted.

However, I wouldn't say that changing to something more explicit like "0 hours 2 minutes", "0hrs2min" or "0h2m" is better. Saying "hours" instead of "hrs" and "minutes" instead of "min" when encountered depends as much on language, synthsizer and user dictionary as "00:02". So both can be OK in some situations and wront in others.

Abreviations like "min" for "minutes" even sometimes create problems, because "min" can also be taken as "minimum" for example. Remember that speech synthesizers don't try to make any meaning or contextual analysis.

The full explicit "0 hours 2 minutes" isn't that good either. I'm blind myself and I can tell you: it's crystal clear, well, but in fact, we are used to hear "zero hours two" because it's written "0:02" everywhere. We are all used to that kind of speech synthesizer quirks and basicly we don't really mind.

In this particular case, we are smart enough to know, given the context, if "zero o two" represents two minutes or two seconds, and that "3hrs" or "3h" means 3 hours. Nothing is perfect in all situations anyway, so stop scratching your head and take whatever format is the most appropriate for your application.

Audun

Answer 2

Some options:

Use <time datetime="00:00"> (This should give you HH:MM, according to MDN).

-or-

Convert the time to a human-readable string, and insert that string into an aria-label attribute, such as <span role="timer" aria-label="zero minutes, two seconds">00:02</span>. I have had success with this approach, with the caveat that different (human) languages will need their own 'translated time string' code.

If you use anything but the <time> element you really should add role="timer" to make the semantics explicit.

Amos

I'm pretty sure I've already tried the <time> element and had it not work, but the aria-label option looks promising. – Cambell