GoKawiilPosted December 14, 2025 by Nolan Lawson in accessibility, Web. Tagged: html5. 5 Comments
A common UI pattern is something like this:
Post published 4 hours ago
People do lots of stuff with that “4 hours ago.” They might make it a permalink:
Post published <a href="/posts/123456">4 hours ago</a>
Or they might give it a tooltip to show the exact datetime upon hover/focus:
Post published <Tooltip content="December 14, 2025 at 11:30 AM PST"> 4 hours ago </Tooltip>
Note: I’m assuming some Tooltip component written in your favorite framework, e.g. React, Svelte, Vue, etc. There’s also the bleeding-edge popover="hint" and Interest Invokers API, which would give us a succinct way to do this in native HTML/CSS.
If you’re a pedant about HTML though (like me), then you might use the <time> element:
Post published <time datetime="2025-12-14T19:30:00.000Z"> 4 hours ago </time>
... continue reading