Go to content

The time element in Safari and VoiceOver

Published on

HTML5 has a semantic element for time. It can represent a specific period in time: a date, time or duration. It has an optional datetime attribute for the machine readable version of the text contents. I was curious how Apple's screenreader VoiceOver would treat several formats of time.

I have tested an HTML page with dates and durations in Safari on macOS 10.14. My system locale is Dutch (nl-NL) but the HTML document is in English: <html lang="en" xml:lang="en">. I am a novice user of VoiceOver. The result of the tests may differ among browsers, operating systems and screen readers.

Dates

Date as year-month number-day

The first test is a date in a machine readable order, not in the order that you would expect in English:

<p>Today is <time datetime="2019-04-19">2019-04-19</time></p>
<p>Today is <time>2019-04-19</time></p>
<p>Today is <span>2019-04-19</span></p>

VoiceOver:

  1. Today is. April nineteenth, two thousand nineteen, negentien april tweeduizendnegentien.
  2. Today is April nineteenth, two thousand nineteen.
  3. Today is April nineteenth, two thousand nineteen.

VoiceOver treats the time element with machine readable datetime attribute as a separate selectable element. The date is repeated in my system locale. It treats the time element without the datetime attribute in the same way as the span. In all cases it knows how to interpret the string 2019-04-19 as date.

Date as month day

The next text is a date represented as month and day. The year is omitted in the text.

<p>Today is <time datetime="04-19">April 19</time></p>
<p>Today is <time>April 19</time></p>
<p>Today is <span>April 19</span></p>

VoiceOver:

  1. Today is. April nineteenth, negentien april.
  2. Today is April nineteenth.
  3. Today is April nineteenth.

Again Safari does some interpretation of the string "April 19" and sends it as date to VoiceOver. The time element with the datetime attribute splits up the paragraph and its value is repeated in Dutch.

Duration

Abbreviated time period

This test is not for an exact date, but for a duration that is abbreviated.

<p>It takes <time datetime="PT47M">47m</time> to travel to The Hague</p>
<p>It takes <time>47m</time> to travel to The Hague</p>
<p>It takes <span>47m</span> to travel to The Hague</p>

VoiceOver:

  1. It takes. Forty seven minutes, zevenenveertig minuten. To travel to The Hague.
  2. It takes forty seven minutes to travel to The Hague.
  3. It takes forty seven minutes to travel to The Hague.

Safari interprets the string "47m" as forty seven minutes. The datetime="PT47M" is picked up by VoiceOver and results in the Dutch "zevenenveertig minuten". Again the datetime attribute makes it a separate node to read out.

Time period

This example is similar to the example above, but the duration is not abbreviated.

<p>It takes <time datetime="PT47M">47 minutes</time> to travel to The Hague</p>
<p>It takes <time>47 minutes</time> to travel to The Hague</p>
<p>It takes <span>47 minutes</span> to travel to The Hague</p>

VoiceOver:

  1. It takes. Forty seven minutes, zevenenveertig minuten. To travel to The Hague.
  2. It takes forty seven minutes to travel to The Hague.
  3. It takes forty seven minutes to travel to The Hague.

Safari did not need to interpret the text contents as "minutes" was already present in the text. The results are the same as the test above.

Video

In this video you can hear how the page was ready by VoiceOver.

Conclusion

A time element without a datetime attribute is treated similar to a span by VoiceOver in Safari. Safari seems to interpret several formats of a date or duration from the text contents without using the datetime attribute. When a valid datetime attribute is present, the time element has a separate position in the accessibility tree. The parsed result of the datetime attribute is read out in the language of the operating system, even though the web page itself is in a different language.