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

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.

1 answer

  • answered 2018-02-13 01:17 zzzzBov

    To represent the time semantically as time, use a <time> element:

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

    You're going to need to provide the datetime attribute so that you indicate that the time represents a time span as a valid duration string:

    Time spent: <time id="time_spent" datetime="0h 2m">00:02</time>