O3 World Component Library

Date Time 

<p><time>10:00</time> a.m.</p>
<p>The party starts at <time datetime="18:00">6 PM </time>and runs until <time datetime="00:00">midnight</time>.</p>
<p>Our puppy was born at <time datetime="14:54">2:54 PM</time> on <time datetime="2006-07-08">July 8th, 2006</time>.</p>
<p>Libraries are closed for <time datetime="2019-01-21">Martin Luther King Day</time>.</p>
<p>First published on <time datetime="2014-09-05" itemprop="datePublished">September 5th, 2014</time>.</p>
<p>The concert should last at least <time datetime="PT2H30M">2h 30m</time>.</p>
<p>Estimated read time&colon; <time datetime="PT5M">5 minutes</time>.</p>
 
<p><time>10:00</time> a.m.</p>
<p>The party starts at <time datetime="18:00">6 PM </time>and runs until <time datetime="00:00">midnight</time>.</p>
<p>Our puppy was born at <time datetime="14:54">2:54 PM</time> on <time datetime="2006-07-08">July 8th, 2006</time>.</p>
<p>Libraries are closed for <time datetime="2019-01-21">Martin Luther King Day</time>.</p>
<p>First published on <time datetime="2014-09-05" itemprop="datePublished">September 5th, 2014</time>.</p>
<p>The concert should last at least <time datetime="PT2H30M">2h 30m</time>.</p>
<p>Estimated read time&colon; <time datetime="PT5M">5 minutes</time>.</p>
 
/* No context defined for this component. */

Usage

The HTML time element represents a specific period in time.

  • A time on a 24-hour clock.
  • A precise date in the Gregorian calendar with optional time and timezone information.
  • A valid time duration.
  • Must have a closing tag.
  • For more information on valid date and time formats, refer to the MDN or W3C documentation.

Labelling Expectations

  • A time element may include a datetime attribute which is used to translate dates into a machine-readable format.
  • If a datetime attribute is not specified, the text content must be in one of the valid date/time formats, and must not have any element descendants.

Focus Expectations

  • Time elements are not focusable by default.

Keyboard Expectations

  • It may be necessary to use the Control + Option + ← or → keys to navigate through content with screen reader.

Screen Reader Expectations

  • Text content inside the time element will be read first, and then the value of the datetime attribute, if present.
  • Some date-time formats in the datetime attribute are not read out by all screen readers so consideration should be taken for these exceptions when writing markup. Hidden text can be added for clarity using the .u-sr-only utility class.
  • Always note AM and PM in uppercase, to avoid "am" being read incorrectly as a word, as in "I am here", rather than as an abbreviation.