Making Time More Accessible

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:

 HTML<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: The <time> element represents when the story was originally published. The qa-status-date-output is an abbreviation of the relative time since the story was published. It is hidden from screen readers with aria-hidden="true". The 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:

1. It violates the DRY principle. The time is effectively written out three times.
2. It produces conflicting or ambiguous information. All three times contradict each other.
3. If CSS isn't working, both times are displayed.

Terence Eden is on Mastodon

@edent

Replying to @edentI found this due to the strange way Lynx renders the timestamps.
Because half of them are hidden using CSS, it becomes unreadable. pic.x.com/7obyophheb

---

It also has issues when search engines see the content:

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?

Possible Solutions

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:

 HTML<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.