Screen reader accessibility for HTML time element

Question

this is quite a simple question but one that's quite hard to find any resources on.

Basically I have a time element

{(value: string) => (
  <time dateTime={arriveAt} aria-label={`Arrives at ${value}`}>
    {value}
  </time>
)}

As you can see, I have attempted making this work with an aria-label on the time element but it reads out the time in a time element, then the time in a text element then it reads "end of Arrives at time".

I simply just want the element to display 15:00 as an example and read out arrives at 15:00, to give the user that context. Can anyone help me in achieving this?

Thanks

Answer 1

It's always best to start with semantic HTML elements such as <time> or <abbr> but unfortunately there isn't good screen reader support for those elements at this time (no pun intended).

Note: <abbr> was not mentioned in the OP but was just another example of a semantic HTML that doesn't have good screen reader support.

That doesn't mean you shouldn't use those elements but for now you'll have to work around the lack of support. For the <time> element, it can often be read correctly by screen readers, especially if you use the datetime attribute.

However, your original question didn't sound like the time itself was a problem but rather you wanted to add extra text to be read and you're currently doing that via aria-label. I would not recommend aria-label for that purpose. This type of question comes up quite a bit and you can see my thoughts (which are based on w3.org documentation) regarding aria-label on answers to these similar questions:

• Repeating element's content/text in aria-label property
• Screen reader reading out group when ever aria label is used
• Screen reader not reading parent's aria-label in mobile

The gist of it is aria-label works best on interactive elements and landmarks.

If you want to add extra text for a screen reader to announce but not be visible on the page, you can use a "sr-only" type class. (The "sr-only" class is also mentioned in the "Screen reader reading out group..." answer link above.)

<span class="sr-only">Arrives at </span>
<time dateTime={arriveAt}>{value}</time>