Add <time> metadata to publication dates.

[edent]

Please can we add the <time> HTML element to things like publication dates and last updated dates?

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

This will allow users and machines to semanticly understand when a document was published/updated.

At the moment, the HTML is rendered as:

<div class="app-c-published-dates " lang="en">
    Published 21 April 2016
    <br>Last updated 21 July 2016
      — <a href="#history" class="app-c-published-dates__history-link govuk-link">see all updates</a>
</div>

Under this proposal, it would be:

<div class="app-c-published-dates " lang="en">
    Published <time datetime="2016-04-21">21 April 2016</time>
    <br>Last updated <time datetime="2016-07-21">21 July 2016</time>
      — <a href="#history" class="app-c-published-dates__history-link govuk-link">see all updates</a>
</div>

I think the relevant change needs to be made at:

government-frontend/app/views/components/_published-dates.html.erb

Line 12 in 79e5c4d

Published <%= published %>

The metadata element just needs an ISO8601 timestamp passed to it - of any precision.

As per the comment at co-cddo/open-standards#75 (comment)

[chris-gds]

The following code for time from Mozilla was tested across some common screen readers

<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>

<p>The Cure will be celebrating their 40th anniversary on <time>July 7</time> in London's Hyde Park.</p>

<p>The Cure will be celebrating their 40th anniversary on <span datetime="2018-07-07">July 7</span> in London's Hyde Park.</p>

<p>The Cure will be celebrating their 40th anniversary on <span>July 7</span> in London's Hyde Park.</p>

Initial testing results

Screen Reader	Browser	Notes
JAWS 2020	Chrome	Doesn't announce <time> or datetime=
NVDA 2021.2	Firefox	Doesn't announce <time> or datetime=
Voiceover + macOS	Chrome	Doesn't announce <time> or datetime= also splits <time> into separate blocks similar to being wrapped <div>s
Narrator 21H1	Edge	Doesn't announce <time> or datetime=

(Not a comment on use or next steps merely sharing outcomes from testing with assistive technology)

[edent]

Thanks @chris-gds - when you say "doesn't announce" - what do you mean? Does JAWS literally skip the content of the <time> element and read out "40th anniversary on in London's..."?
Or is it that it doesn't give any extra semantic content?
Thanks.

[chris-gds]

Hey @edent - at the moment yes it simply ignores it (this is my current understanding), see below:
JAWS 2020, Edge (not Chrome this time)

(Screen recording of JAWs 2020 + Edge testing <time> examples)

Screen.Recording.2021-11-25.at.11.44.38.mov

[edent]

Good to know it doesn't have any detrimental impact on screen readers. So it should improve the machine-readable semantics without causing any issues.

[chris-gds]

In theory yes, AT users don't appear to benefit nor does it cause issues.

I'm wondering now if we have any examples where this would be picked up (or used)?
Are we thinking Google? Maybe Explore?

[edent]

There are a few examples where it could be useful.

• Search engines. Being able to search for things which are timely is useful for users.
• Screen scrapers and other parsers. Automated tooling in the absence of an API will benefit from better semantics.
• Scholars. Things like Zotero and other citation managers have support for semantic dates. Which lets scholars cite things correctly.
• Archivists and others who track changes. They'll be able to easily see when things were added and updated.
• Non-English speakers. Not everyone recognises what "January" is. User Agents can provide hints and translations for people who speak other languages.
• Future automated tools. This is a bit speculative, but web browsers in the future might be able to do something with the <time> element in the same way that they do things with <a>. It is unlikely that anyone will want to add a "published on" to their calendar - but it is likely that a User Agent could alert someone that they're looking at content which is several years old.

[chris-gds]

All great examples to me, thanks for these.
(FWIW I was interested in this element from an accessibility POV so wanted to do a bit of testing)