There’s an HTML element called
<time>. It is a semantic element. That means robots can read and understand it. For example, if my code says:
<p> The concert is <time datetime="2020-12-24">tomorrow</time> </p>
Then the computer knows the specific date I’m talking about. A browser could offer to add the event to your calendar, or a search engine could find events which are happening on a specific date. Nifty!
Problems in the wild
The problem comes when people use abbreviations which may not be accessible to people who use assistive technology like screen readers.
Here’s an example from the BBC’s news front page. That “1h” means the story was published 1 hour ago. Take a look at the code behind it:
<time> element represents when the story was originally published.
qa-status-date-output is an abbreviation of the relative time since the story was published. It is hidden from screen readers with
gs-u-vh is the alternative text for screen readers. It is hidden from sighted users with CSS.
There are a few problems with this approach:
- It violates the DRY principle. The time is effectively written out three times.
- It produces conflicting or ambiguous information. All three times contradict each other.
- If CSS isn’t working, both times are displayed.
I found this due to the strange way Lynx renders the timestamps.— Terence Eden (@edent) November 29, 2020
Because half of them are hidden using CSS, it becomes unreadable. pic.twitter.com/7OBYOpHheb
It also has issues when search engines see the content:
This approach by the BBC might be doing weird things to its Google snippets too (just saw this now and thought it was a D&D reference... 10d10?) pic.twitter.com/8TLucyEBo8— Matt Andrews (@mattpointblank) December 14, 2020
To be clear, I’m not dunking on the Beeb. They have a great set of accessibility people.
I’m just wondering if there’s a simpler / better way to do things?
Ideally, there would be something like
aria-datetime to read out the time. But that doesn’t exist.
Or, screen readers could interpret the
<time> element and do something with it. But that doesn’t seem well supported. And, how will a screen reader know that the salient information is a relative duration, rather than a specific datetime?
ISO8601 – the datetime standard – allows for durations. So you could write
datetime="TP30M" to mean 30 minutes. But that doesn’t say it was 30 minutes ago and you lose the full datetime.
Here’s how I would solve it:
<time datetime="2020-11-30T09:23:48.000Z"> <abbr aria-label="1 hour ago">1h</abbr> </time>
That uses the
<abbr> abbreviation element. A sighted reader will see the “1h”, a screen reader will read out “One Hour Ago”, and someone browsing in text mode will just the “1h”.
I think that’s a pretty optimal solution. It’s clean, readable, doesn’t rely on hiding any elements, and should be easy to keep in sync.
Think there’s a better way? Let me know in the comment box.