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:

 The concert is <time datetime="2020-12-24">tomorrow</time>

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:
Dev tools showing the HTML code behind the BBC news site.
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.

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:

<time datetime="2020-11-30T09:23:48.000Z">
   <abbr aria-label="1 hour ago">1h</abbr>

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.

4 thoughts on “Making Time More Accessible

  1. alex says:

    What is the current real-world behavior of this proposed solution? What would we be sacrificing by doing it that way today?

    1. says:

      It's a simplification of the original code. So you lose an element being hidden by CSS, and an element being hidden by a screenreader. Instead, a single element provides both roles. Given that <time> works in all browsers, there's no sacrifice to be made. Obviously, there would be rewriting of a codebase, and testing etc - but that's true of any change.

  2. 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?)

Leave a Reply

Your email address will not be published. Required fields are marked *