How a paper shows its submission date, the timestamp it was announced at, its current revision date, and its version history — below the title, on the abstract page and in internal tools. Prior versions are inline text links; the version being viewed is bold, not a link.
The common case: most papers have a single version. Show the submitted and announced dates and nothing else — no "revised", no "(this version)", no version links to disambiguate. The submitted–announced pair sitting side by side is arXiv's speed made visible (BRAND, Speed and efficiency).
The date row and version classes are not in design-system.css yet, so the demos here take the page defaults until they land.
Submitted UTC , Announced UTC
<p class="ds-date-row">
Submitted <time datetime="2026-01-10">10 Jan 2026</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Announced <time datetime="2026-01-11T01:32Z">11 Jan 2026, 01:32</time> UTC
</p>
<p> that holds the dates and, after them, the version
links. Small type in the muted colour, with tabular figures so the digits line up.2026-01-11T01:32Z); Submitted and
Revised are date-only (2026-01-10). In the visible text, bind the day, month,
year and clock time to each other with , and bind UTC to its date the
same way, outside the element.aria-hidden, and the sr-only comma
beside it is what a screen reader gets between one date and the next.Once a paper has more than one version, the date row carries all three dates: Submitted and Announced are always the v1 dates; Revised … (this version) is the date of the version you are reading. Prior versions follow as Link Blue links; the current one is bold, not a link, and carries aria-current.
Viewing v3 of 3 (latest)
Submitted UTC , Announced UTC , Revised UTC (this version) v1 v2 v3, this version
<p class="ds-date-row">
Submitted <time datetime="2026-01-10">10 Jan 2026</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Announced <time datetime="2026-01-11T01:32Z">11 Jan 2026, 01:32</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Revised <time datetime="2026-04-24">24 Apr 2026</time> UTC (this version)
<a class="ds-version" href="#v1" aria-label="View version 1">v1</a>
<a class="ds-version" href="#v2" aria-label="View version 2">v2</a>
<strong class="ds-version" aria-current="true">v3<span class="is-sr-only">, this version</span></strong>
</p>
<a> with an href, and takes the page's link colour and
underline. The version being viewed is a <strong>, not a link..is-sr-only span inside it says
", this version", because the attribute alone is not announced by every screen reader.Past ten versions, the inline list keeps its first three and last three and elides the middle with an ellipsis — and the version being viewed always stays visible, wherever it falls. A text button carrying the explicit total expands the full list in place, the same disclosure grammar as "… show all 22 authors". Ten or fewer: every version, no elision.
Viewing v12 of 12 (latest), collapsed, the default
Submitted UTC , Announced UTC , Revised UTC (this version) v1 v2 v3 versions 4 through 9 hidden, v4 v5 v6 v7 v8 v9 v10 v11 v12, this version
<p class="ds-date-row">
Submitted <time datetime="2026-01-10">10 Jan 2026</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Announced <time datetime="2026-01-11T01:32Z">11 Jan 2026, 01:32</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Revised <time datetime="2026-06-30">30 Jun 2026</time> UTC (this version)
<a class="ds-version" href="#v1" aria-label="View version 1">v1</a>
<a class="ds-version" href="#v2" aria-label="View version 2">v2</a>
<a class="ds-version" href="#v3" aria-label="View version 3">v3</a>
<span id="v12-elide"><span aria-hidden="true">…</span><span class="is-sr-only">versions 4 through 9 hidden,</span></span>
<span id="v12-tail" hidden>
<a class="ds-version" href="#v4" aria-label="View version 4">v4</a>
<a class="ds-version" href="#v5" aria-label="View version 5">v5</a>
<a class="ds-version" href="#v6" aria-label="View version 6">v6</a>
<a class="ds-version" href="#v7" aria-label="View version 7">v7</a>
<a class="ds-version" href="#v8" aria-label="View version 8">v8</a>
<a class="ds-version" href="#v9" aria-label="View version 9">v9</a>
</span>
<a class="ds-version" href="#v10" aria-label="View version 10">v10</a>
<a class="ds-version" href="#v11" aria-label="View version 11">v11</a>
<strong class="ds-version" aria-current="true">v12<span class="is-sr-only">, this version</span></strong>
<button type="button" class="ds-show-more" aria-expanded="false" aria-controls="v12-elide v12-tail">show all 12 versions</button>
</p>
aria-expanded, flipped on every press, and aria-controls naming
every region it shows or hides. The label carries the total: "show all 12 versions", and
"show fewer" once open.hidden and the button, so with no JavaScript the reader
gets every version..is-sr-only span beside it says
which versions are hidden. Both sit in one span that the button hides when the list
opens.Viewing v7 of 12: the viewed version stays visible inside the elision
Submitted UTC , Announced UTC , Revised UTC (this version) v1 v2 v3 versions 4 through 6 hidden, v4 v5 v6 v7, this version versions 8 through 9 hidden, v8 v9 v10 v11 v12
You are viewing version 7. A newer version is available — version 12, revised 30 Jun 2026.
<p class="ds-date-row">
Submitted <time datetime="2026-01-10">10 Jan 2026</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Announced <time datetime="2026-01-11T01:32Z">11 Jan 2026, 01:32</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Revised <time datetime="2026-03-12">12 Mar 2026</time> UTC (this version)
<a class="ds-version" href="#v1" aria-label="View version 1">v1</a>
<a class="ds-version" href="#v2" aria-label="View version 2">v2</a>
<a class="ds-version" href="#v3" aria-label="View version 3">v3</a>
<span id="v7-elide-a"><span aria-hidden="true">…</span><span class="is-sr-only">versions 4 through 6 hidden,</span></span>
<span id="v7-tail-a" hidden>
<a class="ds-version" href="#v4" aria-label="View version 4">v4</a>
<a class="ds-version" href="#v5" aria-label="View version 5">v5</a>
<a class="ds-version" href="#v6" aria-label="View version 6">v6</a>
</span>
<strong class="ds-version" aria-current="true">v7<span class="is-sr-only">, this version</span></strong>
<span id="v7-elide-b"><span aria-hidden="true">…</span><span class="is-sr-only">versions 8 through 9 hidden,</span></span>
<span id="v7-tail-b" hidden>
<a class="ds-version" href="#v8" aria-label="View version 8">v8</a>
<a class="ds-version" href="#v9" aria-label="View version 9">v9</a>
</span>
<a class="ds-version" href="#v10" aria-label="View version 10">v10</a>
<a class="ds-version" href="#v11" aria-label="View version 11">v11</a>
<a class="ds-version" href="#v12" aria-label="View version 12">v12</a>
<button type="button" class="ds-show-more" aria-expanded="false" aria-controls="v7-elide-a v7-tail-a v7-elide-b v7-tail-b">show all 12 versions</button>
</p>
<div class="ds-alert ds-alert--warning" role="alert">
<svg class="ds-alert-icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
<path d="M12 9v4"/>
<path d="M12 17h.01"/>
</svg>
<div class="ds-alert-content">
<p><strong>You are viewing version 7.</strong> A newer version is available — <a href="#v12">version 12, revised 30 Jun 2026</a>.</p>
</div>
</div>
Expanded, shown at 24 versions: the full list simply wraps (also what renders without JavaScript)
Submitted UTC , Announced UTC , Revised UTC (this version) v1 v2 v3 v4 v5 v6 v7 v8 v9 v10 v11 v12 v13 v14 v15 v16 v17 v18 v19 v20 v21 v22 v23 v24, this version
<p class="ds-date-row">
Submitted <time datetime="2026-01-10">10 Jan 2026</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Announced <time datetime="2026-01-11T01:32Z">11 Jan 2026, 01:32</time> UTC
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Revised <time datetime="2026-06-30">30 Jun 2026</time> UTC (this version)
<a class="ds-version" href="#v1" aria-label="View version 1">v1</a>
<a class="ds-version" href="#v2" aria-label="View version 2">v2</a>
<a class="ds-version" href="#v3" aria-label="View version 3">v3</a>
<a class="ds-version" href="#v4" aria-label="View version 4">v4</a>
<a class="ds-version" href="#v5" aria-label="View version 5">v5</a>
<a class="ds-version" href="#v6" aria-label="View version 6">v6</a>
<a class="ds-version" href="#v7" aria-label="View version 7">v7</a>
<a class="ds-version" href="#v8" aria-label="View version 8">v8</a>
<a class="ds-version" href="#v9" aria-label="View version 9">v9</a>
<a class="ds-version" href="#v10" aria-label="View version 10">v10</a>
<a class="ds-version" href="#v11" aria-label="View version 11">v11</a>
<a class="ds-version" href="#v12" aria-label="View version 12">v12</a>
<a class="ds-version" href="#v13" aria-label="View version 13">v13</a>
<a class="ds-version" href="#v14" aria-label="View version 14">v14</a>
<a class="ds-version" href="#v15" aria-label="View version 15">v15</a>
<a class="ds-version" href="#v16" aria-label="View version 16">v16</a>
<a class="ds-version" href="#v17" aria-label="View version 17">v17</a>
<a class="ds-version" href="#v18" aria-label="View version 18">v18</a>
<a class="ds-version" href="#v19" aria-label="View version 19">v19</a>
<a class="ds-version" href="#v20" aria-label="View version 20">v20</a>
<a class="ds-version" href="#v21" aria-label="View version 21">v21</a>
<a class="ds-version" href="#v22" aria-label="View version 22">v22</a>
<a class="ds-version" href="#v23" aria-label="View version 23">v23</a>
<strong class="ds-version" aria-current="true">v24<span class="is-sr-only">, this version</span></strong>
</p>
When the reader is on anything but the latest, two things change. The date row reads Submitted … (this version) on v1 — v1 is the submission, so there is no "revised", and "(this version)" stays on the submitted date, with Announced following — and an amber warning appears, pointing to the current version. The warning uses the shared Warning color (never white, never an error red) and stays to one compact row.
Viewing v1, latest is v3
Submitted UTC (this version) , Announced UTC v1, this version v2 v3
You are viewing version 1. A newer version is available — version 3, revised 24 Apr 2026.
<p class="ds-date-row">
Submitted <time datetime="2026-01-10">10 Jan 2026</time> UTC (this version)
<span aria-hidden="true"> · </span><span class="is-sr-only">, </span>
Announced <time datetime="2026-01-11T01:32Z">11 Jan 2026, 01:32</time> UTC
<strong class="ds-version" aria-current="true">v1<span class="is-sr-only">, this version</span></strong>
<a class="ds-version" href="#v2" aria-label="View version 2">v2</a>
<a class="ds-version" href="#v3" aria-label="View version 3">v3</a>
</p>
<div class="ds-alert ds-alert--warning" role="alert">
<svg class="ds-alert-icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
<path d="M12 9v4"/>
<path d="M12 17h.01"/>
</svg>
<div class="ds-alert-content">
<p><strong>You are viewing version 1.</strong> A newer version is available — <a href="#v3">version 3, revised 24 Apr 2026</a>.</p>
</div>
</div>
role="alert". Render it only when
the version being viewed is not the latest. One sentence that names the version being
viewed, then a link straight to the latest one.aria-current="true" on
it, make it a <strong> and not a link, and put
<span class="is-sr-only">, this version</span> inside it. Bold alone
is invisible to a screen reader, and the attribute alone is not read out by every one.aria-label="View version 2". The visible "v2" does not say what the link does,
and a screen reader user listing the links on the page hears each one out of context.role="alert", so a screen reader announces it as soon as the page loads. Render it
only when the reader is not on the latest version; an alert that is always there is noise.aria-hidden="true", and a <span class="is-sr-only">, </span>
sits beside it. Without the comma the three dates are read as one run-on sentence.aria-hidden="true". The .is-sr-only span beside it says which versions
are hidden, and the button says the total: "show all 12 versions". Use the
hidden attribute on the hidden versions, never a class, so they are out of the tab
order while they are off screen.Submitted [v1 date] UTC · Announced [announcement date and time] UTC are always shown, in that order — announced is when the paper entered the public listing. Add · Revised [this version's date] UTC (this version) only once a paper has more than one version. "(this version)" attaches to the version-defining date, never to Announced — on v1 it reads "Submitted … UTC (this version) · Announced … UTC", on a later revision "Revised … UTC (this version)". Dates use <time datetime>.
Announcement is the moment a paper became public, and it is the one date a reader may need to the minute — so it renders as 11 Jan 2026, 01:32 UTC. Three reasons it is not a bare date. It is the actual per-paper release moment, not the batch's nominal time: release drifts with processing and queue length, so two papers announced in one batch can differ. A batch can cross midnight, so papers released minutes apart carry different UTC dates — and in any other timezone the split falls somewhere else again. And priority claims are settled on this value. Minutes, never seconds: the queue cannot honor a guarantee finer than that. Submitted and Revised stay date-only — they mark when an author handed something over, not a public event, and a clock time there would imply a precision that does not matter to anyone.
The same timestamp falls on different calendar days in different timezones, so each date states its reckoning: a plain-text UTC bound to its date with so a wrap never strands it — and kept outside the <time> element, in the same position on every date in the row. Inside datetime the precision differs with the date: Announced is a full instant (2026-01-11T01:32Z), Submitted and Revised stay date-only (2026-01-10). Bind the clock time to its date with too, so a wrap cannot leave 01:32 orphaned on the next line. The label renders in the date row's own size and color: the row is already Library Grey --ds-text-muted, and the next stop down the ladder (--ds-border-strong, 3.61:1) fails the 4.5:1 AA floor at this size, so never dim the label below the dates it belongs to (DESIGN-POLICIES, warm grey ladder). Where a date sits in near-black --ds-text — an admin metadata panel — the label may drop one step to --ds-text-muted: quieter than its date, still AA.
aria-current, never color aloneThe version being viewed is distinguished by weight and by aria-current — two non-color signals — so it survives grayscale, forced-colors, and screen readers (WCAG 1.4.1). It is deliberately not a link: you cannot navigate to where you already are.
They sit in a run of identifier text, so link-vs-text contrast cannot carry them alone — underlines are mandatory (DESIGN-POLICIES, link underlines). Link Blue --ds-link. Each carries an explicit aria-label ("View version 1").
Render it only when the version being viewed is not the latest. Use the shared Warning tokens (--ds-warning-bg / --ds-warning-border / --ds-warning-fg) — amber says "advisory," not error-red and not a blank white box — with the alert-triangle icon inline (never on its own line) and the text to one row. In production this is the .ds-alert warning variant. It links straight to the current version.
The date grammar never changes. Ten versions or fewer: the full inline list, wrapping as needed. More than ten: first three + last three with the middle elided, and the viewed version always visible even mid-elision — never a dropdown, never an internal scroll region. Version numbers render in the mono stack (public token --ds-font-mono; IBM Plex Mono is already tabular) or with font-variant-numeric: tabular-nums so they do not jitter as the list wraps.
The ellipsis is decoration (aria-hidden) with an sr-only count of what is hidden; the working affordance is a text button carrying the explicit total ("show all 127 versions"), toggling aria-expanded — the same disclosure grammar as the authors "show all 22 authors" toggle (DESIGN-POLICIES, truncation). The full list is server-rendered and collapsed by script under html.js, so without JavaScript readers simply get every version (DESIGN-POLICIES, progressive enhancement).
Background, if you want it. The affordance has to disappear for the common case and stay unbroken for the rare one — that constraint is what shapes everything above.
Authors, publishers, and overlay journals — provenance, and citing or linking a specific version. For them the version and its date must be explicit and addressable.
Most readers. They want the latest and go straight to reading. The version affordance must never tax them for attention they did not ask to spend.
The vast majority of papers have one version; some have two or three; a tiny minority have many. Design for the whole spectrum with one treatment.
Near-silent at one version, scannable at a few, unbroken at 20+ — and always answering the questions that matter: when was it first submitted, when did it go public, and when was the version I am reading revised.