diff --git a/CHANGELOG.md b/CHANGELOG.md
index f38612a..01acf72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- ARIA attributes on a bunch of elements for better reading of should total,
+  durations, etc.
+- Use of `time` elements where appropriate.
+
 ## [0.2.0] - 2024-07-05
 
 ### Added
@@ -21,5 +29,6 @@ Initial release!
 
 - Very rudimentary plain text viewing and editing of Klog files.
 
+[unreleased]: https://github.com/ovyerus/obsidian-klog/compare/v0.2.0...HEAD
 [0.2.0]: https://github.com/ovyerus/obsidian-klog/releases/tag/v0.2.0
 [0.1.0]: https://github.com/ovyerus/obsidian-klog/releases/tag/0.1.0
diff --git a/package.json b/package.json
index d72dd31..957bdb0 100644
--- a/package.json
+++ b/package.json
@@ -29,5 +29,8 @@
     "svelte-preprocess": "^5.1.4",
     "tslib": "2.6.2",
     "typescript": "5.4.5"
+  },
+  "dependencies": {
+    "uid": "^2.0.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ac5808..621e26b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      uid:
+        specifier: ^2.0.2
+        version: 2.0.2
     devDependencies:
       '@tsconfig/svelte':
         specifier: ^5.0.4
@@ -256,6 +260,10 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@lukeed/csprng@1.1.0':
+    resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
+    engines: {node: '>=8'}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -925,6 +933,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uid@2.0.2:
+    resolution: {integrity: sha512-u3xV3X7uzvi5b1MncmZo3i2Aw222Zk1keqLA1YkHldREkAhAqi65wuPfe7lHx8H/Wzy+8CE7S7uS3jekIM5s8g==}
+    engines: {node: '>=8'}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
@@ -1089,6 +1101,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  '@lukeed/csprng@1.1.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -1779,6 +1793,10 @@ snapshots:
 
   typescript@5.4.5: {}
 
+  uid@2.0.2:
+    dependencies:
+      '@lukeed/csprng': 1.1.0
+
   undici-types@5.26.5: {}
 
   uri-js@4.4.1:
diff --git a/src/Viewer.svelte b/src/Viewer.svelte
index 5c96359..4d94c9d 100644
--- a/src/Viewer.svelte
+++ b/src/Viewer.svelte
@@ -44,7 +44,7 @@
     </p>
   </div>
 {:else}
-  <div class="klog-file">
+  <div class="klog-file" role="list">
     {#each records as record}
       <Record {record} />
     {/each}
diff --git a/src/components/Duration.svelte b/src/components/Duration.svelte
index e99d37c..2cd4a4e 100644
--- a/src/components/Duration.svelte
+++ b/src/components/Duration.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
   import type { Duration as KlogDuration } from "klog.js";
+  import { moment } from "obsidian";
+
+  import { formatMomentDuration } from "../lib";
 
   export let value: KlogDuration;
+
+  $: momentDuration = moment.duration(value.toMinutes(), "minutes");
 </script>
 
-<span class="klog-duration klog-value" data-duration-sign={value.sign}>
+<time
+  class="klog-duration klog-value"
+  data-duration-sign={value.sign}
+  datetime={momentDuration.toISOString()}
+  aria-label="Duration of {formatMomentDuration(momentDuration)}"
+>
   {value.toString()}
-</span>
+</time>
 
 <style>
   .klog-duration {
diff --git a/src/components/Entry.svelte b/src/components/Entry.svelte
index 3cb9df2..7eea7b0 100644
--- a/src/components/Entry.svelte
+++ b/src/components/Entry.svelte
@@ -4,16 +4,19 @@
   import Duration from "./Duration.svelte";
   import Range from "./Range.svelte";
   import Summary from "./Summary.svelte";
+  import { uid } from "uid";
 
   export let entry: KlogEntry;
   $: Value = entry.value instanceof KlogDuration ? Duration : Range;
   $: value = entry.value as any; // Types are a bit pooped and thinks there's an intersection somewhere instead of a union, for some reason...
+
+  const id = uid();
 </script>
 
-<li class="klog-entry">
+<li class="klog-entry" aria-describedby={entry.summary && `${id}-summary`}>
   <svelte:component this={Value} {value} />
   {#if entry.summary}
-    <Summary position="entry" summary={entry.summary} />
+    <Summary position="entry" summary={entry.summary} id="{id}-summary" />
   {/if}
 </li>
 
diff --git a/src/components/Range.svelte b/src/components/Range.svelte
index 44347a2..23b18b5 100644
--- a/src/components/Range.svelte
+++ b/src/components/Range.svelte
@@ -1,25 +1,43 @@
 <script lang="ts">
-  import type { Range as KlogRange } from "klog.js";
+  import { RangeDashFormat, type Range as KlogRange } from "klog.js";
 
   export let value: KlogRange;
+
+  $: dash = value.format === RangeDashFormat.NoSpaces ? "-" : " - ";
+  $: openIndicator = "?".repeat(value.openRangePlaceholderCharCount);
+  $: label = value.end
+    ? `From ${value.start.toString()} to ${value.end.toString()}`
+    : `In progress since ${value.start.toString()}`;
 </script>
 
-<span class="klog-range klog-value" class:klog-range-open={value.open}>
-  {value.toString()}
+<span
+  class="klog-range klog-value"
+  class:klog-range-open={value.open}
+  aria-label={label}
+>
+  <time class="klog-range-start klog-time" datetime={value.start.toString()}>
+    {value.start.toString()}
+  </time>
+  {dash}
+  {#if value.end}
+    <time class="klog-range-end klog-time" datetime={value.end.toString()}>
+      {value.end.toString()}
+    </time>
+  {:else}
+    <span class="klog-range-open-indicator">{openIndicator}</span>
+  {/if}
 </span>
 
-<!-- TODO: settings to configure colour from theme variables -->
+<!-- TODO: define semantic CSS variables like a lot of other stuff. -->
 <style>
   .klog-range {
     font-weight: bolder;
-    /* TODO: use accent instead, and derive colour for open */
-    color: var(--color-purple);
+    color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
   }
 
   .klog-range-open {
-    color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
     text-decoration: underline;
-    text-decoration-style: dotted;
+    /* text-decoration-style: dashed; */
     text-underline-offset: 4px;
   }
 </style>
diff --git a/src/components/Record.svelte b/src/components/Record.svelte
index 344ca8f..f01dd74 100644
--- a/src/components/Record.svelte
+++ b/src/components/Record.svelte
@@ -1,32 +1,55 @@
 <script lang="ts">
   import { Record as KlogRecord } from "klog.js";
+  import { uid } from "uid";
+  import { moment } from "obsidian";
 
   import Summary from "./Summary.svelte";
   import Entry from "./Entry.svelte";
+  import { formatMomentDuration } from "../lib";
 
   export let record: KlogRecord;
+  const id = uid();
+
+  $: shouldTotalMoment = moment.duration(
+    record.shouldTotal?.toMinutes() ?? 0,
+    "minutes",
+  );
 </script>
 
-<div class="klog-record">
-  <!-- TODO: ARIA to read everything in plain English -->
-  <h2 class="klog-record-header">
-    <span class="klog-record-date">{record.dateString}</span>
+<div
+  class="klog-record"
+  aria-labelledby="{id}-title"
+  aria-describedby={record.summary && `${id}-summary`}
+  role="listitem"
+>
+  <h2 class="klog-record-header" id="{id}-title">
+    <time
+      class="klog-record-date"
+      datetime={record.date.toISOString().slice(0, 10)}
+    >
+      {record.dateString}
+    </time>
     {#if record.shouldTotal}
-      <span class="klog-record-should-total">
+      <!-- TODO: change wording when record sum meets the requirement? -->
+      <time
+        class="klog-record-should-total"
+        aria-label="Should equal {formatMomentDuration(shouldTotalMoment)}"
+        datetime={shouldTotalMoment?.toISOString()}
+      >
         (
         <span class="klog-record-should-total-value">
           {record.shouldTotal.toString()}!
         </span>
         )
-      </span>
+      </time>
     {/if}
   </h2>
 
   {#if record.summary}
-    <Summary position="record" summary={record.summary} />
+    <Summary position="record" summary={record.summary} id="{id}-summary" />
   {/if}
 
-  <ul class="klog-entries">
+  <ul class="klog-entries" aria-label="Entries">
     {#each record.entries as entry}
       <Entry {entry} />
     {/each}
diff --git a/src/components/Summary.svelte b/src/components/Summary.svelte
index fa8ed9a..d6c5850 100644
--- a/src/components/Summary.svelte
+++ b/src/components/Summary.svelte
@@ -3,6 +3,7 @@
 
   export let summary: KlogSummary;
   export let position: "record" | "entry";
+  export let id: string;
 
   // TODO: setting to treat/view value tags as nested tags.
   // By default, it only treats them as the name.
@@ -10,7 +11,11 @@
     `#${name}${value ? `=${value}` : ""}`;
 </script>
 
-<p class="klog-summary klog-{position}-summary">
+<p
+  {id}
+  class="klog-summary klog-{position}-summary"
+  aria-label={summary.toString()}
+>
   {#each summary.splitOnTags() as node}
     {#if node.type === "text"}
       <span class="klog-summary-text">{node.value}</span>
diff --git a/src/lib.ts b/src/lib.ts
new file mode 100644
index 0000000..2e92158
--- /dev/null
+++ b/src/lib.ts
@@ -0,0 +1,10 @@
+export const formatMomentDuration = (duration: moment.Duration) => {
+  const hours = Math.floor(duration.asHours());
+  const minutes = duration.minutes();
+
+  const hoursStr = hours ? `${hours} hours` : "";
+  const joinStr = hours && minutes ? " and " : "";
+  const minutesStr = minutes ? `${minutes} minutes` : "";
+
+  return hoursStr + joinStr + minutesStr;
+};
diff --git a/tsconfig.json b/tsconfig.json
index 1b2d31b..f688623 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,6 @@
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "types": ["svelte", "node", "obsidian-typings"],
-    "baseUrl": ".",
     "inlineSources": true,
     "module": "ESNext",
     "target": "ES6",