htmlaccessibility

Accessibility: datetime attribute in time element

I have a simple question about the time element in HTML regarding accessibility. I read this in in the docs according datetime attribute.

From mdn docs:

The datetime value (the machine-readable value of the datetime) is the value of the element's datetime attribute, which must be in the proper format (see below). If the element does not have a datetime attribute, it must not have any element descendants, and the datetime value is the element's child text content.

From W3Schools:

The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

This is my time element:

<time>2025-01-20</time>

Question: Is it better according to accessibility best practises and WCAG guidelines to have the datetime attribute with the same value like this?

  <time datetime="2025-01-20">2025-01-20</time>

Clarification:

I want an answer about why and if it would differ according to people with disabilities, accessibility tools (like screen readers etc) or other cases. To have the same value on two places in the same <time> element or if the datetime attribute in this case will not make any difference.

Solution

  • You should add it, to be future proof, but not rely on it.

    The ARIA standard mentions:

    At the present time, there are no WAI-ARIA properties corresponding to the datetime attribute supported on <time> in HTML. The addition of this property will be considered for ARIA version 1.3.

    So there is no formal standard about accessibility mappings yet, hence support in assistive technology is probably not existing. See also this question: Screen reader accessibility for HTML time element.

    NVDA on Firefox and Chrome does not use the attribute.

    But having the attribute allows you to still provide a meaningful date to machines (other than assistive technology), while giving you flexibility on the format you deliver to users. It might get localised and rendered more readable.

    <time datetime="2025-01-20">20 January 2025</time>