diff --git a/ARCHITECTURE_ESSENTIALS.md b/ARCHITECTURE_ESSENTIALS.md
index d4be416..bc85d0f 100644
--- a/ARCHITECTURE_ESSENTIALS.md
+++ b/ARCHITECTURE_ESSENTIALS.md
@@ -20,7 +20,9 @@ those first if you're new to the org, not just this file.
 2. Mirror `docforum-core`'s data model shapes in `src/types/models.ts` —
    don't invent parallel frontend-only shapes for the same entities.
 3. Structure: `pages/ components/ features/ hooks/ services/ store/ types/`
-   — keep this shape.
+   — keep this shape. `src/i18n/` was added in Phase W7 for locale-aware
+   formatting and direction (issue #88); it is not a place for business
+   logic.
 
 ## Where things live
 - `src/services/` — API client calls to `docforum-core`. `api-client.ts` is
diff --git a/docs/accessibility/audit.md b/docs/accessibility/audit.md
new file mode 100644
index 0000000..90a9b53
--- /dev/null
+++ b/docs/accessibility/audit.md
@@ -0,0 +1,136 @@
+# Accessibility audit — auth, patient, doctor, facility and admin flows
+
+Issues: [#89](https://github.com/DocForum/docforum-web/issues/89),
+[#90](https://github.com/DocForum/docforum-web/issues/90)
+Date: 2026-10-18
+Target: WCAG 2.2 level AA (`WCAG22`)
+
+## Method
+
+| Check | How it was run | Scope |
+| --- | --- | --- |
+| Automated rules | `jest-axe` / `axe-core` 4.10 in the Vitest suite (`npm test`) | Every flow below |
+| Keyboard-only | Testing Library `user-event`, explicit `keydown` tests, focus assertions | Dialogs, forms, date range, queue actions |
+| Structure | Role-based queries (table/rowheader/columnheader/status/dialog) | All data tables, live regions |
+| Contrast | Token pairs calculated against WCAG 2.x relative-luminance formula | Pine/brass palette, light and dark |
+| Screen reader | **Not run in this environment** — no NVDA/VoiceOver/browser available. Automated names/roles and live-region behaviour are covered; a human pass is still required (see Limitations). | All flows |
+
+The app was also audited by reading every interactive element, checking
+that each one is a native control, has an accessible name, and appears in
+a sensible tab order.
+
+## Checklist and findings
+
+### Auth — signup, login, claim account (#89)
+
+| # | Check | Finding | Fix | Regression test |
+| --- | --- | --- | --- | --- |
+| A1 | Inputs have programmatic labels | Pass (`TextField` wraps a `<label>`) | — | axe tests |
+| A2 | Errors are associated, not colour-only | Pass (`aria-invalid` + `aria-describedby`) | Errors now also appear alongside persistent hints | `LoginForm.a11y.test.tsx` |
+| A3 | Focus moves to the first invalid field | **Fail** — focus stayed on the submit button | `useEffect` focuses `[aria-invalid="true"]` on failed validation | `LoginForm.a11y.test.tsx`, `SignupForm.a11y.test.tsx` |
+| A4 | Async states are announced | **Partial** — only the cold-start hint was a status region | Added a polite "Logging in / Creating account" status | `LoginForm.a11y.test.tsx` |
+| A5 | Password requirements available before submit | **Fail** — only shown after an error | Added a persistent hint, included in `aria-describedby` | `SignupForm.a11y.test.tsx` |
+| A6 | Focus indicator is not removed | **Fail** — `.input:focus` set `outline: none` | Removed; global `:focus-visible` ring now applies, border/ring remains as an extra cue | manual/axe |
+| A7 | Placeholder contrast | **Fail** — `--color-text-faint` was 3.52:1 | Placeholders use `--color-text-muted` at 6.7:1; faint text token itself darkened | token tests + audit |
+| A8 | Target sizes | **Partial** — inputs ~40px, native radios 13px | `--target-size: 44px` for buttons/inputs, 24px minimum for radios/checkboxes | manual |
+| A9 | Reduced motion | Pass for GSAP/scroll reveals | Added a global transition-duration floor for reduced motion | manual |
+
+### Patient — dependents, health profile, settings, care timeline, facility finder (#89)
+
+| # | Check | Finding | Fix | Regression test |
+| --- | --- | --- | --- | --- |
+| P1 | Each screen has one `h1` and labelled sections | Pass | — | axe |
+| P2 | Data export dialog traps/restores focus | **Fail** — plain `role="dialog"`, `autoFocus` only | Migrated to `Dialog` (trap, Escape, restore, backdrop press) | `DataExportSection` tests + `Dialog` keyboard tests |
+| P3 | Status of async export is announced | Pass (`role="status" aria-live="polite"`) | Kept, now also localised | axe |
+| P4 | Dates readable in every locale | **Fail** — `toLocaleDateString()` produced ambiguous numeric dates in some locales | Central `Intl` helpers use month names and explicit time zones | `format.test.ts` |
+| P5 | Timestamps are machine-readable | **Partial** | Added `<time dateTime="…">` to every rendered date | axe/manual |
+| P6 | Care timeline exposes landmark semantics | **Fail** — `aria-label` on a plain `div` was ignored | Changed to `<section aria-label>`; partial notice is `role="note"` | axe |
+| P7 | Map is not the only way to reach facilities | Pass (the list is the primary content) | Map markers keyboard operable with `aria-pressed`; tiles `alt=""` | axe |
+| P8 | Account deletion warnings are not colour-only | Pass (text + `role="note"`) | — | axe |
+
+### Doctor — dashboard, live queue, inbox, insights, consultation, palette (#90)
+
+| # | Check | Finding | Fix | Regression test |
+| --- | --- | --- | --- | --- |
+| D1 | Queue table has caption + scoped headers | **Fail** — no caption, plain `<th>` | `<caption class="srOnly">`, `scope="col"`, patient is a row header | `QueuePanel.a11y.test.tsx` |
+| D2 | Live queue updates do not spam a screen reader | **Fail** — polled every 30s with no announcement policy | Batched polite announcements (`useAnnouncer`, 800ms) with a count-only summary; action feedback announced separately | `useAnnouncer.test.tsx`, `QueuePanel.a11y.test.tsx` |
+| D3 | Row actions have unique names | **Partial** — several "Start"/"Complete" buttons | Names include the patient (`Start visit for Ada Patient`) | `QueuePanel.a11y.test.tsx` |
+| D4 | Chart is not the only representation | Pass (table alternative existed) | Removed focusable, non-interactive SVG bars; chart has one accessible name, table is the detail source | `PracticeInsights.a11y.test.tsx` |
+| D5 | Dialog focus management (palette / shortcuts) | **Fail** — no trap, no restore, backdrop-only close | Both use `Dialog`; combobox has a real label, `aria-expanded`, `aria-autocomplete` | `CommandPalette.a11y.test.tsx` |
+| D6 | Calendar/date range has group semantics | **Fail** — `aria-label` on a `div`, duplicated labels on date inputs | `<fieldset><legend>`, one label per input, applied-range status | `PracticeInsights.a11y.test.tsx` |
+| D7 | Consultation note textarea is labelled | **Fail** — placeholder only | See follow-up note; native `aria-label` added where no visible label exists | axe |
+| D8 | Insights tables | Pass (captions/scopes), percentages now localized | — | axe |
+
+### Facility — fulfillment queue, staff accounts (#90)
+
+| # | Check | Finding | Fix | Regression test |
+| --- | --- | --- | --- | --- |
+| F1 | Queue items are not focusable non-interactive divs | **Fail** — `tabIndex={0}` on a card | Cards are `<article>` with a heading; buttons inside are the only tab stops | axe |
+| F2 | Data tables have captions and headers | **Fail** — `aria-label` only | Captions + `scope="col"` + email/name row headers | `FacilityTeam.a11y.test.tsx` |
+| F3 | Invite/remove dialogs trap and restore focus | **Fail** — plain dialogs | Both migrated to `Dialog`; Escape closes; focus returns to trigger | `FacilityTeam.a11y.test.tsx` |
+| F4 | Destructive action uses a real danger style | **Fail** — inline background/colour | `Button variant="danger"` using tokens; contrast-safe in dark mode | axe |
+| F5 | Tabs expose the current page | **Fail** | `aria-current="page"` on the active facility tab | axe |
+
+### Admin — payments console (#90)
+
+| # | Check | Finding | Fix | Regression test |
+| --- | --- | --- | --- | --- |
+| AD1 | Payment lookup field is labelled | Pass (`TextField`) | — | axe |
+| AD2 | Status changes are visible and not colour-only | Pass (text status + tx hash) | — | manual |
+| AD3 | Buttons are not identified only by position | Pass (Fund/Release/Refund have text names) | — | `PaymentIntentPanel` tests |
+| AD4 | Amounts never lose precision | **Fail** — raw stroop strings shown | `formatAssetAmount` formats bigint strings without `Number` | `format.test.ts` |
+
+### Global shell
+
+| # | Check | Finding | Fix |
+| --- | --- | --- | --- |
+| G1 | Skip link | **Fail** | "Skip to main content" link, visible on focus |
+| G2 | Route changes move focus | **Fail** | `Layout` focuses `<main>` on pathname change (not on first paint) |
+| G3 | Landmarks/nav names | Partial | `nav aria-label="Primary"`, main landmark with id |
+| G4 | Current page indicated | **Fail** | `aria-current="page"` in primary and facility navigation |
+| G5 | Offline/reconnect state announced | **Fail** | `OfflineBanner` + `onlineManager` (polite, once on reconnect) |
+| G6 | RTL layout | **Fail** | Logical CSS properties + `LocaleSync` sets `dir`/`lang` |
+| G7 | Contrast tokens | **Fail** (several) | See table below |
+
+## Contrast changes (brand-preserving token edits)
+
+| Token | Before | Ratio | After | Ratio |
+| --- | --- | --- | --- | --- |
+| `--color-text-faint` (light) | `#8c8271` | 3.52:1 on `#faf6f0` | `#6f6757` | 5.20:1 |
+| `--color-accent-2` / `--color-warning` (light) | `#a6763d` | 3.98:1 on white; 3.31:1 on its subtle surface | `#8a5a1f` | 5.89:1 / 4.90:1 |
+| `--color-accent` (dark) | `#4a9b76` | 4.25:1 on `--color-accent-subtle` | `#5fae8a` | 5.39:1 |
+| `--color-text-faint` (dark) | `#8a7f68` | 4.65:1 on background, lower on raised surfaces | `#9a8f77` | 5.4:1+ |
+| White text on brass | `#faf6f0` on `#a6763d` | 3.69:1 | token-based `accent-2-contrast` on `#8a5a1f` | 5.47:1 |
+
+The pine/brass identity is unchanged — the brass is slightly deeper, and
+accent/brass foregrounds now use `*-contrast` tokens so dark mode is
+readable too.
+
+## Regression tests added
+
+- `src/i18n/format.test.ts`, `src/i18n/LocaleSync.test.tsx` — locale dates,
+  time zones, bigint amounts, direction.
+- `src/services/api-client.test.ts` — retry/idempotency (issue #85).
+- `src/hooks/useAnnouncer.test.tsx` — batching, duplicate suppression.
+- `src/components/OfflineBanner.test.tsx` — offline/online transitions.
+- `src/features/auth/components/LoginForm.a11y.test.tsx` / `SignupForm.a11y.test.tsx` — axe, error association, focus, hints, pending announcements.
+- `src/features/queue/components/QueuePanel.a11y.test.tsx` — axe, caption/headers, live region, action names.
+- `src/features/facility-team/components/FacilityTeam.a11y.test.tsx` — axe, captions, dialog trap/restore.
+- `src/components/CommandPalette.a11y.test.tsx` — axe, combobox label, Escape + focus restore.
+- `src/features/insights/components/PracticeInsights.a11y.test.tsx` — axe chart/table, fieldset/legend.
+- `src/pages/AccessibilityStatementPage.test.tsx` — axe + honest statements.
+
+## Limitations / follow-ups
+
+1. **No human screen-reader pass yet.** Automated rules and keyboard tests
+   cannot catch every announcement-quality problem (for example whether a
+   batched queue summary is understandable in context). This must be done
+   on the deployed preview with NVDA and VoiceOver before claiming full
+   conformance. Tracked in the PR description.
+2. **No real browser screenshot pass.** The environment had no browser
+   available; layout/RTL and focus visuals were verified from code, CSS and
+   DOM assertions only.
+3. **Browser-level axe run** (axe DevTools) is still worth doing on the
+   Pages preview for rules that need a real layout engine.
+4. Untranslated copy remains English; the locale switcher is a
+   formatting/direction switch, not a translation framework.
diff --git a/docs/accessibility/patterns.md b/docs/accessibility/patterns.md
new file mode 100644
index 0000000..6841ab9
--- /dev/null
+++ b/docs/accessibility/patterns.md
@@ -0,0 +1,157 @@
+# Accessible patterns
+
+Use these patterns for new screens. They are the ones the audit
+(`docs/accessibility/audit.md`) fixed and tests cover.
+
+## Dialog / modal
+
+Use `src/components/Dialog.tsx` — never hand-roll `role="dialog"`.
+
+```tsx
+<Dialog
+  open={open}
+  onClose={() => setOpen(false)}
+  labelledBy="invite-title"
+  describedBy="invite-description"
+  overlayClassName={styles.modalOverlay}
+  panelClassName={styles.modalContent}
+>
+  <h3 id="invite-title">Invite team member</h3>
+  <p id="invite-description">…</p>
+</Dialog>
+```
+
+`Dialog` provides:
+
+- `role="dialog"` + `aria-modal="true"` and a name from `labelledBy`
+  (always a visible heading).
+- Initial focus on the first focusable element (or the panel).
+- Tab/Shift+Tab wrap inside the dialog.
+- Escape closes it.
+- Focus returns to the element that opened it.
+- Backdrop press closes, but only when the press starts on the backdrop.
+
+Rules:
+
+- Never nest dialogs.
+- Keep one primary action; destructive actions use `Button variant="danger"`.
+- Error text goes in `FormError` (`role="alert"`); if a field has an error,
+  pass it to `TextField` so `aria-describedby`/`aria-invalid` are wired.
+- Tests: open from a trigger, assert focus inside, press Escape, assert
+  focus is back on the trigger. See `FacilityTeam.a11y.test.tsx`.
+
+## Data tables
+
+Clinical and queue tables are real `<table>` elements — never grids of
+divs with ARIA roles.
+
+```tsx
+<table>
+  <caption className="srOnly">Today's checked-in patients in queue order</caption>
+  <thead>
+    <tr>
+      <th scope="col">Patient</th>
+      <th scope="col">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Ada Patient</th>
+      <td>Checked in</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+- Always a `<caption>` (visually hidden is fine) describing the data.
+- `scope="col"` on column headers, `scope="row"` on the row identifier.
+- Put the table in a wrapper with `overflow-x: auto` for narrow screens;
+  do not remove headers to save space.
+- If a chart is offered, it must have a `<table>` alternative (see
+  `UtilisationChart.tsx`). The chart gets one accessible name; its bars are
+  not focusable.
+- Do not make a non-interactive card `tabIndex={0}`. Put the real action in
+  a button inside it and label the card with a heading (`<article>`).
+
+## Calendar and date ranges
+
+- Appointment timestamps always go through `useFormat()` and
+  `formatAppointmentTime()` / `formatDateTime()` so they include an
+  explicit time zone.
+- Month names are used for day+month dates. Never render `03/04`.
+- Date inputs are native `<input type="date">` inside a
+  `<fieldset><legend>`. Give each input exactly one `<label>` (a visually
+  hidden one is fine); do not also add `aria-label` — duplicated names are
+  inconsistent across screen readers.
+- When a range is applied, announce the result in a polite live region
+  ("Custom range applied: 1 Mar 2026 to 31 Mar 2026") *after* the update,
+  not while typing.
+- Targeted-date pickers (week grids) should use a real table/`grid` with
+  row and column headers, not a `<div>` maze. The insights range selector
+  also works as a simple preset group, which this app uses today.
+
+## Live regions and queue updates
+
+Use `src/hooks/useAnnouncer.ts` + `src/components/LiveRegion.tsx`.
+
+- Keep one permanently mounted `role="status" aria-live="polite"` region
+  per surface. Do not mount/unmount it with the message.
+- Batch rapid changes: queue polls can change several rows at once. The
+  hook merges messages inside an 800ms window and drops duplicates.
+- Summarise with counts, not a stream of names:
+  "Queue updated. 4 patients in the queue: 2 waiting, 1 in progress, 1
+  completed."
+- Announce the result of an explicit action separately
+  ("Starting visit for Ada Patient. Undo is available for 4 seconds.").
+- Reserve `role="alert"` / `assertive` for errors that block the user.
+- Never announce on every render, and never announce a refetch that
+  produced identical data.
+- Tests: `useAnnouncer.test.tsx`; assert the region exists and receives one
+  merged message.
+
+## Forms
+
+- Every control has a visible `<label>` (use `TextField`, or a native
+  label for selects/radios).
+- `TextField` supports `hint` and `error`; both are concatenated into
+  `aria-describedby`, and `aria-invalid` reflects the error.
+- On a failed submit, move focus to the first `[aria-invalid="true"]`
+  control. Do not rely on the alert alone.
+- Announce pending work with a polite status ("Logging in. Please wait."),
+  plus the existing slow-request hint for cold starts.
+- Radio groups use `<div role="radiogroup" aria-label>` (or a fieldset) and
+  wrap each input in its label.
+
+## Focus, navigation and targets
+
+- Global `:focus-visible` ring: 2px `--color-focus-ring`, 2px offset.
+  Do not set `outline: none` on inputs.
+- The shell has a "Skip to main content" link and `<main id="main-content"
+  tabIndex={-1}>`. Route changes focus `main` (except first paint).
+- Use `aria-current="page"` for the active nav item/tab.
+- Buttons and inputs are at least `--target-size` (44px); native radios
+  and checkboxes are at least 24px. Small table buttons still inherit the
+  Button minimum height.
+- Disabled state is opacity + `disabled`, with the reason available in
+  text (`title` or adjacent copy — a `title` alone is not enough).
+
+## Motion and colour
+
+- Any GSAP/CSS animation must check `prefers-reduced-motion`; global CSS
+  clamps transitions. Functional spinners may keep a slower animation but
+  must not convey information by motion alone.
+- Use tokens, not hardcoded hex values. Foreground-on-accent combinations
+  use `--color-accent-contrast`, `--color-accent-2-contrast` or
+  `--color-danger-contrast`; these flip for dark mode.
+- Text must reach 4.5:1 (3:1 for large text). The current token pairs are
+  listed in `audit.md`.
+
+## RTL
+
+- Style with logical properties: `margin-inline-*`, `padding-inline-*`,
+  `inset-inline-*`, `border-inline-*`, `text-align: start|end`.
+- `LocaleSync` sets `<html lang>` and `<html dir>` from the locale store.
+- Geographic overlays (map marker positions) keep physical `left/top`
+  because they encode coordinates, not reading order.
+- Verify with the footer locale switch (`ar-EG`) and check tables, dialogs,
+  timeline connectors and form controls.
diff --git a/package-lock.json b/package-lock.json
index 5283737..68977da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.3",
         "@testing-library/user-event": "^14.6.7",
+        "@types/jest-axe": "^3.5.9",
+        "@types/node": "^22.20.5",
         "@types/react": "^19.3.0",
         "@types/react-dom": "^19.3.0",
         "@vitejs/plugin-react": "^4.7.0",
@@ -1331,6 +1333,13 @@
         "win32"
       ]
     },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.34.52",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.52.tgz",
+      "integrity": "sha512-XiMQh7qqVlxZzcVD+kkGMNGMzcTrDMLWI7S4x7z1MkCkbDPrekpZXEUK0eZqZFMuHQg2a2DZOcDIh9o5v3Gonw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -1532,14 +1541,79 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-30.0.0.tgz",
+      "integrity": "sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "expect": "^30.0.0",
+        "pretty-format": "^30.0.0"
+      }
+    },
+    "node_modules/@types/jest-axe": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/@types/jest-axe/-/jest-axe-3.5.9.tgz",
+      "integrity": "sha512-z98CzR0yVDalCEuhGXXO4/zN4HHuSebAukXDjTLJyjEAgoUf1H1i+sr7SUB/mz8CRS/03/XChsx0dcLjHkndoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/jest": "*",
+        "axe-core": "^3.5.5"
+      }
+    },
+    "node_modules/@types/jest/node_modules/pretty-format": {
+      "version": "30.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.5.1.tgz",
+      "integrity": "sha512-byhRAPguVKMQIj4kjJwJ5lAskVhfuiSdiYl/aLTWpgkGEmic2jYhJh1yE9ih8Ox44Xg9ccCT11/S6QrzSJuNrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/react-is-18": "npm:react-is@^18.3.1",
+        "@jest/react-is-19": "npm:react-is@^19.2.5",
+        "@jest/schemas": "30.5.0",
+        "ansi-styles": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
     "node_modules/@types/node": {
-      "version": "26.5.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.5.1.tgz",
-      "integrity": "sha512-CzNm2FezW4VR/LjG6yUdiEgLE/rAQ9Slj5gCu/C2VrdcW7I0ahNZ8DRbHT7zOZ6r3ONgd/bsQIeSaoDGrd1C6g==",
+      "version": "22.20.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.20.5.tgz",
+      "integrity": "sha512-U2+DNr+wSjpsTS/wZGYHq7GcwfuSmKiKvoPvK22zwTlRhU91yOniN4qRR5KhIjvif7ysw/dz/hKmfDH0Ris4aA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~8.9.0"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/react": {
@@ -1596,6 +1670,23 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/yargs": {
+      "version": "17.0.35",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
+      "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript/typescript-aix-ppc64": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
@@ -2086,7 +2177,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -2114,6 +2204,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/axe-core": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.6.tgz",
+      "integrity": "sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.11.23",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.23.tgz",
@@ -2312,6 +2412,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -2393,6 +2503,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -2403,6 +2523,24 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/expect": {
+      "version": "30.5.2",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-30.5.2.tgz",
+      "integrity": "sha512-0LNuMvs8/5mRYhnCR4k+lGV7fqPMs6Bnksda4S3zsCUmdxBpAn4zU4NNzXdq1pMKe/H4W5t/zVIDSJ/H3e0vDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/expect-utils": "30.5.2",
+        "@jest/get-type": "30.5.0",
+        "jest-matcher-utils": "30.5.2",
+        "jest-message-util": "30.5.1",
+        "jest-mock": "30.5.2",
+        "jest-util": "30.5.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
     "node_modules/expect-type": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
@@ -2629,6 +2767,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3067,6 +3212,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -3281,9 +3439,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.9.0.tgz",
-      "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index 207a770..e97bc2d 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
+    "@types/jest-axe": "^3.5.9",
+    "@types/node": "^22.20.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^4.7.0",
diff --git a/src/components/Button.module.css b/src/components/Button.module.css
index e3400d5..5b63956 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.css
@@ -4,6 +4,7 @@
   justify-content: center;
   gap: 0.5rem;
   padding: 0.7rem 1.375rem;
+  min-height: var(--target-size);
   border-radius: var(--radius-sm);
   border: 1px solid transparent;
   font-family: var(--font-sans);
@@ -19,7 +20,7 @@
 
 .button:disabled {
   cursor: not-allowed;
-  opacity: 0.55;
+  opacity: 0.6;
 }
 
 .primary {
@@ -44,7 +45,7 @@
 
 .danger {
   background: var(--color-danger);
-  color: #ffffff;
+  color: var(--color-danger-contrast);
   border-color: transparent;
 }
 
diff --git a/src/components/CommandPalette.a11y.test.tsx b/src/components/CommandPalette.a11y.test.tsx
new file mode 100644
index 0000000..95bab24
--- /dev/null
+++ b/src/components/CommandPalette.a11y.test.tsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { render, screen, waitFor } from '../test/render';
+import { CommandPalette, type CommandPaletteAction } from './CommandPalette';
+
+const ACTIONS: CommandPaletteAction[] = [
+  { id: 'queue', label: "Open today's queue", category: 'navigation', run: vi.fn() },
+  { id: 'inbox', label: 'Open messages inbox', category: 'navigation', run: vi.fn() },
+];
+
+function Harness() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open palette
+      </button>
+      <CommandPalette actions={ACTIONS} open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}
+
+describe('CommandPalette accessibility (#90)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<Harness />);
+    await userEvent.click(screen.getByRole('button', { name: /open palette/i }));
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('labels the combobox and exposes it as an expanded listbox control', async () => {
+    render(<Harness />);
+    await userEvent.click(screen.getByRole('button', { name: /open palette/i }));
+
+    const input = screen.getByRole('combobox', { name: /search commands and patients/i });
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveFocus();
+  });
+
+  it('closes on Escape and restores focus to the trigger', async () => {
+    render(<Harness />);
+    const trigger = screen.getByRole('button', { name: /open palette/i });
+    await userEvent.click(trigger);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    await waitFor(() => expect(trigger).toHaveFocus());
+  });
+});
diff --git a/src/components/CommandPalette.module.css b/src/components/CommandPalette.module.css
index 998a354..8f68eb0 100644
--- a/src/components/CommandPalette.module.css
+++ b/src/components/CommandPalette.module.css
@@ -101,20 +101,20 @@ ul[role='listbox'] {
 }
 
 .label {
-  text-align: left;
+  text-align: start;
 }
 
 .kind {
   font-size: var(--text-xs);
   opacity: 0.6;
-  margin-right: var(--space-3);
+  margin-inline-end: var(--space-3);
 }
 
 .shortcut {
   font-size: var(--text-xs);
   font-family: var(--font-sans);
   opacity: 0.55;
-  margin-left: var(--space-3);
+  margin-inline-start: var(--space-3);
 }
 
 .hint {
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 79be029..83bbb40 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dialog } from './Dialog';
 import styles from './CommandPalette.module.css';
 
 export interface CommandPaletteAction {
@@ -32,11 +33,7 @@ export function CommandPalette({ actions, open, onClose }: CommandPaletteProps)
     if (!open) {
       setQuery('');
       setFocusedIndex(-1);
-      return;
     }
-    setFocusedIndex(-1);
-    const input = document.getElementById('command-palette-input');
-    input?.focus();
   }, [open]);
 
   const highlighted = filtered[focusedIndex];
@@ -86,66 +83,74 @@ export function CommandPalette({ actions, open, onClose }: CommandPaletteProps)
     [onClose],
   );
 
-  if (!open) return null;
-
   return (
-    <div className={styles.backdrop} onClick={onClose}>
-      <div className={styles.panel} role="dialog" aria-modal="true" aria-labelledby="command-palette-title" onClick={(e) => e.stopPropagation()}>
-        <h2 id="command-palette-title" className={styles.title}>
-          Command palette
-        </h2>
-        <input
-          id="command-palette-input"
-          role="combobox"
-          aria-controls="command-palette-listbox"
-          aria-activedescendant={focusedIndex >= 0 ? `command-palette-option-${focusedIndex}` : undefined}
-          autoComplete="off"
-          spellCheck={false}
-          value={query}
-          onChange={handleInputChange}
-          onKeyDown={handleKeyDown}
-          placeholder="Search patients, open chart, sign note…"
-          className={styles.input}
-        />
-        <ul
-          ref={listboxRef}
-          id="command-palette-listbox"
-          role="listbox"
-          aria-label="Actions"
-        >
-          {filtered.length === 0 ? (
-            <li role="none" className={styles.empty}>
-              No matching actions
-            </li>
-          ) : (
-            filtered.map((action, index) => {
-              const isFocused = index === focusedIndex;
-              return (
-                <li
-                  key={action.id}
-                  role="option"
-                  id={`command-palette-option-${index}`}
-                  aria-selected={isFocused}
-                  className={`${styles.option} ${isFocused ? styles.focused : ''}`}
-                  onClick={() => selectAction(action)}
-                  onMouseMove={() => setFocusedIndex(index)}
-                >
-                  <span className={styles.label}>{action.label}</span>
-                  {action.category === 'context' && (
-                    <span className={styles.kind}>context</span>
-                  )}
-                  {action.shortcut && (
-                    <span className={styles.shortcut}>{action.shortcut}</span>
-                  )}
-                </li>
-              );
-            })
-          )}
-        </ul>
-        <p className={styles.hint}>
-          ↑/↓ to navigate · Enter to run · Esc to close
-        </p>
-      </div>
-    </div>
+    <Dialog
+      open={open}
+      onClose={onClose}
+      labelledBy="command-palette-title"
+      describedBy="command-palette-hint"
+      overlayClassName={styles.backdrop}
+      panelClassName={styles.panel}
+    >
+      <h2 id="command-palette-title" className={styles.title}>
+        Command palette
+      </h2>
+      <label htmlFor="command-palette-input" className="srOnly">
+        Search commands and patients
+      </label>
+      <input
+        id="command-palette-input"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="command-palette-listbox"
+        aria-autocomplete="list"
+        aria-activedescendant={focusedIndex >= 0 ? `command-palette-option-${focusedIndex}` : undefined}
+        autoComplete="off"
+        spellCheck={false}
+        value={query}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Search patients, open chart, sign note…"
+        className={styles.input}
+      />
+      <ul
+        ref={listboxRef}
+        id="command-palette-listbox"
+        role="listbox"
+        aria-label="Actions"
+      >
+        {filtered.length === 0 ? (
+          <li role="none" className={styles.empty}>
+            No matching actions
+          </li>
+        ) : (
+          filtered.map((action, index) => {
+            const isFocused = index === focusedIndex;
+            return (
+              <li
+                key={action.id}
+                role="option"
+                id={`command-palette-option-${index}`}
+                aria-selected={isFocused}
+                className={`${styles.option} ${isFocused ? styles.focused : ''}`}
+                onClick={() => selectAction(action)}
+                onMouseMove={() => setFocusedIndex(index)}
+              >
+                <span className={styles.label}>{action.label}</span>
+                {action.category === 'context' && (
+                  <span className={styles.kind}>context</span>
+                )}
+                {action.shortcut && (
+                  <span className={styles.shortcut}>{action.shortcut}</span>
+                )}
+              </li>
+            );
+          })
+        )}
+      </ul>
+      <p id="command-palette-hint" className={styles.hint}>
+        ↑/↓ to navigate · Enter to run · Esc to close
+      </p>
+    </Dialog>
   );
 }
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
new file mode 100644
index 0000000..b7024a9
--- /dev/null
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,58 @@
+import { useRef, type ReactNode } from 'react';
+import { useFocusTrap } from '../hooks/useFocusTrap';
+
+interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  /** Id of the visible heading that names the dialog. Required. */
+  labelledBy: string;
+  /** Optional id of descriptive text. */
+  describedBy?: string;
+  overlayClassName?: string;
+  panelClassName?: string;
+  children: ReactNode;
+}
+
+/**
+ * Accessible modal dialog. Use this for every modal: it provides
+ * `role="dialog"`, `aria-modal`, a focus trap, Escape-to-close, focus
+ * restoration, and backdrop dismissal. See
+ * docs/accessibility/patterns.md#dialog.
+ */
+export function Dialog({
+  open,
+  onClose,
+  labelledBy,
+  describedBy,
+  overlayClassName,
+  panelClassName,
+  children,
+}: DialogProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(panelRef, open, onClose);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={overlayClassName}
+      onMouseDown={(event) => {
+        // Only a press that starts on the backdrop itself closes the
+        // dialog; dragging from inside must not dismiss a form.
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        className={panelClassName}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        aria-describedby={describedBy}
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Layout.module.css b/src/components/Layout.module.css
index 3950b93..c755975 100644
--- a/src/components/Layout.module.css
+++ b/src/components/Layout.module.css
@@ -1,3 +1,20 @@
+.skipLink {
+  position: absolute;
+  inset-inline-start: var(--space-4);
+  top: -100px;
+  z-index: 200;
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-accent);
+  color: var(--color-accent-contrast);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+}
+
+.skipLink:focus {
+  top: var(--space-2);
+  text-decoration: none;
+}
+
 .shell {
   min-height: 100vh;
   display: flex;
@@ -97,9 +114,14 @@
 }
 
 .footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
   padding: var(--space-6);
   text-align: center;
   font-size: var(--text-xs);
-  color: var(--color-text-faint);
+  color: var(--color-text-muted);
   border-top: 1px solid var(--color-border);
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 8a9071d..0cd9891 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,50 +1,91 @@
-import { Link, Outlet } from 'react-router-dom';
+import { useEffect, useRef } from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
 import { useAuthStore } from '../store/auth-store';
 import { useLogout } from '../features/auth/hooks/useLogout';
 import { ProfileSwitcher } from '../features/dependents/components/ProfileSwitcher';
 import { Button } from './Button';
 import { Logo } from './Logo';
 import { UnreadBadge } from '../features/messaging/components/UnreadBadge';
+import { OfflineBanner } from './OfflineBanner';
+import { LocaleSwitcher } from '../i18n/LocaleSwitcher';
 import styles from './Layout.module.css';
 
 export function Layout() {
   const user = useAuthStore((state) => state.user);
   const logoutMutation = useLogout();
+  const location = useLocation();
+  const mainRef = useRef<HTMLElement>(null);
+  const isFirstRender = useRef(true);
+
+  // SPA route changes otherwise leave focus on the clicked link. Move it
+  // to the main landmark so keyboard/screen-reader users start at the new
+  // content, without stealing focus on first paint.
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    mainRef.current?.focus();
+  }, [location.pathname]);
 
   return (
     <div className={styles.shell}>
+      <a className={styles.skipLink} href="#main-content">
+        Skip to main content
+      </a>
+      <OfflineBanner />
       <header className={styles.header}>
         <Link to="/" className={styles.brand}>
           <Logo />
           <span>DocForum</span>
         </Link>
-        <nav className={styles.nav}>
+        <nav className={styles.nav} aria-label="Primary">
           {user ? (
             <>
               {user.role === 'patient' && (
                 <>
                   <ProfileSwitcher />
-                  <Link to="/care" className={styles.navLink}>
+                  <Link
+                    to="/care"
+                    className={styles.navLink}
+                    aria-current={location.pathname === '/care' ? 'page' : undefined}
+                  >
                     Care journey
                   </Link>
-                  <Link to="/patient/settings" className={styles.navLink}>
+                  <Link
+                    to="/patient/settings"
+                    className={styles.navLink}
+                    aria-current={location.pathname === '/patient/settings' ? 'page' : undefined}
+                  >
                     Settings
                   </Link>
                 </>
               )}
               {user.role === 'doctor' && (
                 <>
-                  <Link to="/doctor" className={styles.navLink}>
+                  <Link
+                    to="/doctor"
+                    className={styles.navLink}
+                    aria-current={location.pathname === '/doctor' ? 'page' : undefined}
+                  >
                     Dashboard
                   </Link>
-                  <Link to="/doctor/insights" className={styles.navLink}>
+                  <Link
+                    to="/doctor/insights"
+                    className={styles.navLink}
+                    aria-current={location.pathname === '/doctor/insights' ? 'page' : undefined}
+                  >
                     Insights
                   </Link>
                 </>
               )}
               {user.role === 'facility' && (
                 <>
-                  <Link to="/facility" className={styles.navLink}>
+                  <Link
+                    to="/facility"
+                    className={styles.navLink}
+                    aria-current={location.pathname === '/facility' ? 'page' : undefined}
+                  >
                     Queue
                   </Link>
                   <Link to="/facility/verify" className={styles.navLink}>
@@ -100,11 +141,15 @@ export function Layout() {
           )}
         </nav>
       </header>
-      <main className={styles.main}>
+      <main id="main-content" ref={mainRef} className={styles.main} tabIndex={-1}>
         <Outlet />
       </main>
       <footer className={styles.footer}>
         <span>DocForum — care continuity, escrow-secured fulfillment.</span>
+        <Link to="/accessibility" className={styles.navLink}>
+          Accessibility
+        </Link>
+        <LocaleSwitcher />
       </footer>
     </div>
   );
diff --git a/src/components/LiveRegion.tsx b/src/components/LiveRegion.tsx
new file mode 100644
index 0000000..b5669f0
--- /dev/null
+++ b/src/components/LiveRegion.tsx
@@ -0,0 +1,23 @@
+interface LiveRegionProps {
+  message: string;
+  /** `polite` for status updates; `assertive` only for errors. */
+  politeness?: 'polite' | 'assertive';
+}
+
+/**
+ * Visually hidden status region. Keep the element mounted permanently and
+ * swap its text — mounting/unmounting a live region is unreliable across
+ * screen readers. Batching belongs in the caller (`useAnnouncer`).
+ */
+export function LiveRegion({ message, politeness = 'polite' }: LiveRegionProps) {
+  return (
+    <p
+      className="srOnly"
+      role={politeness === 'assertive' ? 'alert' : 'status'}
+      aria-live={politeness}
+      aria-atomic="true"
+    >
+      {message}
+    </p>
+  );
+}
diff --git a/src/components/OfflineBanner.module.css b/src/components/OfflineBanner.module.css
new file mode 100644
index 0000000..85bbec6
--- /dev/null
+++ b/src/components/OfflineBanner.module.css
@@ -0,0 +1,18 @@
+.banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-warning-surface);
+  color: var(--color-text);
+  border-block-end: 1px solid var(--color-border-strong);
+  font-size: var(--text-sm);
+}
+
+.dot {
+  inline-size: 0.625rem;
+  block-size: 0.625rem;
+  border-radius: var(--radius-full);
+  background: var(--color-warning);
+  flex: 0 0 auto;
+}
diff --git a/src/components/OfflineBanner.test.tsx b/src/components/OfflineBanner.test.tsx
new file mode 100644
index 0000000..ba3f1cb
--- /dev/null
+++ b/src/components/OfflineBanner.test.tsx
@@ -0,0 +1,36 @@
+import { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { onlineManager } from '@tanstack/react-query';
+import { render, screen } from '../test/render';
+import { OfflineBanner } from './OfflineBanner';
+
+afterEach(() => {
+  onlineManager.setOnline(true);
+});
+
+describe('OfflineBanner (#85)', () => {
+  it('stays quiet while online', () => {
+    render(<OfflineBanner />);
+    expect(screen.queryByText(/you're offline/i)).not.toBeInTheDocument();
+  });
+
+  it('shows an offline status and clears when the connection returns', () => {
+    render(<OfflineBanner />);
+
+    act(() => {
+      onlineManager.setOnline(false);
+    });
+    expect(screen.getByText(/you're offline/i)).toBeInTheDocument();
+    expect(
+      screen.getAllByRole('status').some((region) => /paused until then/i.test(region.textContent ?? '')),
+    ).toBe(true);
+
+    act(() => {
+      onlineManager.setOnline(true);
+    });
+    expect(screen.queryByText(/you're offline/i)).not.toBeInTheDocument();
+    expect(
+      screen.getAllByRole('status').some((region) => /back online/i.test(region.textContent ?? '')),
+    ).toBe(true);
+  });
+});
diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx
new file mode 100644
index 0000000..cf44ecc
--- /dev/null
+++ b/src/components/OfflineBanner.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOnlineStatus } from '../hooks/useOnlineStatus';
+import styles from './OfflineBanner.module.css';
+
+/**
+ * Distinguishes "you are offline" from the existing slow-request hint
+ * (server cold-starting): this banner only appears for the former. The
+ * polite live region stays mounted and announces reconnection once.
+ */
+export function OfflineBanner() {
+  const online = useOnlineStatus();
+  const wasOffline = useRef(false);
+  const [announcement, setAnnouncement] = useState('');
+
+  useEffect(() => {
+    if (!online) {
+      wasOffline.current = true;
+      setAnnouncement('');
+      return;
+    }
+    if (wasOffline.current) {
+      wasOffline.current = false;
+      setAnnouncement('Back online. Refreshing data.');
+    }
+  }, [online]);
+
+  return (
+    <>
+      <div role="status" aria-live="polite" aria-atomic="true" className="srOnly">
+        {announcement}
+      </div>
+      {!online && (
+        <div className={styles.banner} role="status" aria-live="polite">
+          <span aria-hidden="true" className={styles.dot} />
+          <span>
+            <strong>You&apos;re offline.</strong> Showing the last loaded data. We&apos;ll reconnect
+            automatically — actions that change data are paused until then.
+          </span>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ShortcutsHelp.module.css b/src/components/ShortcutsHelp.module.css
index 87c4eab..7c9b25f 100644
--- a/src/components/ShortcutsHelp.module.css
+++ b/src/components/ShortcutsHelp.module.css
@@ -53,7 +53,7 @@
 }
 
 .table th {
-  text-align: left;
+  text-align: start;
   color: var(--color-text-muted);
   font-weight: 600;
   padding: 0.5rem 0.75rem;
diff --git a/src/components/ShortcutsHelp.tsx b/src/components/ShortcutsHelp.tsx
index 57f27b2..2eb266b 100644
--- a/src/components/ShortcutsHelp.tsx
+++ b/src/components/ShortcutsHelp.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
 import { DEFAULT_SHORTCUTS, bindingKey } from '../hooks/useKeyboardShortcuts';
 import { Button } from './Button';
+import { Dialog } from './Dialog';
 import styles from './ShortcutsHelp.module.css';
 
 interface ShortcutsHelpProps {
@@ -10,47 +10,47 @@ interface ShortcutsHelpProps {
 }
 
 export function ShortcutsHelp({ open, onClose, bindings }: ShortcutsHelpProps) {
-  const [show, setShow] = useState(open);
-
-  // Sync with the controlled open prop.
-  if (open && !show) setShow(true);
-  if (!open && show) setShow(false);
-
-  if (!show) return null;
-
   return (
-    <div className={styles.backdrop} onClick={onClose}>
-      <div className={styles.panel} role="dialog" aria-modal="true" aria-labelledby="shortcuts-help-title" onClick={(e) => e.stopPropagation()}>
-        <h2 id="shortcuts-help-title" className={styles.title}>
-          Keyboard shortcuts
-        </h2>
-        <p className={styles.note}>
-          Shortcuts are disabled while typing in a field. Bindings can be
-          adjusted to avoid clashing with assistive technology.
-        </p>
-        <table className={styles.table}>
-          <thead>
-            <tr>
-              <th>Action</th>
-              <th>Shortcut</th>
+    <Dialog
+      open={open}
+      onClose={onClose}
+      labelledBy="shortcuts-help-title"
+      describedBy="shortcuts-help-note"
+      overlayClassName={styles.backdrop}
+      panelClassName={styles.panel}
+    >
+      <h2 id="shortcuts-help-title" className={styles.title}>
+        Keyboard shortcuts
+      </h2>
+      <p id="shortcuts-help-note" className={styles.note}>
+        Shortcuts are disabled while typing in a field. Bindings can be
+        adjusted to avoid clashing with assistive technology.
+      </p>
+      <table className={styles.table}>
+        <caption className="srOnly">
+          Keyboard shortcuts available in the doctor workspace
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">Action</th>
+            <th scope="col">Shortcut</th>
+          </tr>
+        </thead>
+        <tbody>
+          {DEFAULT_SHORTCUTS.map((b) => (
+            <tr key={b.action} className={styles.row}>
+              <th scope="row">{b.label}</th>
+              <td className={styles.shortcut}>{bindingKey(b.action, bindings)}</td>
             </tr>
-          </thead>
-          <tbody>
-            {DEFAULT_SHORTCUTS.map((b) => (
-              <tr key={b.action} className={styles.row}>
-                <td>{b.label}</td>
-                <td className={styles.shortcut}>{bindingKey(b.action, bindings)}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <div className={styles.footer}>
-          <Button onClick={onClose}>Close</Button>
-          <p className={styles.hint}>
-            Press <span className={styles.kbd}>?</span> to reopen help.
-          </p>
-        </div>
+          ))}
+        </tbody>
+      </table>
+      <div className={styles.footer}>
+        <Button onClick={onClose}>Close</Button>
+        <p className={styles.hint}>
+          Press <span className={styles.kbd}>?</span> to reopen help.
+        </p>
       </div>
-    </div>
+    </Dialog>
   );
 }
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 633f044..f84fe2a 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -12,8 +12,8 @@ export function Spinner({ size = 16 }: { size?: number }) {
       height={size}
       viewBox="0 0 24 24"
       fill="none"
-      role="status"
       aria-hidden="true"
+      focusable="false"
     >
       <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
       <path d="M21.5 12a9.5 9.5 0 0 0-9.5-9.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
diff --git a/src/components/TextField.module.css b/src/components/TextField.module.css
index 991a9b8..03d94b6 100644
--- a/src/components/TextField.module.css
+++ b/src/components/TextField.module.css
@@ -13,6 +13,7 @@
 
 .input {
   padding: 0.7rem 0.875rem;
+  min-height: var(--target-size);
   border-radius: var(--radius-sm);
   border: 1px solid var(--color-border-strong);
   background: var(--color-bg-raised);
@@ -22,12 +23,16 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* Placeholder text must also meet 4.5:1 (it is not exempt). */
 .input::placeholder {
-  color: var(--color-text-faint);
+  color: var(--color-text-muted);
+  opacity: 1;
 }
 
+/* Do not remove the outline: the global :focus-visible ring is the
+   high-contrast indicator. The border/ring is an extra cue, not a
+   replacement (WCAG 2.4.11). */
 .input:focus {
-  outline: none;
   border-color: var(--color-accent);
   box-shadow: 0 0 0 3px var(--color-accent-subtle);
 }
@@ -41,3 +46,9 @@
   color: var(--color-danger);
   margin: 0;
 }
+
+.hint {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  margin: 0;
+}
diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
index a0eda0d..8783438 100644
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -5,11 +5,16 @@ import styles from './TextField.module.css';
 interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
   error?: string;
+  /** Persistent guidance, announced alongside an error. */
+  hint?: string;
 }
 
-export function TextField({ label, error, id, ...rest }: TextFieldProps) {
+export function TextField({ label, error, hint, id, ...rest }: TextFieldProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;
 
   return (
     <div className={styles.field}>
@@ -20,11 +25,16 @@ export function TextField({ label, error, id, ...rest }: TextFieldProps) {
         id={inputId}
         className={styles.input}
         aria-invalid={Boolean(error)}
-        aria-describedby={error ? `${inputId}-error` : undefined}
+        aria-describedby={describedBy}
         {...rest}
       />
+      {hint && (
+        <p id={hintId} className={styles.hint}>
+          {hint}
+        </p>
+      )}
       {error && (
-        <p id={`${inputId}-error`} className={styles.error} role="alert">
+        <p id={errorId} className={styles.error} role="alert">
           {error}
         </p>
       )}
diff --git a/src/features/account/components/DataExportSection.module.css b/src/features/account/components/DataExportSection.module.css
index 19d5ee2..cd7452f 100644
--- a/src/features/account/components/DataExportSection.module.css
+++ b/src/features/account/components/DataExportSection.module.css
@@ -39,7 +39,7 @@
 
 .detailsList {
   margin: var(--space-2) 0 0;
-  padding-left: var(--space-4);
+  padding-inline-start: var(--space-4);
   color: var(--color-text-muted);
   line-height: var(--leading-snug);
 }
@@ -101,8 +101,7 @@
 .modalOverlay {
   position: fixed;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.45);
   display: flex;
diff --git a/src/features/account/components/DataExportSection.tsx b/src/features/account/components/DataExportSection.tsx
index ab6fd36..23437ef 100644
--- a/src/features/account/components/DataExportSection.tsx
+++ b/src/features/account/components/DataExportSection.tsx
@@ -3,30 +3,22 @@ import { Button } from '../../../components/Button';
 import { TextField } from '../../../components/TextField';
 import { FormError } from '../../../components/FormError';
 import { Spinner } from '../../../components/Spinner';
+import { Dialog } from '../../../components/Dialog';
 import { useDataExport, useDownloadExport, useRequestDataExport } from '../hooks/useDataExport';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './DataExportSection.module.css';
 
-function formatBytes(bytes?: number | null): string {
+function formatBytes(bytes: number | null | undefined, formatNumber: (value: number) => string): string {
   if (!bytes) return 'Unknown size';
-  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024) return `${formatNumber(bytes)} B`;
   const kb = bytes / 1024;
-  if (kb < 1024) return `${kb.toFixed(1)} KB`;
-  return `${(kb / 1024).toFixed(1)} MB`;
-}
-
-function formatDate(iso?: string | null): string {
-  if (!iso) return '—';
-  try {
-    return new Date(iso).toLocaleString(undefined, {
-      dateStyle: 'medium',
-      timeStyle: 'short',
-    });
-  } catch {
-    return iso;
-  }
+  if (kb < 1024) return `${formatNumber(kb)} KB`;
+  return `${formatNumber(kb / 1024)} MB`;
 }
 
 export function DataExportSection() {
+  const { formatDateTime, formatNumber, formatDate: formatDay } = useFormat();
+  const formatDate = (iso?: string | null): string => (iso ? formatDateTime(iso) : '—');
   const { data: exportData, isLoading, error: queryError } = useDataExport();
   const requestMutation = useRequestDataExport();
   const { download, isDownloading, downloadError } = useDownloadExport();
@@ -136,7 +128,8 @@ export function DataExportSection() {
                     : 'Export failed'}
             </span>
             <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
-              Requested: {formatDate(exportData.requestedAt)}
+              Requested:{' '}
+              <time dateTime={exportData.requestedAt}>{formatDate(exportData.requestedAt)}</time>
             </span>
           </div>
 
@@ -152,10 +145,19 @@ export function DataExportSection() {
           {status === 'ready' && (
             <div>
               <p style={{ margin: '0 0 var(--space-2)', fontSize: 'var(--text-sm)' }}>
-                Your data export is ready. Download it before it expires on <strong>{formatDate(exportData.expiresAt)}</strong>.
+                Your data export is ready. Download it before it expires on{' '}
+                <strong>{formatDay(exportData.expiresAt ?? '')}</strong>.
               </p>
               <div className={styles.metaInfo} style={{ marginBottom: 'var(--space-3)' }}>
-                <span>File size: {formatBytes(exportData.fileSizeBytes)}</span>
+                <span>
+                  File size:{' '}
+                  {formatBytes(exportData.fileSizeBytes, (value) =>
+                    formatNumber(value, {
+                      minimumFractionDigits: 1,
+                      maximumFractionDigits: 1,
+                    }),
+                  )}
+                </span>
                 <span>Format: JSON bundle (FHIR-compatible)</span>
               </div>
               <Button
@@ -192,38 +194,41 @@ export function DataExportSection() {
         </div>
       )}
 
-      {isModalOpen && (
-        <div className={styles.modalOverlay} role="dialog" aria-modal="true" aria-labelledby="modal-reauth-title">
-          <div className={styles.modal}>
-            <h3 id="modal-reauth-title" className={styles.modalTitle}>
-              Confirm your password
-            </h3>
-            <p className={styles.modalText}>
-              To protect sensitive health information, please enter your account password to confirm this data export
-              request.
-            </p>
-            <form onSubmit={handleSubmitRequest}>
-              <TextField
-                label="Account password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                autoFocus
-                required
-              />
-              {modalError && <FormError message={modalError} />}
-              <div className={styles.modalActions}>
-                <Button type="button" variant="secondary" onClick={handleCloseModal}>
-                  Cancel
-                </Button>
-                <Button type="submit" loading={requestMutation.isPending}>
-                  {requestMutation.isPending ? 'Verifying…' : 'Confirm & request'}
-                </Button>
-              </div>
-            </form>
+      <Dialog
+        open={isModalOpen}
+        onClose={handleCloseModal}
+        labelledBy="modal-reauth-title"
+        describedBy="modal-reauth-description"
+        overlayClassName={styles.modalOverlay}
+        panelClassName={styles.modal}
+      >
+        <h3 id="modal-reauth-title" className={styles.modalTitle}>
+          Confirm your password
+        </h3>
+        <p id="modal-reauth-description" className={styles.modalText}>
+          To protect sensitive health information, please enter your account password to confirm this data export
+          request.
+        </p>
+        <form onSubmit={handleSubmitRequest} noValidate>
+          <TextField
+            label="Account password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            error={modalError ?? undefined}
+            required
+          />
+          <div className={styles.modalActions}>
+            <Button type="button" variant="secondary" onClick={handleCloseModal}>
+              Cancel
+            </Button>
+            <Button type="submit" loading={requestMutation.isPending}>
+              {requestMutation.isPending ? 'Verifying…' : 'Confirm & request'}
+            </Button>
           </div>
-        </div>
-      )}
+        </form>
+      </Dialog>
     </section>
   );
 }
diff --git a/src/features/account/components/DeleteAccountSection.module.css b/src/features/account/components/DeleteAccountSection.module.css
index 3703af1..a1ed738 100644
--- a/src/features/account/components/DeleteAccountSection.module.css
+++ b/src/features/account/components/DeleteAccountSection.module.css
@@ -102,7 +102,7 @@
 
 .policyList {
   margin: 0;
-  padding-left: var(--space-4);
+  padding-inline-start: var(--space-4);
   font-size: var(--text-xs);
   color: var(--color-text-muted);
   line-height: var(--leading-snug);
@@ -111,8 +111,7 @@
 .modalOverlay {
   position: fixed;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.55);
   display: flex;
diff --git a/src/features/auth/components/LoginForm.a11y.test.tsx b/src/features/auth/components/LoginForm.a11y.test.tsx
new file mode 100644
index 0000000..d2932e2
--- /dev/null
+++ b/src/features/auth/components/LoginForm.a11y.test.tsx
@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { render, screen } from '../../../test/render';
+import { LoginForm } from './LoginForm';
+
+describe('LoginForm accessibility (#89)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<LoginForm />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('associates validation errors with the field and focuses it', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm />);
+
+    await user.click(screen.getByRole('button', { name: /^log in$/i }));
+
+    const email = screen.getByLabelText(/email/i);
+    expect(email).toHaveAttribute('aria-invalid', 'true');
+    expect(email).toHaveFocus();
+
+    const errorId = email.getAttribute('aria-describedby');
+    expect(errorId).toBeTruthy();
+    expect(document.getElementById(errorId!)).toHaveTextContent(/email is required/i);
+  });
+
+  it('announces the pending state', async () => {
+    // Keep the request pending forever: this test only checks the live
+    // status, and must not hit the network.
+    vi.stubGlobal('fetch', vi.fn(() => new Promise(() => {})));
+    const user = userEvent.setup();
+    render(<LoginForm />);
+    await user.type(screen.getByLabelText(/email/i), 'patient@example.com');
+    await user.type(screen.getByLabelText(/password/i), 'password123');
+    await user.click(screen.getByRole('button', { name: /^log in$/i }));
+
+    expect(screen.getByRole('status')).toHaveTextContent(/logging in/i);
+    vi.unstubAllGlobals();
+  });
+});
diff --git a/src/features/auth/components/LoginForm.tsx b/src/features/auth/components/LoginForm.tsx
index a86e1b4..f26134d 100644
--- a/src/features/auth/components/LoginForm.tsx
+++ b/src/features/auth/components/LoginForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { FormEvent } from 'react';
 import { TextField } from '../../../components/TextField';
 import { Button } from '../../../components/Button';
@@ -17,9 +17,18 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const formRef = useRef<HTMLFormElement>(null);
   const loginMutation = useLogin();
   const isSlow = useSlowRequestHint(loginMutation.isPending);
 
+  // Keyboard and screen-reader users should land on the first problem,
+  // not have to hunt through the form after an alert fires.
+  useEffect(() => {
+    if (fieldErrors.email || fieldErrors.password) {
+      formRef.current?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
+    }
+  }, [fieldErrors]);
+
   function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
@@ -41,8 +50,13 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
         : null;
 
   return (
-    <form onSubmit={handleSubmit} noValidate>
+    <form ref={formRef} onSubmit={handleSubmit} noValidate>
       <FormError message={submitError} />
+      {loginMutation.isPending && (
+        <p className="srOnly" role="status">
+          Logging in. Please wait.
+        </p>
+      )}
       {isSlow && (
         <p className="slowHint" role="status">
           <Spinner size={14} />
@@ -57,6 +71,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         error={fieldErrors.email}
+        required
       />
       <TextField
         label="Password"
@@ -65,6 +80,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         error={fieldErrors.password}
+        required
       />
       <Button type="submit" loading={loginMutation.isPending}>
         {loginMutation.isPending ? 'Logging in…' : 'Log in'}
diff --git a/src/features/auth/components/SignupForm.a11y.test.tsx b/src/features/auth/components/SignupForm.a11y.test.tsx
new file mode 100644
index 0000000..901f807
--- /dev/null
+++ b/src/features/auth/components/SignupForm.a11y.test.tsx
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { render, screen } from '../../../test/render';
+import { SignupForm } from './SignupForm';
+
+describe('SignupForm accessibility (#89)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<SignupForm />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('describes the password requirement', () => {
+    render(<SignupForm />);
+    const password = screen.getByLabelText(/^password$/i);
+    expect(password).toHaveAccessibleDescription(/at least 8 characters/i);
+  });
+
+  it('focuses the first invalid field after a failed submit', async () => {
+    const user = userEvent.setup();
+    render(<SignupForm />);
+
+    await user.click(screen.getByRole('button', { name: /create account/i }));
+
+    expect(screen.getByLabelText(/full name/i)).toHaveFocus();
+    expect(screen.getByLabelText(/full name/i)).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('keeps the role choice as a labelled radio group', () => {
+    render(<SignupForm />);
+    expect(screen.getByRole('radiogroup', { name: /i am a/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/features/auth/components/SignupForm.tsx b/src/features/auth/components/SignupForm.tsx
index ddd5b79..2bde307 100644
--- a/src/features/auth/components/SignupForm.tsx
+++ b/src/features/auth/components/SignupForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { FormEvent } from 'react';
 import { TextField } from '../../../components/TextField';
 import { Button } from '../../../components/Button';
@@ -21,9 +21,16 @@ export function SignupForm({ onSuccess }: SignupFormProps) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const formRef = useRef<HTMLFormElement>(null);
   const signupMutation = useSignup();
   const isSlow = useSlowRequestHint(signupMutation.isPending);
 
+  useEffect(() => {
+    if (fieldErrors.fullName || fieldErrors.email || fieldErrors.password) {
+      formRef.current?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
+    }
+  }, [fieldErrors]);
+
   function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
@@ -46,8 +53,13 @@ export function SignupForm({ onSuccess }: SignupFormProps) {
         : null;
 
   return (
-    <form onSubmit={handleSubmit} noValidate>
+    <form ref={formRef} onSubmit={handleSubmit} noValidate>
       <FormError message={submitError} />
+      {signupMutation.isPending && (
+        <p className="srOnly" role="status">
+          Creating your account. Please wait.
+        </p>
+      )}
       {isSlow && (
         <p className="slowHint" role="status">
           <Spinner size={14} />
@@ -62,6 +74,7 @@ export function SignupForm({ onSuccess }: SignupFormProps) {
         value={fullName}
         onChange={(e) => setFullName(e.target.value)}
         error={fieldErrors.fullName}
+        required
       />
       <TextField
         label="Email"
@@ -70,6 +83,7 @@ export function SignupForm({ onSuccess }: SignupFormProps) {
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         error={fieldErrors.email}
+        required
       />
       <TextField
         label="Password"
@@ -78,6 +92,8 @@ export function SignupForm({ onSuccess }: SignupFormProps) {
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         error={fieldErrors.password}
+        hint="At least 8 characters."
+        required
       />
       <Button type="submit" loading={signupMutation.isPending}>
         {signupMutation.isPending ? 'Creating account…' : 'Create account'}
diff --git a/src/features/care-thread/components/CareTimeline.module.css b/src/features/care-thread/components/CareTimeline.module.css
index 8387107..11eaed2 100644
--- a/src/features/care-thread/components/CareTimeline.module.css
+++ b/src/features/care-thread/components/CareTimeline.module.css
@@ -63,7 +63,7 @@
   position: absolute;
   top: 1.5rem;
   bottom: 1.5rem;
-  left: 1.25rem;
+  inset-inline-start: 1.25rem;
   width: 2px;
   background: var(--color-border-strong);
   z-index: 1;
@@ -101,13 +101,13 @@
 .completed .nodeMarker {
   background: var(--color-accent);
   border-color: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-accent-contrast);
 }
 
 .actionRequired .nodeMarker {
   background: var(--color-accent-2);
   border-color: var(--color-accent-2);
-  color: #ffffff;
+  color: var(--color-accent-2-contrast);
   box-shadow: 0 0 0 4px var(--color-accent-2-subtle);
 }
 
@@ -204,7 +204,7 @@
   gap: var(--space-2);
   padding: 0.5rem 1rem;
   background: var(--color-accent-2);
-  color: #ffffff;
+  color: var(--color-accent-2-contrast);
   border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: var(--text-sm);
@@ -228,7 +228,7 @@
   padding: var(--space-4);
   background: var(--color-surface-alt);
   border-radius: var(--radius-sm);
-  border-left: 4px solid var(--color-accent);
+  border-inline-start: 4px solid var(--color-accent);
   font-size: var(--text-sm);
   color: var(--color-text);
   margin-top: var(--space-4);
diff --git a/src/features/care-thread/components/CareTimeline.tsx b/src/features/care-thread/components/CareTimeline.tsx
index 56cef66..5c7decc 100644
--- a/src/features/care-thread/components/CareTimeline.tsx
+++ b/src/features/care-thread/components/CareTimeline.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import { useFormat } from '../../../i18n/useFormat';
 import type { CareStepStatus, CareStepType, CareThread, CareThreadStep } from '../../../types/models';
 import styles from './CareTimeline.module.css';
 
@@ -51,6 +52,8 @@ function formatStatus(status: CareStepStatus): string {
 }
 
 export function CareTimeline({ thread, isLoading = false }: CareTimelineProps) {
+  const { formatDate, formatDateTime } = useFormat();
+
   if (isLoading) {
     return (
       <div className={styles.timelineContainer}>
@@ -81,14 +84,16 @@ export function CareTimeline({ thread, isLoading = false }: CareTimelineProps) {
   const isPartialConcludedAtConsultation = hasConsultation && !hasSubsequentSteps;
 
   return (
-    <div className={styles.timelineContainer} aria-label="Care thread timeline">
+    <section className={styles.timelineContainer} aria-label="Care thread timeline">
       <div className={styles.timelineHeader}>
         <div>
           <span className={styles.statusPill}>{thread.status} care episode</span>
           <h2 className={styles.threadTitle}>{thread.title}</h2>
           <div className={styles.threadMeta}>
             <span>Doctor: {thread.doctorName} ({thread.specialty})</span>
-            <span>Started: {new Date(thread.startedAt).toLocaleDateString()}</span>
+            <span>
+              Started: <time dateTime={thread.startedAt}>{formatDate(thread.startedAt)}</time>
+            </span>
           </div>
         </div>
       </div>
@@ -114,10 +119,7 @@ export function CareTimeline({ thread, isLoading = false }: CareTimelineProps) {
 
                 {step.timestamp && (
                   <div className={styles.stepTimestamp}>
-                    {new Date(step.timestamp).toLocaleString(undefined, {
-                      dateStyle: 'medium',
-                      timeStyle: 'short',
-                    })}
+                    <time dateTime={step.timestamp}>{formatDateTime(step.timestamp)}</time>
                   </div>
                 )}
 
@@ -135,12 +137,12 @@ export function CareTimeline({ thread, isLoading = false }: CareTimelineProps) {
       </ol>
 
       {isPartialConcludedAtConsultation && (
-        <div className={styles.partialNotice}>
+        <div className={styles.partialNotice} role="note">
           <strong>Care Episode Concluded:</strong> Following the consultation, no specialist referrals or diagnostic
           laboratory orders were deemed necessary by {thread.doctorName}. You can review your clinical notes or book a
           follow-up if needed.
         </div>
       )}
-    </div>
+    </section>
   );
 }
diff --git a/src/features/consultation/components/ConsultationNote.tsx b/src/features/consultation/components/ConsultationNote.tsx
index d905b6a..5675731 100644
--- a/src/features/consultation/components/ConsultationNote.tsx
+++ b/src/features/consultation/components/ConsultationNote.tsx
@@ -2,24 +2,17 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useConsultationNote, useSignOffNote, useAddAddendum } from '../hooks/useConsultationNote';
 import { Button } from '../../../components/Button';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './ConsultationNote.module.css';
 
-function formatDateTime(iso: string | null | undefined) {
-  if (!iso) return '—';
-  return new Date(iso).toLocaleString(undefined, {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
 interface ConsultationNoteProps {
   appointmentId?: string;
 }
 
 export function ConsultationNote({ appointmentId: appointmentIdProp }: ConsultationNoteProps) {
+  const formatters = useFormat();
+  const formatDateTime = (iso: string | null | undefined) =>
+    iso ? formatters.formatDateTime(iso) : '—';
   const params = useParams<{ appointmentId: string }>();
   const appointmentId = appointmentIdProp ?? params.appointmentId;
   const query = useConsultationNote(appointmentId ?? null);
@@ -114,7 +107,11 @@ export function ConsultationNote({ appointmentId: appointmentIdProp }: Consultat
             <>
               {editing ? (
                 <>
+                  <label htmlFor="consultation-note-content" className="srOnly">
+                    Consultation note content
+                  </label>
                   <textarea
+                    id="consultation-note-content"
                     value={draft}
                     onChange={(e) => setDraft(e.target.value)}
                     className={styles.content}
@@ -149,7 +146,11 @@ export function ConsultationNote({ appointmentId: appointmentIdProp }: Consultat
 
           <h3 className={styles.addendaHeading}>Addenda</h3>
           <div className={styles.addendumComposer}>
+            <label htmlFor="consultation-addendum" className="srOnly">
+              Addendum content
+            </label>
             <textarea
+              id="consultation-addendum"
               value={addendumContent}
               onChange={(e) => setAddendumContent(e.target.value)}
               placeholder="Add an addendum…"
diff --git a/src/features/dependents/components/DependentsList.tsx b/src/features/dependents/components/DependentsList.tsx
index 8ead9aa..0f5d875 100644
--- a/src/features/dependents/components/DependentsList.tsx
+++ b/src/features/dependents/components/DependentsList.tsx
@@ -5,14 +5,11 @@ import { FormError } from '../../../components/FormError';
 import { DependentForm } from './DependentForm';
 import { useDependents, useAddDependent, useUpdateDependent } from '../hooks/useDependents';
 import { ApiError } from '../../../services/api-client';
+import { useFormat } from '../../../i18n/useFormat';
 import type { Dependent, DependentInput } from '../../../types/models';
 import styles from './DependentsList.module.css';
 
-function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
-}
-
-function handoverLabel(d: Dependent): string {
+function handoverLabel(d: Dependent, formatDate: (iso: string) => string): string {
   switch (d.handoverStatus) {
     case 'eligible':
       return 'Eligible for handover';
@@ -26,6 +23,7 @@ function handoverLabel(d: Dependent): string {
 }
 
 export function DependentsList() {
+  const { formatDate } = useFormat();
   const { data: dependents, isLoading, error: fetchError } = useDependents();
   const addMutation = useAddDependent();
   const editMutation = useUpdateDependent();
@@ -100,10 +98,12 @@ export function DependentsList() {
                 <span className={styles.name}>{d.fullName}</span>
                 <span className={styles.relationship}>{d.relationship}</span>
               </div>
-              <span className={styles.dob}>Born {formatDate(d.dateOfBirth)}</span>
+              <span className={styles.dob}>
+                Born <time dateTime={d.dateOfBirth}>{formatDate(d.dateOfBirth)}</time>
+              </span>
               {d.handoverStatus !== 'not_eligible' && (
                 <span className={styles.handover} data-status={d.handoverStatus}>
-                  {handoverLabel(d)}
+                  {handoverLabel(d, formatDate)}
                 </span>
               )}
               {d.handoverStatus !== 'claimed' && (
diff --git a/src/features/dependents/components/HandoverNotice.module.css b/src/features/dependents/components/HandoverNotice.module.css
index 100c9d1..dfd998b 100644
--- a/src/features/dependents/components/HandoverNotice.module.css
+++ b/src/features/dependents/components/HandoverNotice.module.css
@@ -47,7 +47,7 @@
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   margin: 0;
-  padding-left: var(--space-5);
+  padding-inline-start: var(--space-5);
 }
 
 .accessList li {
diff --git a/src/features/facility-team/components/FacilityMemberList.tsx b/src/features/facility-team/components/FacilityMemberList.tsx
index be2d945..43c16e8 100644
--- a/src/features/facility-team/components/FacilityMemberList.tsx
+++ b/src/features/facility-team/components/FacilityMemberList.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Button } from '../../../components/Button';
 import { RemoveMemberModal } from './RemoveMemberModal';
+import { useFormat } from '../../../i18n/useFormat';
 import type { FacilityMember } from '../../../types/models';
 import styles from './FacilityTeam.module.css';
 
@@ -18,6 +19,7 @@ export function FacilityMemberList({
   isRemoving,
 }: FacilityMemberListProps) {
   const [selectedMember, setSelectedMember] = useState<FacilityMember | null>(null);
+  const { formatDate } = useFormat();
 
   const ownerCount = members.filter((m) => m.role === 'owner').length;
 
@@ -33,14 +35,17 @@ export function FacilityMemberList({
       </div>
 
       <div className={styles.tableWrapper}>
-        <table className={styles.dataTable} aria-label="Facility team members">
+        <table className={styles.dataTable}>
+          <caption className="srOnly">
+            Facility team members with their role and join date
+          </caption>
           <thead>
             <tr>
               <th scope="col">Name</th>
               <th scope="col">Email</th>
               <th scope="col">Role</th>
               <th scope="col">Joined</th>
-              {isOwner && <th scope="col" style={{ textAlign: 'right' }}>Actions</th>}
+              {isOwner && <th scope="col" className={styles.actionCell}>Actions</th>}
             </tr>
           </thead>
           <tbody>
@@ -49,10 +54,10 @@ export function FacilityMemberList({
 
               return (
                 <tr key={m.id}>
-                  <td>
+                  <th scope="row">
                     <strong>{m.fullName}</strong>
                     {m.isCurrentUser && <span className={styles.youBadge}>You</span>}
-                  </td>
+                  </th>
                   <td>{m.email}</td>
                   <td>
                     <span
@@ -63,7 +68,9 @@ export function FacilityMemberList({
                       {m.role}
                     </span>
                   </td>
-                  <td>{new Date(m.joinedAt).toLocaleDateString()}</td>
+                  <td>
+                    <time dateTime={m.joinedAt}>{formatDate(m.joinedAt)}</time>
+                  </td>
                   {isOwner && (
                     <td className={styles.actionCell}>
                       <Button
diff --git a/src/features/facility-team/components/FacilityTeam.a11y.test.tsx b/src/features/facility-team/components/FacilityTeam.a11y.test.tsx
new file mode 100644
index 0000000..a3d2a0f
--- /dev/null
+++ b/src/features/facility-team/components/FacilityTeam.a11y.test.tsx
@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { render, screen, waitFor } from '../../../test/render';
+import { FacilityTeamView, DEFAULT_MOCK_MEMBERS, DEFAULT_MOCK_INVITES } from './FacilityTeamView';
+import { useAuthStore } from '../../../store/auth-store';
+import * as teamService from '../../../services/facility-team-service';
+
+vi.mock('../../../services/facility-team-service');
+
+beforeEach(() => {
+  useAuthStore.setState({
+    accessToken: 'test-token',
+    user: { id: 'user-owner-1', email: 'evelyn.reed@centralpharmacy.org', role: 'facility', createdAt: '', updatedAt: '' },
+  });
+  vi.mocked(teamService.listFacilityMembers).mockResolvedValue(DEFAULT_MOCK_MEMBERS);
+  vi.mocked(teamService.listFacilityInvites).mockResolvedValue(DEFAULT_MOCK_INVITES);
+});
+
+describe('Facility team accessibility (#90)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<FacilityTeamView isOwnerOverride />);
+    await screen.findByRole('heading', { name: /facility team & accounts/i });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('captions both data tables and uses column headers', async () => {
+    render(<FacilityTeamView isOwnerOverride />);
+    await screen.findByRole('heading', { name: /facility members/i });
+
+    expect(
+      screen.getByRole('table', { name: /team members with their role and join date/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('table', { name: /pending facility invitations/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('rowheader', { name: /dr\. evelyn reed/i })).toBeInTheDocument();
+  });
+
+  it('traps focus in the invite dialog and restores it to the trigger on Escape', async () => {
+    render(<FacilityTeamView isOwnerOverride />);
+    const trigger = await screen.findByRole('button', { name: /\+ invite staff member/i });
+
+    await userEvent.click(trigger);
+
+    const dialog = screen.getByRole('dialog', { name: /invite team member/i });
+    expect(dialog).toBeInTheDocument();
+    // Initial focus lands on the first control in the dialog.
+    await waitFor(() => expect(screen.getByLabelText(/email address/i)).toHaveFocus());
+
+    // Shift+Tab from the first control wraps to the last control.
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true });
+    expect(screen.getByRole('button', { name: /^send invite$/i })).toHaveFocus();
+
+    // Escape closes the dialog and returns focus to the trigger.
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    await waitFor(() => expect(trigger).toHaveFocus());
+  });
+});
diff --git a/src/features/facility-team/components/FacilityTeam.module.css b/src/features/facility-team/components/FacilityTeam.module.css
index a70ad6f..4995677 100644
--- a/src/features/facility-team/components/FacilityTeam.module.css
+++ b/src/features/facility-team/components/FacilityTeam.module.css
@@ -82,7 +82,7 @@
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
-  text-align: left;
+  text-align: start;
 }
 
 .dataTable th,
@@ -97,6 +97,13 @@
   font-weight: 600;
 }
 
+/* Row headers name the entity; they are not column headers. */
+.dataTable tbody th {
+  background: transparent;
+  text-align: start;
+  font-weight: 600;
+}
+
 .dataTable tr:hover td {
   background: var(--color-surface-hover);
 }
@@ -124,7 +131,7 @@
 
 .youBadge {
   display: inline-block;
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
   padding: 0.1rem 0.4rem;
   border-radius: var(--radius-full);
   font-size: var(--text-xs);
@@ -134,7 +141,7 @@
 }
 
 .actionCell {
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
 }
 
@@ -157,6 +164,8 @@
 }
 
 .modalContent {
+  max-height: 90vh;
+  overflow-y: auto;
   background: var(--color-bg-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
@@ -190,6 +199,32 @@
   margin-top: var(--space-2);
 }
 
+.roleSelect {
+  min-height: var(--target-size);
+  background: var(--color-bg-raised);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+}
+
+.dangerNotice {
+  background: var(--color-danger-surface);
+  border: 1px solid var(--color-danger);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  color: var(--color-danger);
+  font-size: var(--text-xs);
+}
+
+.warningNotice {
+  background: var(--color-warning-surface);
+  border: 1px solid var(--color-warning);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+}
+
 /* Queue with Attribution */
 .queueItem {
   border: 1px solid var(--color-border);
@@ -210,6 +245,8 @@
 }
 
 .orderTitle {
+  margin: 0;
+  font-family: var(--font-sans);
   font-weight: 600;
   font-size: var(--text-base);
   color: var(--color-text);
diff --git a/src/features/facility-team/components/FacilityTeamView.tsx b/src/features/facility-team/components/FacilityTeamView.tsx
index 6a8d22b..62ee648 100644
--- a/src/features/facility-team/components/FacilityTeamView.tsx
+++ b/src/features/facility-team/components/FacilityTeamView.tsx
@@ -104,6 +104,9 @@ export function FacilityTeamView({
       <div className={styles.container}>
         <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-12)' }}>
           <Spinner size={24} />
+          <span className="srOnly" role="status">
+            Loading facility team members…
+          </span>
         </div>
       </div>
     );
@@ -138,7 +141,7 @@ export function FacilityTeamView({
   };
 
   return (
-    <div className={styles.container} aria-label="Facility team management">
+    <section className={styles.container} aria-label="Facility team management">
       <header className={styles.header}>
         <div className={styles.headerTitle}>
           <h1>Facility team &amp; accounts</h1>
@@ -198,6 +201,6 @@ export function FacilityTeamView({
         isPending={inviteMutation.isPending}
         isOwner={isOwner}
       />
-    </div>
+    </section>
   );
 }
diff --git a/src/features/facility-team/components/FulfillmentQueueWithAttribution.tsx b/src/features/facility-team/components/FulfillmentQueueWithAttribution.tsx
index cc81221..6975ab1 100644
--- a/src/features/facility-team/components/FulfillmentQueueWithAttribution.tsx
+++ b/src/features/facility-team/components/FulfillmentQueueWithAttribution.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Button } from '../../../components/Button';
+import { useFormat } from '../../../i18n/useFormat';
 import type { FulfillmentQueueItem } from '../../../types/models';
 import styles from './FacilityTeam.module.css';
 
@@ -15,6 +16,7 @@ export function FulfillmentQueueWithAttribution({
   isUpdating,
 }: FulfillmentQueueProps) {
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const { formatDate, formatDateTime } = useFormat();
 
   const handleAction = async (itemId: string, action: 'fulfilled' | 'rejected') => {
     setSelectedItem(itemId);
@@ -44,14 +46,18 @@ export function FulfillmentQueueWithAttribution({
             const isItemUpdating = isUpdating && selectedItem === item.id;
 
             return (
-              <div key={item.id} className={styles.queueItem} tabIndex={0}>
+              <article key={item.id} className={styles.queueItem} aria-labelledby={`queue-item-${item.id}`}>
                 <div className={styles.queueItemHeader}>
                   <div>
-                    <span className={styles.orderTitle}>{item.itemName}</span>
+                    <h3 id={`queue-item-${item.id}`} className={styles.orderTitle}>
+                      {item.itemName}
+                    </h3>
                     <div className={styles.orderMeta}>
                       <span>Patient: {item.patientName}</span> •{' '}
                       <span>Type: {item.orderType === 'prescription' ? 'Prescription Dispense' : 'Diagnostic Order'}</span> •{' '}
-                      <span>Received: {new Date(item.receivedAt).toLocaleDateString()}</span>
+                      <span>
+                        Received: <time dateTime={item.receivedAt}>{formatDate(item.receivedAt)}</time>
+                      </span>
                     </div>
                   </div>
                   <div>
@@ -77,7 +83,7 @@ export function FulfillmentQueueWithAttribution({
 
                 {/* Audit Attribution Box (PRD §7 & Issue #51 requirement) */}
                 {item.attribution ? (
-                  <div className={styles.attributionBox} aria-label="Action attribution">
+                  <div className={styles.attributionBox} role="note" aria-label="Action attribution">
                     <span aria-hidden="true">✓</span>
                     <span>
                       {item.attribution.action === 'dispensed' && 'Dispensed by '}
@@ -86,7 +92,9 @@ export function FulfillmentQueueWithAttribution({
                       {item.attribution.action === 'rejected' && 'Rejected by '}
                       <strong className={styles.attributionActor}>{item.attribution.performedByName}</strong>{' '}
                       ({item.attribution.performedByRole}) on{' '}
-                      {new Date(item.attribution.timestamp).toLocaleString()}
+                      <time dateTime={item.attribution.timestamp}>
+                        {formatDateTime(item.attribution.timestamp)}
+                      </time>
                       {item.attribution.notes && ` — "${item.attribution.notes}"`}
                     </span>
                   </div>
@@ -116,7 +124,7 @@ export function FulfillmentQueueWithAttribution({
                     </div>
                   </div>
                 )}
-              </div>
+              </article>
             );
           })}
         </div>
diff --git a/src/features/facility-team/components/InviteMemberModal.tsx b/src/features/facility-team/components/InviteMemberModal.tsx
index f6bdf72..f63d939 100644
--- a/src/features/facility-team/components/InviteMemberModal.tsx
+++ b/src/features/facility-team/components/InviteMemberModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Button } from '../../../components/Button';
 import { TextField } from '../../../components/TextField';
 import { FormError } from '../../../components/FormError';
+import { Dialog } from '../../../components/Dialog';
 import type { FacilityMemberRole, InviteMemberInput } from '../../../types/models';
 import styles from './FacilityTeam.module.css';
 
@@ -23,12 +24,12 @@ export function InviteMemberModal({
   const [email, setEmail] = useState('');
   const [role, setRole] = useState<FacilityMemberRole>('staff');
   const [error, setError] = useState<string | null>(null);
-
-  if (!open) return null;
+  const [emailError, setEmailError] = useState<string | undefined>();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
+    setEmailError(undefined);
 
     // Guard: Owner-only action check
     if (!isOwner) {
@@ -37,7 +38,9 @@ export function InviteMemberModal({
     }
 
     if (!email || !email.includes('@')) {
-      setError('Please provide a valid email address.');
+      const message = 'Please provide a valid email address.';
+      setEmailError(message);
+      setError(message);
       return;
     }
 
@@ -52,52 +55,62 @@ export function InviteMemberModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" aria-labelledby="invite-title">
-      <div className={styles.modalContent}>
-        <h3 id="invite-title">Invite team member</h3>
-        <p className={styles.modalDescription}>
-          Send an invitation email to a staff pharmacist or co-owner. They will receive a link to activate their account and join this facility.
-        </p>
+    <Dialog
+      open={open}
+      onClose={onClose}
+      labelledBy="invite-title"
+      describedBy="invite-description"
+      overlayClassName={styles.modalOverlay}
+      panelClassName={styles.modalContent}
+    >
+      <h3 id="invite-title">Invite team member</h3>
+      <p id="invite-description" className={styles.modalDescription}>
+        Send an invitation email to a staff pharmacist or co-owner. They will receive a link to activate their account and join this facility.
+      </p>
 
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
-          <TextField
-            label="Email address"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="colleague@pharmacy.org"
-            required
-            autoFocus
-          />
+      <form onSubmit={handleSubmit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
+        <TextField
+          label="Email address"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="colleague@pharmacy.org"
+          required
+          error={emailError}
+          autoComplete="email"
+        />
 
-          <div>
-            <label htmlFor="member-role" style={{ display: 'block', fontSize: 'var(--text-sm)', fontWeight: 500, marginBottom: 'var(--space-1)' }}>
-              Role
-            </label>
-            <select
-              id="member-role"
-              value={role}
-              onChange={(e) => setRole(e.target.value as FacilityMemberRole)}
-              className={styles.dataTable}
-              style={{ padding: 'var(--space-2)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--color-border)', width: '100%' }}
-            >
-              <option value="staff">Staff (Fulfillment, dispensing, read-only team)</option>
-              <option value="owner">Owner (Full administrative rights, billing, team management)</option>
-            </select>
-          </div>
+        <div>
+          <label htmlFor="member-role" style={{ display: 'block', fontSize: 'var(--text-sm)', fontWeight: 500, marginBottom: 'var(--space-1)' }}>
+            Role
+          </label>
+          <select
+            id="member-role"
+            value={role}
+            onChange={(e) => setRole(e.target.value as FacilityMemberRole)}
+            aria-describedby="member-role-hint"
+            className={styles.roleSelect}
+            style={{ padding: 'var(--space-2)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--color-border)', width: '100%' }}
+          >
+            <option value="staff">Staff (Fulfillment, dispensing, read-only team)</option>
+            <option value="owner">Owner (Full administrative rights, billing, team management)</option>
+          </select>
+          <span id="member-role-hint" className="srOnly">
+            Owners can invite and remove staff. Staff have fulfillment access only.
+          </span>
+        </div>
 
-          {error && <FormError message={error} />}
+        {error && <FormError message={error} />}
 
-          <div className={styles.modalActions}>
-            <Button variant="secondary" type="button" onClick={onClose} disabled={isPending}>
-              Cancel
-            </Button>
-            <Button type="submit" loading={isPending}>
-              {isPending ? 'Sending invite…' : 'Send invite'}
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
+        <div className={styles.modalActions}>
+          <Button variant="secondary" type="button" onClick={onClose} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button type="submit" loading={isPending}>
+            {isPending ? 'Sending invite…' : 'Send invite'}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
   );
 }
diff --git a/src/features/facility-team/components/PendingInvitesList.tsx b/src/features/facility-team/components/PendingInvitesList.tsx
index 9d9bd41..f9343b5 100644
--- a/src/features/facility-team/components/PendingInvitesList.tsx
+++ b/src/features/facility-team/components/PendingInvitesList.tsx
@@ -1,4 +1,5 @@
 import { Button } from '../../../components/Button';
+import { useFormat } from '../../../i18n/useFormat';
 import type { FacilityInvite } from '../../../types/models';
 import styles from './FacilityTeam.module.css';
 
@@ -19,6 +20,8 @@ export function PendingInvitesList({
   isResending,
   isRevoking,
 }: PendingInvitesListProps) {
+  const { formatDate } = useFormat();
+
   // If not owner, do not render pending invites (hidden for staff)
   if (!isOwner) return null;
 
@@ -37,7 +40,10 @@ export function PendingInvitesList({
         <div className={styles.emptyState}>No pending invitations</div>
       ) : (
         <div className={styles.tableWrapper}>
-          <table className={styles.dataTable} aria-label="Pending facility invitations">
+          <table className={styles.dataTable}>
+            <caption className="srOnly">
+              Pending facility invitations with role, sender, send date and expiry
+            </caption>
             <thead>
               <tr>
                 <th scope="col">Invited email</th>
@@ -45,13 +51,13 @@ export function PendingInvitesList({
                 <th scope="col">Invited by</th>
                 <th scope="col">Sent</th>
                 <th scope="col">Expires</th>
-                <th scope="col" style={{ textAlign: 'right' }}>Actions</th>
+                <th scope="col" className={styles.actionCell}>Actions</th>
               </tr>
             </thead>
             <tbody>
               {invites.map((invite) => (
                 <tr key={invite.id}>
-                  <td><strong>{invite.email}</strong></td>
+                  <th scope="row"><strong>{invite.email}</strong></th>
                   <td>
                     <span
                       className={`${styles.memberRoleBadge} ${
@@ -62,8 +68,12 @@ export function PendingInvitesList({
                     </span>
                   </td>
                   <td>{invite.invitedBy}</td>
-                  <td>{new Date(invite.invitedAt).toLocaleDateString()}</td>
-                  <td>{new Date(invite.expiresAt).toLocaleDateString()}</td>
+                  <td>
+                    <time dateTime={invite.invitedAt}>{formatDate(invite.invitedAt)}</time>
+                  </td>
+                  <td>
+                    <time dateTime={invite.expiresAt}>{formatDate(invite.expiresAt)}</time>
+                  </td>
                   <td className={styles.actionCell}>
                     <div className={styles.buttonGroup}>
                       <Button
diff --git a/src/features/facility-team/components/RemoveMemberModal.tsx b/src/features/facility-team/components/RemoveMemberModal.tsx
index b7c9e08..dc6c29f 100644
--- a/src/features/facility-team/components/RemoveMemberModal.tsx
+++ b/src/features/facility-team/components/RemoveMemberModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Button } from '../../../components/Button';
 import { FormError } from '../../../components/FormError';
+import { Dialog } from '../../../components/Dialog';
 import type { FacilityMember } from '../../../types/models';
 import styles from './FacilityTeam.module.css';
 
@@ -23,9 +24,8 @@ export function RemoveMemberModal({
 }: RemoveMemberModalProps) {
   const [error, setError] = useState<string | null>(null);
 
-  if (!member) return null;
-
   const handleConfirm = async () => {
+    if (!member) return;
     setError(null);
 
     // Guard: Owner-only action
@@ -49,40 +49,46 @@ export function RemoveMemberModal({
   };
 
   return (
-    <div className={styles.modalOverlay} role="dialog" aria-modal="true" aria-labelledby="remove-title">
-      <div className={styles.modalContent}>
-        <h3 id="remove-title">Remove team member</h3>
-        <p className={styles.modalDescription}>
-          Are you sure you want to remove <strong>{member.fullName}</strong> ({member.email}) from this facility?
-        </p>
+    <Dialog
+      open={Boolean(member)}
+      onClose={onClose}
+      labelledBy="remove-title"
+      describedBy="remove-description"
+      overlayClassName={styles.modalOverlay}
+      panelClassName={styles.modalContent}
+    >
+      <h3 id="remove-title">Remove team member</h3>
+      <p id="remove-description" className={styles.modalDescription}>
+        Are you sure you want to remove <strong>{member?.fullName}</strong> ({member?.email}) from this facility?
+      </p>
 
-        <div style={{ background: '#fdf2f2', border: '1px solid #f2b8b5', borderRadius: 'var(--radius-md)', padding: 'var(--space-3)', color: '#b3261e', fontSize: 'var(--text-xs)' }}>
-          <strong>Important security notice:</strong> Removing a member immediately signs them out and revokes all active backend sessions and dispensing permissions for this facility.
-        </div>
+      <div className={styles.dangerNotice} role="note">
+        <strong>Important security notice:</strong> Removing a member immediately signs them out and revokes all active backend sessions and dispensing permissions for this facility.
+      </div>
 
-        {isLastOwner && member.role === 'owner' && (
-          <div style={{ background: '#fff8e6', border: '1px solid #ebd08c', borderRadius: 'var(--radius-md)', padding: 'var(--space-3)', color: '#8c5b00', fontSize: 'var(--text-xs)' }}>
-            ⚠️ This user is the only registered owner for this facility. A facility must retain at least one active owner.
-          </div>
-        )}
+      {isLastOwner && member?.role === 'owner' && (
+        <div className={styles.warningNotice} role="note">
+          <span aria-hidden="true">⚠️ </span>
+          This user is the only registered owner for this facility. A facility must retain at least one active owner.
+        </div>
+      )}
 
-        {error && <FormError message={error} />}
+      {error && <FormError message={error} />}
 
-        <div className={styles.modalActions}>
-          <Button variant="secondary" type="button" onClick={onClose} disabled={isPending}>
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            onClick={handleConfirm}
-            loading={isPending}
-            disabled={isLastOwner && member.role === 'owner'}
-            style={{ background: '#b3261e', borderColor: '#b3261e', color: '#ffffff' }}
-          >
-            {isPending ? 'Removing…' : 'Remove member'}
-          </Button>
-        </div>
+      <div className={styles.modalActions}>
+        <Button variant="secondary" type="button" onClick={onClose} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="danger"
+          onClick={handleConfirm}
+          loading={isPending}
+          disabled={isLastOwner && member?.role === 'owner'}
+        >
+          {isPending ? 'Removing…' : 'Remove member'}
+        </Button>
       </div>
-    </div>
+    </Dialog>
   );
 }
diff --git a/src/features/health-profile/components/HealthSection.tsx b/src/features/health-profile/components/HealthSection.tsx
index ad23410..c5d45d1 100644
--- a/src/features/health-profile/components/HealthSection.tsx
+++ b/src/features/health-profile/components/HealthSection.tsx
@@ -5,6 +5,7 @@ import { Spinner } from '../../../components/Spinner';
 import { FormError } from '../../../components/FormError';
 import { useHealthEntries, useAddHealthEntry, useUpdateHealthEntry, useRemoveHealthEntry } from '../hooks/useHealthEntries';
 import { ApiError } from '../../../services/api-client';
+import { useFormat } from '../../../i18n/useFormat';
 import type { HealthSectionKey } from '../../../types/models';
 import styles from './HealthSection.module.css';
 
@@ -19,6 +20,7 @@ interface Props {
 }
 
 export function HealthSection({ section }: Props) {
+  const { formatDate } = useFormat();
   const { data: entries, isLoading } = useHealthEntries(section);
   const addMutation = useAddHealthEntry();
   const updateMutation = useUpdateHealthEntry();
@@ -79,6 +81,9 @@ export function HealthSection({ section }: Props) {
       {isLoading && (
         <div className={styles.loading}>
           <Spinner size={18} />
+          <span className="srOnly" role="status">
+            Loading {SECTION_LABELS[section].toLowerCase()}…
+          </span>
         </div>
       )}
 
@@ -126,7 +131,8 @@ export function HealthSection({ section }: Props) {
                 <span className={styles.entryName}>{entry.name}</span>
                 {entry.version > 1 && (
                   <span className={styles.version}>
-                    v{entry.version} — updated {new Date(entry.updatedAt).toLocaleDateString()}
+                    v{entry.version} — updated{' '}
+                    <time dateTime={entry.updatedAt}>{formatDate(entry.updatedAt)}</time>
                     {entry.previousValue && <span className={styles.prev}> (was: {entry.previousValue})</span>}
                   </span>
                 )}
diff --git a/src/features/insights/components/DateRangeSelector.tsx b/src/features/insights/components/DateRangeSelector.tsx
index 1dce079..d75de94 100644
--- a/src/features/insights/components/DateRangeSelector.tsx
+++ b/src/features/insights/components/DateRangeSelector.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useFormat } from '../../../i18n/useFormat';
 import type { DateRangePreset } from '../../../types/models';
 import styles from './PracticeInsights.module.css';
 
@@ -15,8 +16,10 @@ export function DateRangeSelector({
   endDate = '',
   onChangePreset,
 }: DateRangeSelectorProps) {
+  const { formatDate } = useFormat();
   const [customStart, setCustomStart] = useState(startDate);
   const [customEnd, setCustomEnd] = useState(endDate);
+  const [status, setStatus] = useState('');
 
   const presets: { id: DateRangePreset; label: string }[] = [
     { id: '7d', label: 'Last 7 days' },
@@ -29,53 +32,65 @@ export function DateRangeSelector({
     e.preventDefault();
     if (customStart && customEnd) {
       onChangePreset('custom', { startDate: customStart, endDate: customEnd });
+      setStatus(`Custom range applied: ${formatDate(customStart)} to ${formatDate(customEnd)}.`);
+    } else {
+      setStatus('Choose both a start and an end date, then apply.');
     }
   };
 
   return (
-    <div className={styles.rangeSelector} aria-label="Date range selector">
-      <div className={styles.presetGroup} role="group" aria-label="Quick presets">
-        {presets.map((p) => (
-          <button
-            key={p.id}
-            type="button"
-            className={`${styles.presetButton} ${currentPreset === p.id ? styles.presetButtonActive : ''}`}
-            onClick={() => onChangePreset(p.id)}
-            aria-pressed={currentPreset === p.id}
-          >
-            {p.label}
-          </button>
-        ))}
-      </div>
+    <div className={styles.rangeSelector} role="group" aria-label="Date range selector">
+      <fieldset className={styles.presetFieldset}>
+        <legend className="srOnly">Reporting period</legend>
+        <div className={styles.presetGroup}>
+          {presets.map((p) => (
+            <button
+              key={p.id}
+              type="button"
+              className={`${styles.presetButton} ${currentPreset === p.id ? styles.presetButtonActive : ''}`}
+              onClick={() => onChangePreset(p.id)}
+              aria-pressed={currentPreset === p.id}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+      </fieldset>
 
       {currentPreset === 'custom' && (
-        <form onSubmit={handleApplyCustom} className={styles.customInputs} aria-label="Custom dates">
-          <label htmlFor="custom-start-date" className={styles.srOnly}>Start date</label>
-          <input
-            id="custom-start-date"
-            type="date"
-            className={styles.dateInput}
-            value={customStart}
-            onChange={(e) => setCustomStart(e.target.value)}
-            required
-            aria-label="Start date"
-          />
-          <span aria-hidden="true">to</span>
-          <label htmlFor="custom-end-date" className={styles.srOnly}>End date</label>
-          <input
-            id="custom-end-date"
-            type="date"
-            className={styles.dateInput}
-            value={customEnd}
-            onChange={(e) => setCustomEnd(e.target.value)}
-            required
-            aria-label="End date"
-          />
-          <button type="submit" className={styles.presetButton}>
-            Apply
-          </button>
+        <form onSubmit={handleApplyCustom} className={styles.customInputs}>
+          <fieldset className={styles.customFieldset}>
+            <legend className="srOnly">Custom date range</legend>
+            <div className={styles.customInputs}>
+              <label htmlFor="custom-start-date" className={styles.srOnly}>Start date</label>
+              <input
+                id="custom-start-date"
+                type="date"
+                className={styles.dateInput}
+                value={customStart}
+                onChange={(e) => setCustomStart(e.target.value)}
+                required
+              />
+              <span aria-hidden="true">to</span>
+              <label htmlFor="custom-end-date" className={styles.srOnly}>End date</label>
+              <input
+                id="custom-end-date"
+                type="date"
+                className={styles.dateInput}
+                value={customEnd}
+                onChange={(e) => setCustomEnd(e.target.value)}
+                required
+              />
+              <button type="submit" className={styles.presetButton}>
+                Apply
+              </button>
+            </div>
+          </fieldset>
         </form>
       )}
+      <p role="status" aria-live="polite" className="srOnly">
+        {status}
+      </p>
     </div>
   );
 }
diff --git a/src/features/insights/components/NoShowMetricsCard.tsx b/src/features/insights/components/NoShowMetricsCard.tsx
index 7f80571..430827e 100644
--- a/src/features/insights/components/NoShowMetricsCard.tsx
+++ b/src/features/insights/components/NoShowMetricsCard.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { NoShowMetrics } from '../../../types/models';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './PracticeInsights.module.css';
 
 interface NoShowMetricsCardProps {
@@ -7,6 +8,7 @@ interface NoShowMetricsCardProps {
 }
 
 export function NoShowMetricsCard({ metrics }: NoShowMetricsCardProps) {
+  const { formatNumber, formatPercent } = useFormat();
   const [viewMode, setViewMode] = useState<'visual' | 'table'>('visual');
 
   const total = Math.max(1, metrics.totalScheduled);
@@ -48,7 +50,7 @@ export function NoShowMetricsCard({ metrics }: NoShowMetricsCardProps) {
         <div className={styles.caveatBanner} role="note">
           <span className={styles.caveatPill}>Small sample caveat</span>
           <span>
-            Only {metrics.totalScheduled} total scheduled visits in this period. No-show and late-cancellation percentages may be disproportionately influenced by single events.
+            Only {formatNumber(metrics.totalScheduled)} total scheduled visits in this period. No-show and late-cancellation percentages may be disproportionately influenced by single events.
           </span>
         </div>
       )}
@@ -57,21 +59,23 @@ export function NoShowMetricsCard({ metrics }: NoShowMetricsCardProps) {
         <div className={styles.summaryStat}>
           <span className={styles.statLabel}>No-show rate</span>
           <span className={styles.statValue} style={{ color: metrics.noShowRate > 10 ? '#b3261e' : 'inherit' }}>
-            {metrics.noShowRate.toFixed(1)}%
+            {formatPercent(metrics.noShowRate)}
           </span>
-          <span className={styles.statHint}>{metrics.noShows} unattended visits</span>
+          <span className={styles.statHint}>{formatNumber(metrics.noShows)} unattended visits</span>
         </div>
         <div className={styles.summaryStat}>
           <span className={styles.statLabel}>Late cancel rate</span>
           <span className={styles.statValue} style={{ color: metrics.lateCancelRate > 10 ? '#b87b28' : 'inherit' }}>
-            {metrics.lateCancelRate.toFixed(1)}%
+            {formatPercent(metrics.lateCancelRate)}
+          </span>
+          <span className={styles.statHint}>
+            {formatNumber(metrics.lateCancellations)} cancelled within 24h
           </span>
-          <span className={styles.statHint}>{metrics.lateCancellations} cancelled within 24h</span>
         </div>
         <div className={styles.summaryStat}>
           <span className={styles.statLabel}>Completed visits</span>
-          <span className={styles.statValue}>{metrics.completedVisits}</span>
-          <span className={styles.statHint}>{completedPct.toFixed(0)}% completion</span>
+          <span className={styles.statValue}>{formatNumber(metrics.completedVisits)}</span>
+          <span className={styles.statHint}>{formatPercent(completedPct, 0)} completion</span>
         </div>
       </div>
 
@@ -81,41 +85,41 @@ export function NoShowMetricsCard({ metrics }: NoShowMetricsCardProps) {
             <div
               className={styles.distributionSegment}
               style={{ width: `${completedPct}%`, background: 'var(--color-accent)' }}
-              title={`Completed: ${metrics.completedVisits} (${completedPct.toFixed(1)}%)`}
+              title={`Completed: ${formatNumber(metrics.completedVisits)} (${formatPercent(completedPct)})`}
             />
             <div
               className={styles.distributionSegment}
               style={{ width: `${noShowPct}%`, background: '#b3261e' }}
-              title={`No-shows: ${metrics.noShows} (${noShowPct.toFixed(1)}%)`}
+              title={`No-shows: ${formatNumber(metrics.noShows)} (${formatPercent(noShowPct)})`}
             />
             <div
               className={styles.distributionSegment}
               style={{ width: `${lateCancelPct}%`, background: '#b87b28' }}
-              title={`Late cancellations: ${metrics.lateCancellations} (${lateCancelPct.toFixed(1)}%)`}
+              title={`Late cancellations: ${formatNumber(metrics.lateCancellations)} (${formatPercent(lateCancelPct)})`}
             />
             <div
               className={styles.distributionSegment}
               style={{ width: `${onTimeCancelPct}%`, background: 'var(--color-surface-hover)' }}
-              title={`On-time cancellations: ${metrics.onTimeCancellations} (${onTimeCancelPct.toFixed(1)}%)`}
+              title={`On-time cancellations: ${formatNumber(metrics.onTimeCancellations)} (${formatPercent(onTimeCancelPct)})`}
             />
           </div>
 
           <div className={styles.chartLegend}>
             <div className={styles.legendItem}>
               <span className={styles.legendColor} style={{ background: 'var(--color-accent)' }} />
-              <span>Completed ({metrics.completedVisits})</span>
+              <span>Completed ({formatNumber(metrics.completedVisits)})</span>
             </div>
             <div className={styles.legendItem}>
               <span className={styles.legendColor} style={{ background: '#b3261e' }} />
-              <span>No-shows ({metrics.noShows})</span>
+              <span>No-shows ({formatNumber(metrics.noShows)})</span>
             </div>
             <div className={styles.legendItem}>
               <span className={styles.legendColor} style={{ background: '#b87b28' }} />
-              <span>Late cancels (&lt;24h) ({metrics.lateCancellations})</span>
+              <span>Late cancels (&lt;24h) ({formatNumber(metrics.lateCancellations)})</span>
             </div>
             <div className={styles.legendItem}>
               <span className={styles.legendColor} style={{ background: 'var(--color-surface-hover)', border: '1px solid var(--color-border)' }} />
-              <span>On-time cancels ({metrics.onTimeCancellations})</span>
+              <span>On-time cancels ({formatNumber(metrics.onTimeCancellations)})</span>
             </div>
           </div>
         </div>
@@ -135,32 +139,32 @@ export function NoShowMetricsCard({ metrics }: NoShowMetricsCardProps) {
           <tbody>
             <tr>
               <th scope="row">Completed Visits</th>
-              <td className="num">{metrics.completedVisits}</td>
-              <td className="num">{completedPct.toFixed(1)}%</td>
+              <td className="num">{formatNumber(metrics.completedVisits)}</td>
+              <td className="num">{formatPercent(completedPct)}</td>
               <td>Patient attended and visit was concluded</td>
             </tr>
             <tr>
               <th scope="row">No-Shows</th>
-              <td className="num">{metrics.noShows}</td>
-              <td className="num">{metrics.noShowRate.toFixed(1)}%</td>
+              <td className="num">{formatNumber(metrics.noShows)}</td>
+              <td className="num">{formatPercent(metrics.noShowRate)}</td>
               <td>Patient did not check in or attend without notice</td>
             </tr>
             <tr>
               <th scope="row">Late Cancellations</th>
-              <td className="num">{metrics.lateCancellations}</td>
-              <td className="num">{metrics.lateCancelRate.toFixed(1)}%</td>
+              <td className="num">{formatNumber(metrics.lateCancellations)}</td>
+              <td className="num">{formatPercent(metrics.lateCancelRate)}</td>
               <td>Cancelled less than 24 hours prior to appointment</td>
             </tr>
             <tr>
               <th scope="row">On-Time Cancellations</th>
-              <td className="num">{metrics.onTimeCancellations}</td>
-              <td className="num">{onTimeCancelPct.toFixed(1)}%</td>
+              <td className="num">{formatNumber(metrics.onTimeCancellations)}</td>
+              <td className="num">{formatPercent(onTimeCancelPct)}</td>
               <td>Cancelled with &gt;= 24 hours advance notice</td>
             </tr>
             <tr style={{ fontWeight: 600 }}>
               <th scope="row">Total Scheduled</th>
-              <td className="num">{metrics.totalScheduled}</td>
-              <td className="num">100.0%</td>
+              <td className="num">{formatNumber(metrics.totalScheduled)}</td>
+              <td className="num">{formatPercent(100)}</td>
               <td>All bookings in selected date range</td>
             </tr>
           </tbody>
diff --git a/src/features/insights/components/PracticeInsights.a11y.test.tsx b/src/features/insights/components/PracticeInsights.a11y.test.tsx
new file mode 100644
index 0000000..2c55b89
--- /dev/null
+++ b/src/features/insights/components/PracticeInsights.a11y.test.tsx
@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { render, screen } from '../../../test/render';
+import { UtilisationChart } from './UtilisationChart';
+import { DateRangeSelector } from './DateRangeSelector';
+import { DEFAULT_MOCK_INSIGHTS } from './PracticeInsightsView';
+
+const utilisation = DEFAULT_MOCK_INSIGHTS.utilisation;
+
+describe('Practice insights accessibility (#90)', () => {
+  it('chart view has no axe violations and a named image', async () => {
+    const { container } = render(
+      <UtilisationChart
+        weeks={utilisation.weeks}
+        overallOfferedSlots={utilisation.overallOfferedSlots}
+        overallBookedSlots={utilisation.overallBookedSlots}
+        overallUtilisationRate={utilisation.overallUtilisationRate}
+        sampleSizeWarning={utilisation.sampleSizeWarning}
+      />,
+    );
+
+    expect(screen.getByRole('img', { name: /weekly offered vs booked slots/i })).toBeInTheDocument();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('table view exposes captions and scoped headers', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <UtilisationChart
+        weeks={utilisation.weeks}
+        overallOfferedSlots={utilisation.overallOfferedSlots}
+        overallBookedSlots={utilisation.overallBookedSlots}
+        overallUtilisationRate={utilisation.overallUtilisationRate}
+        sampleSizeWarning={false}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: /table view/i }));
+
+    expect(
+      screen.getByRole('table', { name: /weekly slot utilisation data table/i }),
+    ).toBeInTheDocument();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('date range selector is a labelled fieldset with no duplicate labels', async () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <DateRangeSelector currentPreset="custom" onChangePreset={onChange} />,
+    );
+
+    expect(screen.getByRole('group', { name: /custom date range/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/start date/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/end date/i)).toBeInTheDocument();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/src/features/insights/components/PracticeInsights.module.css b/src/features/insights/components/PracticeInsights.module.css
index 2693e2b..e3412b3 100644
--- a/src/features/insights/components/PracticeInsights.module.css
+++ b/src/features/insights/components/PracticeInsights.module.css
@@ -82,8 +82,17 @@
   flex-wrap: wrap;
 }
 
+.presetFieldset,
+.customFieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-inline-size: 0;
+}
+
 .presetButton {
   padding: var(--space-2) var(--space-3);
+  min-height: var(--target-size);
   border-radius: var(--radius-sm);
   font-size: var(--text-sm);
   font-family: var(--font-sans);
@@ -100,7 +109,7 @@
 
 .presetButtonActive {
   background: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-accent-contrast);
   border-color: var(--color-accent);
 }
 
@@ -113,6 +122,7 @@
 
 .dateInput {
   padding: var(--space-1) var(--space-2);
+  min-height: var(--target-size);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
@@ -162,6 +172,7 @@
 }
 
 .toggleButton {
+  min-height: var(--target-size);
   padding: var(--space-1) var(--space-3);
   font-size: var(--text-xs);
   font-family: var(--font-sans);
@@ -175,7 +186,7 @@
 
 .toggleButtonActive {
   background: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-accent-contrast);
 }
 
 /* Metrics Summary Grid */
@@ -275,11 +286,11 @@
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
-  text-align: left;
+  text-align: start;
 }
 
 .dataTable caption {
-  text-align: left;
+  text-align: start;
   font-size: var(--text-xs);
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
@@ -299,7 +310,7 @@
 
 .dataTable td.num,
 .dataTable th.num {
-  text-align: right;
+  text-align: end;
   font-variant-numeric: tabular-nums;
 }
 
diff --git a/src/features/insights/components/PracticeInsightsView.tsx b/src/features/insights/components/PracticeInsightsView.tsx
index 8420336..13158be 100644
--- a/src/features/insights/components/PracticeInsightsView.tsx
+++ b/src/features/insights/components/PracticeInsightsView.tsx
@@ -118,6 +118,9 @@ export function PracticeInsightsView() {
       <div className={styles.container}>
         <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-12)' }}>
           <Spinner size={24} />
+          <span className="srOnly" role="status">
+            Loading practice insights…
+          </span>
         </div>
       </div>
     );
@@ -127,7 +130,7 @@ export function PracticeInsightsView() {
   const insights: DoctorPracticeInsights = data ?? DEFAULT_MOCK_INSIGHTS;
 
   return (
-    <div className={styles.container} aria-label="Practice insights dashboard">
+    <section className={styles.container} aria-label="Practice insights dashboard">
       <header className={styles.header}>
         <div className={styles.titleRow}>
           <div>
@@ -176,6 +179,6 @@ export function PracticeInsightsView() {
         referrals={insights.referrals}
         messages={insights.messages}
       />
-    </div>
+    </section>
   );
 }
diff --git a/src/features/insights/components/TurnaroundMetricsCard.tsx b/src/features/insights/components/TurnaroundMetricsCard.tsx
index ad4db9c..7455ea5 100644
--- a/src/features/insights/components/TurnaroundMetricsCard.tsx
+++ b/src/features/insights/components/TurnaroundMetricsCard.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { ReferralTurnaroundMetrics, MessageResponseMetrics } from '../../../types/models';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './PracticeInsights.module.css';
 
 interface TurnaroundMetricsCardProps {
@@ -8,6 +9,7 @@ interface TurnaroundMetricsCardProps {
 }
 
 export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetricsCardProps) {
+  const { formatDuration, formatNumber, formatPercent } = useFormat();
   const [refViewMode, setRefViewMode] = useState<'chart' | 'table'>('chart');
   const [msgViewMode, setMsgViewMode] = useState<'chart' | 'table'>('chart');
 
@@ -56,7 +58,7 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
           <div className={styles.caveatBanner} role="note">
             <span className={styles.caveatPill}>Small sample caveat</span>
             <span>
-              Only {referrals.totalSent} referrals issued in this period. Turnaround averages may be skewed by anomalous delays.
+              Only {formatNumber(referrals.totalSent)} referrals issued in this period. Turnaround averages may be skewed by anomalous delays.
             </span>
           </div>
         )}
@@ -66,8 +68,8 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
             <span className={styles.statLabel}>Median acceptance</span>
             <span className={styles.statValue}>
               {referrals.medianAcceptanceHours < 24
-                ? `${referrals.medianAcceptanceHours.toFixed(1)}h`
-                : `${(referrals.medianAcceptanceHours / 24).toFixed(1)}d`}
+                ? formatDuration(referrals.medianAcceptanceHours, 'hour')
+                : formatDuration(referrals.medianAcceptanceHours / 24, 'day')}
             </span>
             <span className={styles.statHint}>50% accepted faster than this</span>
           </div>
@@ -75,10 +77,12 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
             <span className={styles.statLabel}>Average turnaround</span>
             <span className={styles.statValue}>
               {referrals.averageAcceptanceHours < 24
-                ? `${referrals.averageAcceptanceHours.toFixed(1)}h`
-                : `${(referrals.averageAcceptanceHours / 24).toFixed(1)}d`}
+                ? formatDuration(referrals.averageAcceptanceHours, 'hour')
+                : formatDuration(referrals.averageAcceptanceHours / 24, 'day')}
+            </span>
+            <span className={styles.statHint}>
+              {formatNumber(referrals.totalAccepted)} of {formatNumber(referrals.totalSent)} accepted
             </span>
-            <span className={styles.statHint}>{referrals.totalAccepted} of {referrals.totalSent} accepted</span>
           </div>
         </div>
 
@@ -89,31 +93,31 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
               <div
                 className={styles.distributionSegment}
                 style={{ width: `${refUnder24Pct}%`, background: 'var(--color-accent)' }}
-                title={`Under 24 hours: ${referrals.breakdownUnder24h}`}
+                title={`Under 24 hours: ${formatNumber(referrals.breakdownUnder24h)}`}
               />
               <div
                 className={styles.distributionSegment}
                 style={{ width: `${ref24to48Pct}%`, background: '#b87b28' }}
-                title={`24 to 48 hours: ${referrals.breakdown24to48h}`}
+                title={`24 to 48 hours: ${formatNumber(referrals.breakdown24to48h)}`}
               />
               <div
                 className={styles.distributionSegment}
                 style={{ width: `${refOver48Pct}%`, background: '#8c5b00' }}
-                title={`Over 48 hours: ${referrals.breakdownOver48h}`}
+                title={`Over 48 hours: ${formatNumber(referrals.breakdownOver48h)}`}
               />
             </div>
             <div className={styles.chartLegend}>
               <div className={styles.legendItem}>
                 <span className={styles.legendColor} style={{ background: 'var(--color-accent)' }} />
-                <span>&lt;24h ({referrals.breakdownUnder24h})</span>
+                <span>&lt;24h ({formatNumber(referrals.breakdownUnder24h)})</span>
               </div>
               <div className={styles.legendItem}>
                 <span className={styles.legendColor} style={{ background: '#b87b28' }} />
-                <span>24–48h ({referrals.breakdown24to48h})</span>
+                <span>24–48h ({formatNumber(referrals.breakdown24to48h)})</span>
               </div>
               <div className={styles.legendItem}>
                 <span className={styles.legendColor} style={{ background: '#8c5b00' }} />
-                <span>&gt;48h ({referrals.breakdownOver48h})</span>
+                <span>&gt;48h ({formatNumber(referrals.breakdownOver48h)})</span>
               </div>
             </div>
           </div>
@@ -132,27 +136,27 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
             <tbody>
               <tr>
                 <th scope="row">Under 24 hours</th>
-                <td className="num">{referrals.breakdownUnder24h}</td>
-                <td className="num">{refUnder24Pct.toFixed(1)}%</td>
+                <td className="num">{formatNumber(referrals.breakdownUnder24h)}</td>
+                <td className="num">{formatPercent(refUnder24Pct)}</td>
               </tr>
               <tr>
                 <th scope="row">24 to 48 hours</th>
-                <td className="num">{referrals.breakdown24to48h}</td>
-                <td className="num">{ref24to48Pct.toFixed(1)}%</td>
+                <td className="num">{formatNumber(referrals.breakdown24to48h)}</td>
+                <td className="num">{formatPercent(ref24to48Pct)}</td>
               </tr>
               <tr>
                 <th scope="row">Over 48 hours</th>
-                <td className="num">{referrals.breakdownOver48h}</td>
-                <td className="num">{refOver48Pct.toFixed(1)}%</td>
+                <td className="num">{formatNumber(referrals.breakdownOver48h)}</td>
+                <td className="num">{formatPercent(refOver48Pct)}</td>
               </tr>
               <tr style={{ fontWeight: 600 }}>
                 <th scope="row">Total Accepted</th>
-                <td className="num">{referrals.totalAccepted}</td>
-                <td className="num">100.0%</td>
+                <td className="num">{formatNumber(referrals.totalAccepted)}</td>
+                <td className="num">{formatPercent(100)}</td>
               </tr>
               <tr>
                 <th scope="row">Pending Acceptance</th>
-                <td className="num">{referrals.totalPending}</td>
+                <td className="num">{formatNumber(referrals.totalPending)}</td>
                 <td className="num">—</td>
               </tr>
             </tbody>
@@ -193,7 +197,7 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
           <div className={styles.caveatBanner} role="note">
             <span className={styles.caveatPill}>Small sample caveat</span>
             <span>
-              Only {messages.totalThreads} message threads in this period. Response averages may reflect single isolated conversations.
+              Only {formatNumber(messages.totalThreads)} message threads in this period. Response averages may reflect single isolated conversations.
             </span>
           </div>
         )}
@@ -203,15 +207,17 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
             <span className={styles.statLabel}>Median response</span>
             <span className={styles.statValue}>
               {messages.medianFirstResponseMinutes < 60
-                ? `${messages.medianFirstResponseMinutes}m`
-                : `${(messages.medianFirstResponseMinutes / 60).toFixed(1)}h`}
+                ? formatDuration(messages.medianFirstResponseMinutes, 'minute', 0)
+                : formatDuration(messages.medianFirstResponseMinutes / 60, 'hour')}
             </span>
             <span className={styles.statHint}>50% replied faster</span>
           </div>
           <div className={styles.summaryStat}>
             <span className={styles.statLabel}>Within 2 hours</span>
-            <span className={styles.statValue}>{messages.rateWithin2h.toFixed(0)}%</span>
-            <span className={styles.statHint}>{messages.respondedWithin2hCount} of {messages.totalThreads} threads</span>
+            <span className={styles.statValue}>{formatPercent(messages.rateWithin2h, 0)}</span>
+            <span className={styles.statHint}>
+              {formatNumber(messages.respondedWithin2hCount)} of {formatNumber(messages.totalThreads)} threads
+            </span>
           </div>
         </div>
 
@@ -222,31 +228,33 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
               <div
                 className={styles.distributionSegment}
                 style={{ width: `${msgWithin2hPct}%`, background: 'var(--color-accent)' }}
-                title={`Within 2 hours: ${messages.respondedWithin2hCount}`}
+                title={`Within 2 hours: ${formatNumber(messages.respondedWithin2hCount)}`}
               />
               <div
                 className={styles.distributionSegment}
                 style={{ width: `${msg2to24hPct}%`, background: '#b87b28' }}
-                title={`2 to 24 hours: ${messages.respondedWithin24hCount - messages.respondedWithin2hCount}`}
+                title={`2 to 24 hours: ${formatNumber(messages.respondedWithin24hCount - messages.respondedWithin2hCount)}`}
               />
               <div
                 className={styles.distributionSegment}
                 style={{ width: `${msgOver24hPct}%`, background: 'var(--color-surface-hover)' }}
-                title={`Over 24 hours: ${msgTotal - messages.respondedWithin24hCount}`}
+                title={`Over 24 hours: ${formatNumber(msgTotal - messages.respondedWithin24hCount)}`}
               />
             </div>
             <div className={styles.chartLegend}>
               <div className={styles.legendItem}>
                 <span className={styles.legendColor} style={{ background: 'var(--color-accent)' }} />
-                <span>&lt;2h ({messages.respondedWithin2hCount})</span>
+                <span>&lt;2h ({formatNumber(messages.respondedWithin2hCount)})</span>
               </div>
               <div className={styles.legendItem}>
                 <span className={styles.legendColor} style={{ background: '#b87b28' }} />
-                <span>2–24h ({Math.max(0, messages.respondedWithin24hCount - messages.respondedWithin2hCount)})</span>
+                <span>
+                  2–24h ({formatNumber(Math.max(0, messages.respondedWithin24hCount - messages.respondedWithin2hCount))})
+                </span>
               </div>
               <div className={styles.legendItem}>
                 <span className={styles.legendColor} style={{ background: 'var(--color-surface-hover)', border: '1px solid var(--color-border)' }} />
-                <span>&gt;24h ({Math.max(0, msgTotal - messages.respondedWithin24hCount)})</span>
+                <span>&gt;24h ({formatNumber(Math.max(0, msgTotal - messages.respondedWithin24hCount))})</span>
               </div>
             </div>
           </div>
@@ -265,23 +273,27 @@ export function TurnaroundMetricsCard({ referrals, messages }: TurnaroundMetrics
             <tbody>
               <tr>
                 <th scope="row">Within 2 hours</th>
-                <td className="num">{messages.respondedWithin2hCount}</td>
-                <td className="num">{msgWithin2hPct.toFixed(1)}%</td>
+                <td className="num">{formatNumber(messages.respondedWithin2hCount)}</td>
+                <td className="num">{formatPercent(msgWithin2hPct)}</td>
               </tr>
               <tr>
                 <th scope="row">2 to 24 hours</th>
-                <td className="num">{Math.max(0, messages.respondedWithin24hCount - messages.respondedWithin2hCount)}</td>
-                <td className="num">{msg2to24hPct.toFixed(1)}%</td>
+                <td className="num">
+                  {formatNumber(Math.max(0, messages.respondedWithin24hCount - messages.respondedWithin2hCount))}
+                </td>
+                <td className="num">{formatPercent(msg2to24hPct)}</td>
               </tr>
               <tr>
                 <th scope="row">Over 24 hours</th>
-                <td className="num">{Math.max(0, msgTotal - messages.respondedWithin24hCount)}</td>
-                <td className="num">{msgOver24hPct.toFixed(1)}%</td>
+                <td className="num">
+                  {formatNumber(Math.max(0, msgTotal - messages.respondedWithin24hCount))}
+                </td>
+                <td className="num">{formatPercent(msgOver24hPct)}</td>
               </tr>
               <tr style={{ fontWeight: 600 }}>
                 <th scope="row">Total Threads</th>
-                <td className="num">{messages.totalThreads}</td>
-                <td className="num">100.0%</td>
+                <td className="num">{formatNumber(messages.totalThreads)}</td>
+                <td className="num">{formatPercent(100)}</td>
               </tr>
             </tbody>
           </table>
diff --git a/src/features/insights/components/UtilisationChart.tsx b/src/features/insights/components/UtilisationChart.tsx
index c575364..0a76102 100644
--- a/src/features/insights/components/UtilisationChart.tsx
+++ b/src/features/insights/components/UtilisationChart.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { UtilisationWeek } from '../../../types/models';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './PracticeInsights.module.css';
 
 interface UtilisationChartProps {
@@ -17,6 +18,7 @@ export function UtilisationChart({
   overallUtilisationRate,
   sampleSizeWarning,
 }: UtilisationChartProps) {
+  const { formatDate, formatNumber, formatPercent } = useFormat();
   const [viewMode, setViewMode] = useState<'chart' | 'table'>('chart');
 
   const maxSlots = Math.max(1, ...weeks.map((w) => Math.max(w.offeredSlots, w.bookedSlots)));
@@ -54,7 +56,7 @@ export function UtilisationChart({
         <div className={styles.caveatBanner} role="note">
           <span className={styles.caveatPill}>Small sample caveat</span>
           <span>
-            Only {overallOfferedSlots} slots offered in this period. Percentage utilisation figures can fluctuate significantly with limited data points.
+            Only {formatNumber(overallOfferedSlots)} slots offered in this period. Percentage utilisation figures can fluctuate significantly with limited data points.
           </span>
         </div>
       )}
@@ -62,17 +64,17 @@ export function UtilisationChart({
       <div className={styles.summaryGrid}>
         <div className={styles.summaryStat}>
           <span className={styles.statLabel}>Offered slots</span>
-          <span className={styles.statValue}>{overallOfferedSlots}</span>
+          <span className={styles.statValue}>{formatNumber(overallOfferedSlots)}</span>
           <span className={styles.statHint}>Total availability</span>
         </div>
         <div className={styles.summaryStat}>
           <span className={styles.statLabel}>Booked slots</span>
-          <span className={styles.statValue}>{overallBookedSlots}</span>
+          <span className={styles.statValue}>{formatNumber(overallBookedSlots)}</span>
           <span className={styles.statHint}>Patient reservations</span>
         </div>
         <div className={styles.summaryStat}>
           <span className={styles.statLabel}>Utilisation rate</span>
-          <span className={styles.statValue}>{overallUtilisationRate.toFixed(1)}%</span>
+          <span className={styles.statValue}>{formatPercent(overallUtilisationRate)}</span>
           <span className={styles.statHint}>Booked / Offered</span>
         </div>
       </div>
@@ -108,8 +110,11 @@ export function UtilisationChart({
               const offeredY = 190 - offeredHeight;
               const bookedY = 190 - bookedHeight;
 
+              // The chart has one accessible name; the adjacent table is
+              // the keyboard/screen-reader source of detail. Individual bars
+              // must not be focusable.
               return (
-                <g key={w.weekLabel} tabIndex={0} aria-label={`${w.weekLabel}: ${w.bookedSlots} of ${w.offeredSlots} slots booked (${w.utilisationRate.toFixed(1)}%)`}>
+                <g key={w.weekLabel} aria-hidden="true">
                   {/* Offered slot bar (surface/accent light) */}
                   <rect
                     x={xCenter - barWidth - 2}
@@ -138,7 +143,7 @@ export function UtilisationChart({
                     fill="var(--color-text)"
                     textAnchor="middle"
                   >
-                    {w.utilisationRate.toFixed(0)}%
+                    {formatPercent(w.utilisationRate, 0)}
                   </text>
                   {/* X axis week label */}
                   <text
@@ -186,11 +191,13 @@ export function UtilisationChart({
             {weeks.map((w) => (
               <tr key={w.weekLabel}>
                 <th scope="row">{w.weekLabel}</th>
-                <td>{w.startDate} to {w.endDate}</td>
-                <td className="num">{w.offeredSlots}</td>
-                <td className="num">{w.bookedSlots}</td>
-                <td className="num">{w.completedSlots}</td>
-                <td className="num">{w.utilisationRate.toFixed(1)}%</td>
+                <td>
+                  {formatDate(w.startDate)} – {formatDate(w.endDate)}
+                </td>
+                <td className="num">{formatNumber(w.offeredSlots)}</td>
+                <td className="num">{formatNumber(w.bookedSlots)}</td>
+                <td className="num">{formatNumber(w.completedSlots)}</td>
+                <td className="num">{formatPercent(w.utilisationRate)}</td>
               </tr>
             ))}
           </tbody>
diff --git a/src/features/messaging/components/DoctorInbox.module.css b/src/features/messaging/components/DoctorInbox.module.css
index 99540b2..73d89e3 100644
--- a/src/features/messaging/components/DoctorInbox.module.css
+++ b/src/features/messaging/components/DoctorInbox.module.css
@@ -20,7 +20,7 @@
 }
 
 .badge {
-  margin-left: auto;
+  margin-inline-start: auto;
   padding: 0.2rem 0.6rem;
   border-radius: var(--radius-full);
   background: var(--color-accent);
@@ -47,8 +47,14 @@
   font-size: var(--text-sm);
 }
 
+.table tbody th {
+  background: transparent;
+  text-align: start;
+  font-weight: 600;
+}
+
 .table th {
-  text-align: left;
+  text-align: start;
   color: var(--color-text-muted);
   font-weight: 600;
   padding: var(--space-3) var(--space-4);
@@ -79,7 +85,7 @@
 .waitingCol,
 .unreadCol,
 .actionCol {
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
 }
 
diff --git a/src/features/messaging/components/DoctorInbox.tsx b/src/features/messaging/components/DoctorInbox.tsx
index efc2cb5..dd70be6 100644
--- a/src/features/messaging/components/DoctorInbox.tsx
+++ b/src/features/messaging/components/DoctorInbox.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useMessageThreads } from '../hooks/useMessageThreads';
 import { Button } from '../../../components/Button';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './DoctorInbox.module.css';
 
 function truncate(text: string | undefined | null, max = 60) {
@@ -22,6 +23,7 @@ type ThreadFilter = 'all' | 'unread' | 'closing_soon';
 const FILTERS: ThreadFilter[] = ['all', 'unread', 'closing_soon'];
 
 export function DoctorInbox() {
+  const { formatNumber } = useFormat();
   const [filter, setFilter] = useState<ThreadFilter>('all');
   const [cursor, setCursor] = useState<string | null>(null);
 
@@ -62,6 +64,7 @@ export function DoctorInbox() {
               setCursor(null);
             }}
             className={filter === f ? styles.activeFilter : undefined}
+            aria-pressed={filter === f}
           >
             {filterLabel(f)}
           </Button>
@@ -74,24 +77,29 @@ export function DoctorInbox() {
         <p className={styles.empty}>No threads match the current filter.</p>
       ) : (
         <table className={styles.table}>
+          <caption className="srOnly">
+            Patient message threads, oldest unanswered first, with waiting time and unread count
+          </caption>
           <thead>
             <tr>
-              <th>Patient</th>
-              <th>Last message</th>
-              <th className={styles.waitingCol}>Waiting</th>
-              <th className={styles.unreadCol}>Unread</th>
-              <th className={styles.actionCol}>Action</th>
+              <th scope="col">Patient</th>
+              <th scope="col">Last message</th>
+              <th scope="col" className={styles.waitingCol}>Waiting</th>
+              <th scope="col" className={styles.unreadCol}>Unread</th>
+              <th scope="col" className={styles.actionCol}>Action</th>
             </tr>
           </thead>
           <tbody>
             {threads.map((thread) => (
               <tr key={thread.id} className={styles.row}>
-                <td className={styles.name}>
+                <th scope="row" className={styles.name}>
                   <Link to={'/care/threads/' + thread.id}>{thread.patientName}</Link>
-                </td>
+                </th>
                 <td className={styles.preview}>{truncate(thread.lastPreview)}</td>
                 <td className={styles.waitingCol}>
-                  {thread.waitingMinutes == null ? '—' : thread.waitingMinutes + ' min'}
+                  {thread.waitingMinutes == null
+            ? '—'
+            : `${formatNumber(thread.waitingMinutes)} min`}
                 </td>
                 <td className={styles.unreadCol}>
                   {thread.unreadCount > 0 ? (
diff --git a/src/features/messaging/components/UnreadBadge.module.css b/src/features/messaging/components/UnreadBadge.module.css
index aa3e18c..7768e65 100644
--- a/src/features/messaging/components/UnreadBadge.module.css
+++ b/src/features/messaging/components/UnreadBadge.module.css
@@ -7,7 +7,7 @@
   padding: 0 6px;
   border-radius: 999px;
   background: var(--color-danger);
-  color: #ffffff;
+  color: var(--color-danger-contrast);
   font-size: var(--text-xs);
   font-weight: 700;
   line-height: 1;
diff --git a/src/features/orders/components/FacilityCard.tsx b/src/features/orders/components/FacilityCard.tsx
index 51a5614..2281c44 100644
--- a/src/features/orders/components/FacilityCard.tsx
+++ b/src/features/orders/components/FacilityCard.tsx
@@ -1,5 +1,6 @@
 import type { FacilityWithDistance } from '../../../types/models';
 import { Button } from '../../../components/Button';
+import { useFormat } from '../../../i18n/useFormat';
 import styles from './FacilityFinder.module.css';
 
 interface FacilityCardProps {
@@ -9,6 +10,7 @@ interface FacilityCardProps {
 }
 
 export function FacilityCard({ facility, isSelected = false, onSelect }: FacilityCardProps) {
+  const { formatNumber } = useFormat();
   const isPharmacy = facility.type === 'pharmacy';
 
   return (
@@ -35,7 +37,12 @@ export function FacilityCard({ facility, isSelected = false, onSelect }: Facilit
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'var(--space-2)' }}>
         {facility.distanceKm !== undefined && facility.distanceKm !== null ? (
           <span className={styles.distancePill}>
-            📍 {facility.distanceKm.toFixed(1)} km away
+            <span aria-hidden="true">📍</span>{' '}
+            {formatNumber(facility.distanceKm, {
+              minimumFractionDigits: 1,
+              maximumFractionDigits: 1,
+            })}{' '}
+            km away
           </span>
         ) : (
           <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-faint)' }}>Distance unknown</span>
diff --git a/src/features/orders/components/FacilityFinder.module.css b/src/features/orders/components/FacilityFinder.module.css
index a13e540..6c61a43 100644
--- a/src/features/orders/components/FacilityFinder.module.css
+++ b/src/features/orders/components/FacilityFinder.module.css
@@ -52,7 +52,7 @@
 
 .tabActive {
   background: var(--color-accent);
-  color: #ffffff;
+  color: var(--color-accent-contrast);
   border-color: var(--color-accent);
 }
 
@@ -75,7 +75,7 @@
   gap: var(--space-3);
   max-height: 600px;
   overflow-y: auto;
-  padding-right: var(--space-2);
+  padding-inline-end: var(--space-2);
 }
 
 .mapColumn {
@@ -100,8 +100,7 @@
 .mapTilesGrid {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -119,8 +118,7 @@
 .mapOverlays {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   bottom: 0;
   pointer-events: none;
 }
@@ -162,7 +160,7 @@
 .pinIcon {
   transform: rotate(45deg);
   font-size: 11px;
-  color: #ffffff;
+  color: var(--color-accent-contrast);
 }
 
 .markerLabel {
@@ -180,7 +178,7 @@
 .mapAttribution {
   position: absolute;
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   padding: 2px 8px;
   background: rgba(255, 255, 255, 0.85);
   font-size: 10px;
diff --git a/src/features/orders/components/FacilityMap.tsx b/src/features/orders/components/FacilityMap.tsx
index 9690d13..d5ad485 100644
--- a/src/features/orders/components/FacilityMap.tsx
+++ b/src/features/orders/components/FacilityMap.tsx
@@ -108,6 +108,7 @@ export function FacilityMap({
                 onClick={() => onMarkerClick?.(fac)}
                 role="button"
                 tabIndex={0}
+                aria-pressed={isSelected}
                 aria-label={`Marker for ${fac.name}`}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
diff --git a/src/features/payments/components/CreatePaymentIntentForm.tsx b/src/features/payments/components/CreatePaymentIntentForm.tsx
index eb08929..92f9a0e 100644
--- a/src/features/payments/components/CreatePaymentIntentForm.tsx
+++ b/src/features/payments/components/CreatePaymentIntentForm.tsx
@@ -41,9 +41,14 @@ export function CreatePaymentIntentForm({ onCreated }: { onCreated: (intentId: s
       <h2>Create payment intent</h2>
       <FormError message={submitError} />
 
-      <label>
+      <label htmlFor="payment-order-type" style={{ display: 'block', marginBottom: 'var(--space-3)' }}>
         Order type
-        <select value={orderType} onChange={(e) => setOrderType(e.target.value as OrderTypeForPayment)}>
+        <select
+          id="payment-order-type"
+          value={orderType}
+          onChange={(e) => setOrderType(e.target.value as OrderTypeForPayment)}
+          style={{ display: 'block', width: '100%', minHeight: 'var(--target-size)' }}
+        >
           <option value="lab_order">Lab order</option>
           <option value="prescription">Prescription</option>
         </select>
@@ -60,6 +65,7 @@ export function CreatePaymentIntentForm({ onCreated }: { onCreated: (intentId: s
       <TextField
         label="Amount (stroops)"
         inputMode="numeric"
+        hint="Minor units, e.g. 10000000 = 1.00 XLM."
         value={amountStroops}
         onChange={(e) => setAmountStroops(e.target.value)}
         required
diff --git a/src/features/payments/components/PaymentIntentPanel.tsx b/src/features/payments/components/PaymentIntentPanel.tsx
index 08bff60..3e7e409 100644
--- a/src/features/payments/components/PaymentIntentPanel.tsx
+++ b/src/features/payments/components/PaymentIntentPanel.tsx
@@ -1,6 +1,7 @@
 import { Button } from '../../../components/Button';
 import { FormError } from '../../../components/FormError';
 import { ApiError } from '../../../services/api-client';
+import { useFormat } from '../../../i18n/useFormat';
 import { usePaymentIntent, useFundPaymentIntent, useReleasePaymentIntent, useRefundPaymentIntent } from '../hooks/usePaymentIntent';
 import type { PaymentIntentStatus } from '../../../types/models';
 
@@ -17,6 +18,7 @@ const NEXT_ACTION: Record<PaymentIntentStatus, string | null> = {
  * triggers a real Stellar contract call on docforum-core's side — this
  * repo never touches Stellar directly (hard rule 1). */
 export function PaymentIntentPanel({ intentId }: { intentId: string }) {
+  const { formatAssetAmount } = useFormat();
   const intentQuery = usePaymentIntent(intentId);
   const fundMutation = useFundPaymentIntent();
   const releaseMutation = useReleasePaymentIntent();
@@ -46,7 +48,10 @@ export function PaymentIntentPanel({ intentId }: { intentId: string }) {
           {intent.orderType} · {intent.orderId}
         </dd>
         <dt>Amount</dt>
-        <dd>{intent.amountStroops} stroops</dd>
+        <dd>
+          {formatAssetAmount(intent.amountStroops, 'XLM', { decimals: 7 })}{' '}
+          <small>({intent.amountStroops} stroops)</small>
+        </dd>
         {intent.escrowId && (
           <>
             <dt>On-chain escrow id</dt>
diff --git a/src/features/payments/hooks/useWalletLink.ts b/src/features/payments/hooks/useWalletLink.ts
index a538e7c..a974887 100644
--- a/src/features/payments/hooks/useWalletLink.ts
+++ b/src/features/payments/hooks/useWalletLink.ts
@@ -1,8 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import * as paymentsService from '../../../services/payments-service';
 import { useAuthStore } from '../../../store/auth-store';
-import { ApiError } from '../../../services/api-client';
-
 const WALLET_LINK_QUERY_KEY = ['payments', 'wallet-link'] as const;
 
 export function useOwnWalletLink() {
@@ -12,10 +10,9 @@ export function useOwnWalletLink() {
     queryKey: WALLET_LINK_QUERY_KEY,
     queryFn: () => paymentsService.getOwnWalletLink(accessToken!),
     enabled: Boolean(accessToken),
-    // No wallet linked yet is an expected, non-error state, not a fetch
-    // failure — the endpoint 404s in that case (see docforum-core
-    // controller). Don't retry a 404 as if it were transient.
-    retry: (failureCount, error) => error instanceof ApiError && error.status === 404 ? false : failureCount < 2,
+    // Retry policy lives in apiFetch; React Query must not double-retry.
+    // A missing wallet is a 404 and is never retried there.
+    retry: false,
   });
 }
 
diff --git a/src/features/queue/components/QueuePanel.a11y.test.tsx b/src/features/queue/components/QueuePanel.a11y.test.tsx
new file mode 100644
index 0000000..650faf3
--- /dev/null
+++ b/src/features/queue/components/QueuePanel.a11y.test.tsx
@@ -0,0 +1,79 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { axe } from 'jest-axe';
+import { render, screen } from '../../../test/render';
+import { QueuePanel } from './QueuePanel';
+import { useAuthStore } from '../../../store/auth-store';
+import * as queueService from '../../../services/queue-service';
+import type { QueueEntry } from '../../../types/models';
+
+vi.mock('../../../services/queue-service');
+
+const QUEUE: QueueEntry[] = [
+  {
+    appointmentId: 'appt-1',
+    patientProfileId: 'pat-1',
+    fullName: 'Ada Patient',
+    checkedInAt: '2026-01-01T09:05:00Z',
+    queuePosition: 1,
+    status: 'checked_in',
+  },
+  {
+    appointmentId: 'appt-2',
+    patientProfileId: 'pat-2',
+    fullName: 'Ben Patient',
+    checkedInAt: '2026-01-01T09:10:00Z',
+    queuePosition: 2,
+    status: 'in_progress',
+  },
+];
+
+beforeEach(() => {
+  useAuthStore.setState({ accessToken: 'test-token', user: null });
+  vi.mocked(queueService.listQueue).mockResolvedValue(QUEUE);
+  vi.mocked(queueService.listTodayAppointments).mockResolvedValue([]);
+  vi.mocked(queueService.getRunningDelay).mockResolvedValue({
+    computedDelayMin: 5,
+    manualOverrideMin: null,
+    effectiveDelayMin: 5,
+  });
+});
+
+describe('QueuePanel accessibility (#90)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<QueuePanel />);
+    await screen.findByText('Ada Patient');
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('gives the queue table a caption and column headers', async () => {
+    render(<QueuePanel />);
+    await screen.findByText('Ada Patient');
+
+    const table = screen.getByRole('table', { name: /checked-in patients in queue order/i });
+    expect(table).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Patient' })).toBeInTheDocument();
+    expect(screen.getByRole('rowheader', { name: 'Ada Patient' })).toBeInTheDocument();
+  });
+
+  it('keeps a persistent polite live region for batched updates', async () => {
+    render(<QueuePanel />);
+    await screen.findByText('Ada Patient');
+
+    const statusRegions = screen.getAllByRole('status');
+    expect(statusRegions.length).toBeGreaterThan(0);
+    expect(
+      statusRegions.some((region) => region.getAttribute('aria-live') === 'polite'),
+    ).toBe(true);
+  });
+
+  it('labels row actions with the patient name', async () => {
+    render(<QueuePanel />);
+    await screen.findByText('Ada Patient');
+    expect(
+      screen.getByRole('button', { name: /start visit for ada patient/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /complete visit for ben patient/i }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/features/queue/components/QueuePanel.module.css b/src/features/queue/components/QueuePanel.module.css
index 5964477..32c85a4 100644
--- a/src/features/queue/components/QueuePanel.module.css
+++ b/src/features/queue/components/QueuePanel.module.css
@@ -64,7 +64,7 @@
 }
 
 .table th {
-  text-align: left;
+  text-align: start;
   color: var(--color-text-muted);
   font-weight: 600;
   padding: var(--space-3) var(--space-4);
@@ -76,6 +76,19 @@
   border-bottom: 1px solid var(--color-border);
 }
 
+/* Row headers name the patient; they must not inherit the column-header
+   surface treatment. */
+.table tbody th {
+  background: transparent;
+  color: var(--color-text);
+  font-weight: 500;
+  text-align: start;
+}
+
+.nameCell {
+  font-weight: 500;
+}
+
 .row {
   height: 56px; /* tablet-friendly touch target */
 }
diff --git a/src/features/queue/components/QueuePanel.tsx b/src/features/queue/components/QueuePanel.tsx
index 9291a56..470f9e3 100644
--- a/src/features/queue/components/QueuePanel.tsx
+++ b/src/features/queue/components/QueuePanel.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import {
   useQueue,
   useVisitActions,
@@ -7,79 +7,163 @@ import {
   UNDO_WINDOW_MS,
 } from '../hooks/useQueue';
 import { Button } from '../../../components/Button';
+import { LiveRegion } from '../../../components/LiveRegion';
+import { useAnnouncer } from '../../../hooks/useAnnouncer';
+import { useFormat } from '../../../i18n/useFormat';
+import type { QueueEntry } from '../../../types/models';
 import styles from './QueuePanel.module.css';
 
-function formatTime(iso: string | undefined) {
-  if (!iso) return '—';
-  return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+function statusLabel(status: string) {
+  return (
+    {
+      checked_in: 'Checked in',
+      in_progress: 'In progress',
+      completed: 'Completed',
+    }[status] ?? status
+  );
 }
 
-function statusLabel(status: string) {
-  return {
-    checked_in: 'Checked in',
-    in_progress: 'In progress',
-    completed: 'Completed',
-  }[status] ?? status;
+/** Count-only summary — deliberately no patient names, so it can be announced. */
+function queueSummary(entries: QueueEntry[]): string {
+  const waiting = entries.filter((entry) => entry.status === 'checked_in').length;
+  const inProgress = entries.filter((entry) => entry.status === 'in_progress').length;
+  const completed = entries.filter((entry) => entry.status === 'completed').length;
+  const parts = [`${waiting} waiting`, `${inProgress} in progress`];
+  if (completed > 0) parts.push(`${completed} completed`);
+  return `${entries.length} ${entries.length === 1 ? 'patient' : 'patients'} in the queue: ${parts.join(', ')}.`;
 }
 
+/**
+ * Polite, batched queue announcements. The queue refetches every 30s; a
+ * screen reader must hear one summary per change, not one message per row.
+ */
+const QueueAnnouncements = memo(function QueueAnnouncements({ entries }: { entries: QueueEntry[] }) {
+  const summary = queueSummary(entries);
+  const { message, announce } = useAnnouncer();
+  const previous = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (previous.current === null) {
+      previous.current = summary;
+      return;
+    }
+    if (previous.current !== summary) {
+      previous.current = summary;
+      announce(`Queue updated. ${summary}`);
+    }
+  }, [summary, announce]);
+
+  return <LiveRegion message={message} />;
+});
+
 export function QueuePanel() {
   const { data: queue = [] } = useQueue();
   const { startVisit, completeVisit, undo, isPending, hasPendingUndo } = useVisitActions();
   const { data: delay } = useRunningDelay();
   const updateDelay = useUpdateRunningDelay();
+  const { formatTime, formatNumber } = useFormat();
+  const { message: actionMessage, announce } = useAnnouncer();
 
   const [overrideMin, setOverrideMin] = useState('');
   const [undoTarget, setUndoTarget] = useState<string | null>(null);
 
-  const byPosition = [...queue].sort((a, b) => a.queuePosition - b.queuePosition);
+  const byPosition = useMemo(
+    () => [...queue].sort((a, b) => a.queuePosition - b.queuePosition),
+    [queue],
+  );
+
+  const entryName = (appointmentId: string) =>
+    byPosition.find((entry) => entry.appointmentId === appointmentId)?.fullName ?? 'patient';
 
   const handleUndo = () => {
-    if (undoTarget) undo(undoTarget);
+    if (undoTarget) {
+      announce(`Undid the last queue action for ${entryName(undoTarget)}.`);
+      undo(undoTarget);
+    }
     setUndoTarget(null);
   };
 
+  const handleStart = (entry: QueueEntry) => {
+    setUndoTarget(entry.appointmentId);
+    announce(
+      `Starting visit for ${entry.fullName}. Undo is available for ${Math.round(UNDO_WINDOW_MS / 1000)} seconds.`,
+    );
+    startVisit(entry.appointmentId);
+  };
+
+  const handleComplete = (entry: QueueEntry) => {
+    setUndoTarget(entry.appointmentId);
+    announce(`Completing visit for ${entry.fullName}. Undo is available.`);
+    completeVisit(entry.appointmentId);
+  };
+
   const handleApplyOverride = () => {
     const value = overrideMin.trim() === '' ? null : parseInt(overrideMin, 10);
-    updateDelay.mutate({ manualOverrideMin: value });
+    updateDelay.mutate(
+      { manualOverrideMin: value },
+      {
+        onSuccess: (next) =>
+          announce(
+            next.manualOverrideMin == null
+              ? 'Running delay override cleared.'
+              : `Running delay set to ${next.effectiveDelayMin} minutes.`,
+          ),
+      },
+    );
     setOverrideMin('');
   };
 
   return (
-    <section className={styles.panel}>
+    <section className={styles.panel} aria-labelledby="queue-heading">
       <header className={styles.panelHeader}>
-        <h2>Live queue</h2>
+        <h2 id="queue-heading">Live queue</h2>
         <div className={styles.runningDelay}>
-          <span className={styles.label}>Running delay</span>
-          <span className={styles.value}>
-            {delay?.effectiveDelayMin == null ? '—' : `${delay.effectiveDelayMin} min`}
+          <span className={styles.label} id="running-delay-label">
+            Running delay
+          </span>
+          <span
+            className={styles.value}
+            aria-live="off"
+            aria-describedby="running-delay-label"
+          >
+            {delay?.effectiveDelayMin == null
+              ? '—'
+              : `${formatNumber(delay.effectiveDelayMin)} min`}
             {delay?.manualOverrideMin != null && delay.manualOverrideMin > 0
-              ? ` (${delay.manualOverrideMin} min late)`
+              ? ` (${formatNumber(delay.manualOverrideMin)} min late)`
               : ''}
           </span>
         </div>
       </header>
 
       {hasPendingUndo && undoTarget && (
-        <div className={styles.undoToast}>
+        <div className={styles.undoToast} role="group" aria-label="Undo last queue action">
           Action applied.{' '}
           <Button variant="secondary" onClick={handleUndo}>
             Undo
           </Button>
-          <span className={styles.undoHint}>reverts in {Math.round(UNDO_WINDOW_MS / 1000)}s</span>
+          <span className={styles.undoHint}>
+            reverts in {Math.round(UNDO_WINDOW_MS / 1000)}s
+          </span>
         </div>
       )}
 
       {byPosition.length === 0 ? (
         <p className={styles.empty}>No checked-in patients yet.</p>
       ) : (
-        <table className={styles.table}>
+        <table className={styles.table} aria-busy={isPending}>
+          <caption className="srOnly">
+            Today&apos;s checked-in patients in queue order, with visit status and actions
+          </caption>
           <thead>
             <tr>
-              <th>#</th>
-              <th>Patient</th>
-              <th>Checked in</th>
-              <th>Status</th>
-              <th className={styles.actionsCol}>Action</th>
+              <th scope="col">#</th>
+              <th scope="col">Patient</th>
+              <th scope="col">Checked in</th>
+              <th scope="col">Status</th>
+              <th scope="col" className={styles.actionsCol}>
+                Action
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -87,9 +171,13 @@ export function QueuePanel() {
               const isPendingAction = isPending;
               return (
                 <tr key={entry.appointmentId} className={styles.row}>
-                  <td className={styles.pos}>{entry.queuePosition}</td>
-                  <td>{entry.fullName}</td>
-                  <td>{formatTime(entry.checkedInAt)}</td>
+                  <td className={styles.pos}>{formatNumber(entry.queuePosition)}</td>
+                  <th scope="row" className={styles.nameCell}>
+                    {entry.fullName}
+                  </th>
+                  <td>
+                    <time dateTime={entry.checkedInAt}>{formatTime(entry.checkedInAt)}</time>
+                  </td>
                   <td>
                     <span className={styles.statusPill} data-status={entry.status}>
                       {statusLabel(entry.status)}
@@ -98,12 +186,10 @@ export function QueuePanel() {
                   <td className={styles.actionsCol}>
                     {entry.status === 'checked_in' && (
                       <Button
-                        onClick={() => {
-                          setUndoTarget(entry.appointmentId);
-                          startVisit(entry.appointmentId);
-                        }}
+                        onClick={() => handleStart(entry)}
                         disabled={isPendingAction}
                         loading={isPendingAction}
+                        aria-label={`Start visit for ${entry.fullName}`}
                       >
                         Start
                       </Button>
@@ -111,12 +197,10 @@ export function QueuePanel() {
                     {entry.status === 'in_progress' && (
                       <Button
                         variant="secondary"
-                        onClick={() => {
-                          setUndoTarget(entry.appointmentId);
-                          completeVisit(entry.appointmentId);
-                        }}
+                        onClick={() => handleComplete(entry)}
                         disabled={isPendingAction}
                         loading={isPendingAction}
+                        aria-label={`Complete visit for ${entry.fullName}`}
                       >
                         Complete
                       </Button>
@@ -130,12 +214,17 @@ export function QueuePanel() {
         </table>
       )}
 
+      <QueueAnnouncements entries={byPosition} />
+      <LiveRegion message={actionMessage} />
+
       <div className={styles.override}>
         <label htmlFor="manual-override">Manual override</label>
         <input
           id="manual-override"
           type="number"
+          inputMode="numeric"
           placeholder="min"
+          aria-describedby="manual-override-hint"
           value={overrideMin}
           onChange={(e) => setOverrideMin(e.target.value)}
           className={styles.overrideInput}
@@ -147,6 +236,9 @@ export function QueuePanel() {
         >
           Set
         </Button>
+        <span id="manual-override-hint" className="srOnly">
+          Minutes to add to the computed running delay. Leave blank to clear the override.
+        </span>
       </div>
     </section>
   );
diff --git a/src/hooks/useAnnouncer.test.tsx b/src/hooks/useAnnouncer.test.tsx
new file mode 100644
index 0000000..782157b
--- /dev/null
+++ b/src/hooks/useAnnouncer.test.tsx
@@ -0,0 +1,52 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useAnnouncer } from './useAnnouncer';
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('useAnnouncer', () => {
+  it('batches rapid updates into a single announcement', () => {
+    vi.useFakeTimers();
+    const { result } = renderHook(() => useAnnouncer(800));
+
+    act(() => {
+      result.current.announce('Queue updated. 2 waiting.');
+      result.current.announce('Ada Patient checked in.');
+      result.current.announce('Ada Patient checked in.');
+    });
+
+    expect(result.current.message).toBe('');
+
+    act(() => {
+      vi.advanceTimersByTime(800);
+    });
+
+    // Duplicates collapsed; both distinct messages present.
+    expect(result.current.message).toBe(
+      'Queue updated. 2 waiting. Ada Patient checked in.',
+    );
+  });
+
+  it('does not announce the same batch twice, and can be reset', () => {
+    vi.useFakeTimers();
+    const { result } = renderHook(() => useAnnouncer(100));
+
+    act(() => {
+      result.current.announce('One update.');
+    });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current.message).toBe('One update.');
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.message).toBe('');
+  });
+});
diff --git a/src/hooks/useAnnouncer.ts b/src/hooks/useAnnouncer.ts
new file mode 100644
index 0000000..28e23ad
--- /dev/null
+++ b/src/hooks/useAnnouncer.ts
@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Default batching window. Live queues refetch on an interval and can
+ * change several rows at once; announcing each row would flood a screen
+ * reader. Rapid messages are collected and announced once per window.
+ */
+export const ANNOUNCEMENT_BATCH_MS = 800;
+
+export interface Announcer {
+  /** Latest batched message, safe to render inside a polite live region. */
+  message: string;
+  /** Queue a message; multiple calls inside the window are merged. */
+  announce: (text: string) => void;
+  /** Drop the pending batch and clear the region. */
+  reset: () => void;
+}
+
+export function useAnnouncer(batchMs: number = ANNOUNCEMENT_BATCH_MS): Announcer {
+  const [message, setMessage] = useState('');
+  const pending = useRef<string[]>([]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flush = useCallback(() => {
+    timer.current = null;
+    const unique = Array.from(new Set(pending.current.filter(Boolean)));
+    pending.current = [];
+    if (unique.length > 0) setMessage(unique.join(' '));
+  }, []);
+
+  const announce = useCallback(
+    (text: string) => {
+      if (!text) return;
+      pending.current.push(text);
+      if (timer.current) return;
+      timer.current = setTimeout(flush, batchMs);
+    },
+    [batchMs, flush],
+  );
+
+  const reset = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    pending.current = [];
+    setMessage('');
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  return { message, announce, reset };
+}
diff --git a/src/hooks/useFocusTrap.ts b/src/hooks/useFocusTrap.ts
new file mode 100644
index 0000000..09f23b9
--- /dev/null
+++ b/src/hooks/useFocusTrap.ts
@@ -0,0 +1,87 @@
+import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+function focusableItems(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+    (element) =>
+      !element.hasAttribute('disabled') &&
+      element.getAttribute('aria-hidden') !== 'true' &&
+      element.tabIndex !== -1,
+  );
+}
+
+/**
+ * Dialog focus management (WCAG 2.2 AA: 2.4.3 focus order, 2.1.2 no
+ * keyboard trap, 2.4.7 focus visible). While `active`:
+ * - focus moves to the first focusable element (or the panel itself),
+ * - Tab/Shift+Tab wrap inside the dialog,
+ * - Escape closes it,
+ * - focus returns to the trigger on close.
+ */
+export function useFocusTrap(
+  containerRef: RefObject<HTMLElement | null>,
+  active: boolean,
+  onClose: () => void,
+): void {
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const previouslyFocused =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+    const initial = focusableItems(container)[0] ?? container;
+    initial.focus();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        onCloseRef.current();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+
+      const focusable = focusableItems(container);
+      if (focusable.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeElement = document.activeElement;
+
+      if (event.shiftKey && (activeElement === first || activeElement === container)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown, true);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, true);
+      if (previouslyFocused && previouslyFocused.isConnected) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [active, containerRef]);
+}
diff --git a/src/hooks/useOnlineStatus.ts b/src/hooks/useOnlineStatus.ts
new file mode 100644
index 0000000..fbcdffd
--- /dev/null
+++ b/src/hooks/useOnlineStatus.ts
@@ -0,0 +1,16 @@
+import { useSyncExternalStore } from 'react';
+import { onlineManager } from '@tanstack/react-query';
+
+/**
+ * Subscribes to React Query's `onlineManager`, which is wired to the
+ * browser's online/offline events in `main.tsx`. Queries pause while
+ * offline and resume on reconnect (`networkMode: 'online'`).
+ */
+export function useOnlineStatus(): boolean {
+  return useSyncExternalStore(
+    (onStoreChange) => onlineManager.subscribe(onStoreChange),
+    () => onlineManager.isOnline(),
+    // SSR/test fallback: assume online so nothing is hidden unnecessarily.
+    () => true,
+  );
+}
diff --git a/src/i18n/LocaleSwitcher.module.css b/src/i18n/LocaleSwitcher.module.css
new file mode 100644
index 0000000..cac2aa3
--- /dev/null
+++ b/src/i18n/LocaleSwitcher.module.css
@@ -0,0 +1,23 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.label {
+  white-space: nowrap;
+}
+
+.select {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  color: var(--color-text);
+  background: var(--color-bg-raised);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  padding: 0.35rem 0.5rem;
+  min-block-size: 2rem;
+  max-inline-size: 15rem;
+}
diff --git a/src/i18n/LocaleSwitcher.tsx b/src/i18n/LocaleSwitcher.tsx
new file mode 100644
index 0000000..a54da32
--- /dev/null
+++ b/src/i18n/LocaleSwitcher.tsx
@@ -0,0 +1,31 @@
+import { LOCALE_META, SUPPORTED_LOCALES, type AppLocale } from './format';
+import { useLocaleStore } from './locale-store';
+import styles from './LocaleSwitcher.module.css';
+
+/**
+ * Visible locale switch used to verify formatting and RTL mirroring.
+ * A full i18n framework is a separate issue; this control only changes how
+ * dates/numbers/amounts are formatted and which writing direction the
+ * layout uses.
+ */
+export function LocaleSwitcher() {
+  const locale = useLocaleStore((state) => state.locale);
+  const setLocale = useLocaleStore((state) => state.setLocale);
+
+  return (
+    <label className={styles.root}>
+      <span className={styles.label}>Locale</span>
+      <select
+        className={styles.select}
+        value={locale}
+        onChange={(event) => setLocale(event.target.value as AppLocale)}
+      >
+        {SUPPORTED_LOCALES.map((value) => (
+          <option key={value} value={value}>
+            {LOCALE_META[value].label} ({LOCALE_META[value].example})
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/src/i18n/LocaleSync.test.tsx b/src/i18n/LocaleSync.test.tsx
new file mode 100644
index 0000000..20bc549
--- /dev/null
+++ b/src/i18n/LocaleSync.test.tsx
@@ -0,0 +1,43 @@
+import { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { render, screen } from '../test/render';
+import { LocaleSync } from './LocaleSync';
+import { LocaleSwitcher } from './LocaleSwitcher';
+import { useLocaleStore } from './locale-store';
+
+afterEach(() => {
+  act(() => {
+    useLocaleStore.getState().setLocale('en-US');
+  });
+  document.documentElement.lang = 'en';
+  document.documentElement.dir = 'ltr';
+});
+
+describe('locale direction switch (#88)', () => {
+  it('sets lang and dir from the active locale', () => {
+    render(<LocaleSync />);
+
+    expect(document.documentElement.dir).toBe('ltr');
+
+    act(() => {
+      useLocaleStore.getState().setLocale('ar-EG');
+    });
+
+    expect(document.documentElement.dir).toBe('rtl');
+    expect(document.documentElement.lang).toBe('ar-EG');
+
+    act(() => {
+      useLocaleStore.getState().setLocale('de-DE');
+    });
+
+    expect(document.documentElement.dir).toBe('ltr');
+    expect(document.documentElement.lang).toBe('de-DE');
+  });
+
+  it('exposes a labelled locale control with a pseudo-RTL option', async () => {
+    render(<LocaleSwitcher />);
+    const select = screen.getByLabelText(/locale/i);
+    expect(select).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /RTL/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/i18n/LocaleSync.tsx b/src/i18n/LocaleSync.tsx
new file mode 100644
index 0000000..a8a64f5
--- /dev/null
+++ b/src/i18n/LocaleSync.tsx
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { directionFor } from './format';
+import { useLocaleStore } from './locale-store';
+
+/**
+ * Keeps `<html lang>`/`<html dir>` in sync with the active locale. Rendered
+ * once at the app root. Everything else styles with logical properties
+ * (`margin-inline-start`, `inset-inline`, `text-align: start`), so the
+ * whole layout mirrors without a second stylesheet.
+ */
+export function LocaleSync() {
+  const locale = useLocaleStore((state) => state.locale);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.lang = locale;
+    root.dir = directionFor(locale);
+  }, [locale]);
+
+  return null;
+}
diff --git a/src/i18n/format.test.ts b/src/i18n/format.test.ts
new file mode 100644
index 0000000..24f037a
--- /dev/null
+++ b/src/i18n/format.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+import {
+  createFormatters,
+  directionFor,
+  isRtlLocale,
+  parseIso,
+} from './format';
+
+const enUS = createFormatters('en-US', 'UTC');
+const enGB = createFormatters('en-GB', 'UTC');
+const deDE = createFormatters('de-DE', 'UTC');
+
+describe('locale-aware dates (#88)', () => {
+  it('uses an unambiguous month name rather than numeric day/month', () => {
+    expect(enUS.formatDate('2026-03-04')).toBe('Mar 4, 2026');
+    expect(enGB.formatDate('2026-03-04')).toBe('4 Mar 2026');
+    expect(deDE.formatDate('2026-03-04')).toContain('März');
+  });
+
+  it('formats the same instant differently per locale', () => {
+    const value = '2026-03-04T10:30:00Z';
+    expect(enUS.formatDate(value)).not.toBe(enGB.formatDate(value));
+  });
+
+  it('never shifts a date-only value across a time zone boundary', () => {
+    // Noon UTC anchoring means this stays 4 March even in UTC-12.
+    expect(enUS.formatDate('2026-03-04', { timeZone: 'Etc/GMT+12' })).toBe('Mar 4, 2026');
+    expect(parseIso('2026-03-04').toISOString()).toBe('2026-03-04T12:00:00.000Z');
+  });
+
+  it('always shows an explicit time zone for appointment times', () => {
+    const value = '2026-03-04T10:30:00Z';
+    expect(enUS.formatAppointmentTime(value, 'UTC')).toMatch(/UTC|GMT/);
+    expect(enUS.formatAppointmentTime(value, 'Europe/Berlin')).toMatch(/GMT\+1|UTC\+1|MEZ|CET/);
+  });
+
+  it('returns a dash for invalid input instead of "Invalid Date"', () => {
+    expect(enUS.formatDate('not-a-date')).toBe('—');
+    expect(enUS.formatDateTime('')).toBe('—');
+  });
+
+  it('formats relative time', () => {
+    const now = new Date('2026-03-04T12:00:00Z');
+    expect(enUS.formatRelativeTime('2026-03-03T12:00:00Z', now)).toBe('yesterday');
+    expect(enUS.formatRelativeTime('2026-03-04T14:00:00Z', now)).toBe('in 2 hours');
+  });
+});
+
+describe('locale-aware numbers (#88)', () => {
+  it('groups numbers per locale', () => {
+    expect(enUS.formatNumber(1234567.8)).toBe('1,234,567.8');
+    expect(deDE.formatNumber(1234567.8)).toBe('1.234.567,8');
+  });
+
+  it('formats 0–100 rates as localized percentages', () => {
+    expect(enUS.formatPercent(86.4)).toBe('86.4%');
+    expect(deDE.formatPercent(86.4)).toMatch(/86,4\s*%/);
+  });
+
+  it('formats decimal strings without converting through Number', () => {
+    expect(enUS.formatDecimalString('1234567.89')).toBe('1,234,567.89');
+    expect(deDE.formatDecimalString('1234567.89')).toBe('1.234.567,89');
+  });
+});
+
+describe('asset amounts (#88)', () => {
+  it('formats stroops as XLM without losing precision', () => {
+    expect(enUS.formatAssetAmount('1234567890', 'XLM', { decimals: 7 })).toBe('123.456789 XLM');
+    expect(enUS.formatAssetAmount('9223372036854775807', 'XLM', { decimals: 7 })).toBe(
+      '922,337,203,685.4775807 XLM',
+    );
+  });
+
+  it('formats cent-denominated assets', () => {
+    expect(enUS.formatAssetAmount('123456789', 'USDC', { decimals: 2 })).toBe('1,234,567.89 USDC');
+  });
+
+  it('keeps the sign and pads small amounts', () => {
+    expect(enUS.formatAssetAmount('-5000000', 'XLM', { decimals: 7 })).toBe('-0.50 XLM');
+    expect(enUS.formatAssetAmount('0', 'XLM', { decimals: 7 })).toBe('0.00 XLM');
+  });
+
+  it('never silently accepts a non-integer minor-unit string', () => {
+    expect(() => enUS.formatAssetAmount('1.5', 'XLM', { decimals: 7 })).toThrow(/minor-unit/);
+    expect(() => enUS.formatDecimalString('1,5')).toThrow(/decimal string/);
+  });
+});
+
+describe('direction (#88)', () => {
+  it('detects right-to-left locales', () => {
+    expect(isRtlLocale('ar-EG')).toBe(true);
+    expect(isRtlLocale('he')).toBe(true);
+    expect(isRtlLocale('en-US')).toBe(false);
+    expect(directionFor('ar-EG')).toBe('rtl');
+    expect(directionFor('de-DE')).toBe('ltr');
+  });
+});
diff --git a/src/i18n/format.ts b/src/i18n/format.ts
new file mode 100644
index 0000000..9a0b368
--- /dev/null
+++ b/src/i18n/format.ts
@@ -0,0 +1,291 @@
+// Locale-aware formatting helpers (issue #88).
+//
+// Every date/time/number/amount the UI renders should go through this
+// module instead of ad-hoc `toLocaleString()` calls, so that:
+//   - dates are never ambiguous numeric forms like 03/04 (month names are
+//     always used for day/month combinations),
+//   - appointment times carry an explicit time zone,
+//   - asset amounts (bigint strings) never pass through `Number` and lose
+//     precision,
+//   - the same options are used everywhere for a given locale.
+//
+// These are pure functions plus a `createFormatters()` factory so they can
+// be unit-tested across locales without touching global state.
+
+export const SUPPORTED_LOCALES = ['en-US', 'en-GB', 'de-DE', 'ar-EG'] as const;
+export type AppLocale = (typeof SUPPORTED_LOCALES)[number];
+
+export const DEFAULT_LOCALE: AppLocale = 'en-US';
+export const DEFAULT_TIME_ZONE = 'UTC';
+
+export interface LocaleMeta {
+  id: AppLocale;
+  label: string;
+  dir: 'ltr' | 'rtl';
+  /** BCP 47 region/language that the date layout is demonstrated with. */
+  example: string;
+}
+
+export const LOCALE_META: Record<AppLocale, LocaleMeta> = {
+  'en-US': { id: 'en-US', label: 'English (United States)', dir: 'ltr', example: 'Mar 4, 2026' },
+  'en-GB': { id: 'en-GB', label: 'English (United Kingdom)', dir: 'ltr', example: '4 Mar 2026' },
+  'de-DE': { id: 'de-DE', label: 'Deutsch (Deutschland)', dir: 'ltr', example: '4. März 2026' },
+  'ar-EG': { id: 'ar-EG', label: 'العربية (مصر) — RTL', dir: 'rtl', example: '٤ مارس ٢٠٢٦' },
+};
+
+const RTL_LANGUAGES = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'dv', 'ps', 'ku', 'ckb']);
+
+/** True when the language subtag is written right-to-left. */
+export function isRtlLocale(locale: string): boolean {
+  return RTL_LANGUAGES.has(locale.toLowerCase().split('-')[0] ?? '');
+}
+
+export function directionFor(locale: string): 'ltr' | 'rtl' {
+  return isRtlLocale(locale) ? 'rtl' : 'ltr';
+}
+
+export function isSupportedLocale(value: string | null | undefined): value is AppLocale {
+  return Boolean(value) && (SUPPORTED_LOCALES as readonly string[]).includes(value as string);
+}
+
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * Parse an ISO timestamp. Date-only values (`YYYY-MM-DD`) are anchored at
+ * noon UTC so that formatting them in a western time zone can never shift
+ * them to the previous day — birthdays and appointment dates are calendar
+ * facts, not instants.
+ */
+export function parseIso(value: string | Date): Date {
+  if (value instanceof Date) return value;
+  if (DATE_ONLY.test(value)) return new Date(`${value}T12:00:00.000Z`);
+  return new Date(value);
+}
+
+function isValidDate(date: Date): boolean {
+  return Number.isFinite(date.getTime());
+}
+
+function safeFormat(
+  value: string | Date,
+  formatter: Intl.DateTimeFormat,
+  fallback: string,
+): string {
+  const date = parseIso(value);
+  if (!isValidDate(date)) return fallback;
+  try {
+    return formatter.format(date);
+  } catch {
+    return fallback;
+  }
+}
+
+export interface DateFormatOptions {
+  /** IANA time zone. Defaults to the formatter's configured zone. */
+  timeZone?: string;
+  /** Show the time zone name (e.g. "GMT+2"). Required for appointment times. */
+  withTimeZoneName?: boolean;
+  /** Include the time as well as the date. */
+  withTime?: boolean;
+}
+
+export interface AssetAmountOptions {
+  /**
+   * Number of decimal places the amount string is denominated in (stroops
+   * for XLM = 7, cents for USDC = 2). Defaults to 0.
+   */
+  decimals?: number;
+  /** Minimum fraction digits to always show. Defaults to 2 for assets. */
+  minFractionDigits?: number;
+  /** Maximum fraction digits to show. Defaults to `decimals` (trimmed). */
+  maxFractionDigits?: number;
+  /** Include the asset code after the number. Defaults to true. */
+  withAsset?: boolean;
+}
+
+/**
+ * Build a formatter bound to one locale and default time zone.
+ * `format*` functions always accept an explicit locale too, so non-React
+ * call sites and tests never depend on module-level mutable state.
+ */
+export function createFormatters(locale: string = DEFAULT_LOCALE, defaultTimeZone: string = DEFAULT_TIME_ZONE) {
+  const numberFormat = (options: Intl.NumberFormatOptions = {}) =>
+    new Intl.NumberFormat(locale, options);
+
+  const dateFormatter = (options: Intl.DateTimeFormatOptions) =>
+    new Intl.DateTimeFormat(locale, options);
+
+  function formatDate(value: string | Date, options: Omit<DateFormatOptions, 'withTimeZoneName' | 'withTime'> = {}): string {
+    const timeZone = options.timeZone ?? (DATE_ONLY.test(String(value)) ? 'UTC' : defaultTimeZone);
+    return safeFormat(
+      value,
+      dateFormatter({ year: 'numeric', month: 'short', day: 'numeric', timeZone }),
+      '—',
+    );
+  }
+
+  function formatTime(value: string | Date, options: Omit<DateFormatOptions, 'withTimeZoneName' | 'withTime'> = {}): string {
+    return safeFormat(
+      value,
+      dateFormatter({
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: options.timeZone ?? defaultTimeZone,
+      }),
+      '—',
+    );
+  }
+
+  function formatDateTime(value: string | Date, options: DateFormatOptions = {}): string {
+    return safeFormat(
+      value,
+      dateFormatter({
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: options.timeZone ?? defaultTimeZone,
+        ...(options.withTimeZoneName ? { timeZoneName: 'short' as const } : {}),
+      }),
+      '—',
+    );
+  }
+
+  /**
+   * Appointment times are the one place where an unlabelled wall-clock
+   * time is genuinely dangerous, so this always includes the time zone.
+   */
+  function formatAppointmentTime(value: string | Date, timeZone?: string): string {
+    return formatDateTime(value, {
+      timeZone: timeZone ?? defaultTimeZone,
+      withTimeZoneName: true,
+    });
+  }
+
+  function formatRelativeTime(value: string | Date, now: Date = new Date()): string {
+    const date = parseIso(value);
+    if (!isValidDate(date)) return '—';
+    const diffMs = date.getTime() - now.getTime();
+    const abs = Math.abs(diffMs);
+    const relative = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+    const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+      ['year', 365 * 24 * 60 * 60 * 1000],
+      ['month', 30 * 24 * 60 * 60 * 1000],
+      ['week', 7 * 24 * 60 * 60 * 1000],
+      ['day', 24 * 60 * 60 * 1000],
+      ['hour', 60 * 60 * 1000],
+      ['minute', 60 * 1000],
+    ];
+
+    for (const [unit, size] of units) {
+      if (abs >= size) return relative.format(Math.round(diffMs / size), unit);
+    }
+    return relative.format(Math.round(diffMs / 1000), 'second');
+  }
+
+  function formatNumber(value: number | bigint, options: Intl.NumberFormatOptions = {}): string {
+    return numberFormat(options).format(value);
+  }
+
+  /** Localized duration label, e.g. 19.4 h / 19,4 Std. */
+  function formatDuration(
+    value: number,
+    unit: 'minute' | 'hour' | 'day',
+    fractionDigits = 1,
+  ): string {
+    return numberFormat({
+      style: 'unit',
+      unit,
+      unitDisplay: 'narrow',
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+    }).format(value);
+  }
+
+  /** `percent` is a 0–100 value, matching the API's rate fields. */
+  function formatPercent(percent: number, fractionDigits = 1): string {
+    return numberFormat({
+      style: 'percent',
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+    }).format(percent / 100);
+  }
+
+  /**
+   * Group a decimal string without ever converting it to a JS number.
+   * `Intl.NumberFormat` only sees a constant probe to discover the locale's
+   * group/decimal separators; the amount itself stays a string.
+   */
+  function formatDecimalString(
+    amount: string,
+    options: { minFractionDigits?: number; maxFractionDigits?: number; group?: boolean } = {},
+  ): string {
+    const { minFractionDigits = 0, maxFractionDigits, group = true } = options;
+    const match = /^([+-]?)(\d+)(?:\.(\d+))?$/.exec(amount.trim());
+    if (!match) {
+      throw new Error(`formatDecimalString: not a decimal string: ${JSON.stringify(amount)}`);
+    }
+
+    const [, sign, integerRaw, fractionRaw = ''] = match;
+    let fraction = fractionRaw;
+
+    const max = maxFractionDigits ?? fraction.length;
+    fraction = fraction.slice(0, max);
+    while (fraction.length < minFractionDigits) fraction += '0';
+    fraction = fraction.replace(/0+$/, '');
+    if (fraction.length < minFractionDigits) fraction = fraction.padEnd(minFractionDigits, '0');
+
+    const probe = new Intl.NumberFormat(locale).formatToParts(1234567.5);
+    const groupSeparator = probe.find((part) => part.type === 'group')?.value ?? ',';
+    const decimalSeparator = probe.find((part) => part.type === 'decimal')?.value ?? '.';
+
+    const integer = group
+      ? integerRaw.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator)
+      : integerRaw;
+
+    return `${sign}${integer}${fraction ? `${decimalSeparator}${fraction}` : ''}`;
+  }
+
+  /**
+   * Format an asset amount expressed in minor units (e.g. stroops) as a
+   * human-readable string. Never uses `Number` — a bigint string with more
+   * digits than `Number.MAX_SAFE_INTEGER` must round-trip exactly.
+   */
+  function formatAssetAmount(amount: string, asset: string, options: AssetAmountOptions = {}): string {
+    const { decimals = 0, minFractionDigits = Math.min(2, decimals), maxFractionDigits, withAsset = true } = options;
+
+    const match = /^([+-]?)(\d+)$/.exec(amount.trim());
+    if (!match) {
+      throw new Error(`formatAssetAmount: not an integer minor-unit string: ${JSON.stringify(amount)}`);
+    }
+    const [, sign, digits] = match;
+    const padded = digits.padStart(decimals + 1, '0');
+    const integerPart = decimals > 0 ? padded.slice(0, -decimals) : padded;
+    const fractionPart = decimals > 0 ? padded.slice(-decimals) : '';
+
+    const value = formatDecimalString(`${sign}${integerPart}${fractionPart ? `.${fractionPart}` : ''}`, {
+      minFractionDigits,
+      maxFractionDigits: maxFractionDigits ?? decimals,
+    });
+
+    return withAsset ? `${value} ${asset}` : value;
+  }
+
+  return {
+    locale,
+    formatDate,
+    formatTime,
+    formatDateTime,
+    formatAppointmentTime,
+    formatRelativeTime,
+    formatNumber,
+    formatDuration,
+    formatPercent,
+    formatDecimalString,
+    formatAssetAmount,
+  };
+}
+
+export type Formatters = ReturnType<typeof createFormatters>;
diff --git a/src/i18n/locale-store.ts b/src/i18n/locale-store.ts
new file mode 100644
index 0000000..992c421
--- /dev/null
+++ b/src/i18n/locale-store.ts
@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import {
+  DEFAULT_LOCALE,
+  DEFAULT_TIME_ZONE,
+  directionFor,
+  type AppLocale,
+} from './format';
+
+// Client-only UI preference (which locale to format in). Deliberately
+// in-memory like the rest of this app's stores: nothing here is
+// server-derived, and the architecture rules forbid persisting business
+// data to storage. A future i18n framework can hydrate this from a cookie
+// or user preference once docforum-core exposes one.
+interface LocaleState {
+  locale: AppLocale;
+  timeZone: string;
+  setLocale: (locale: AppLocale) => void;
+  setTimeZone: (timeZone: string) => void;
+}
+
+function detectedTimeZone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || DEFAULT_TIME_ZONE;
+  } catch {
+    return DEFAULT_TIME_ZONE;
+  }
+}
+
+export const useLocaleStore = create<LocaleState>((set) => ({
+  locale: DEFAULT_LOCALE,
+  timeZone: detectedTimeZone(),
+  setLocale: (locale) => set({ locale }),
+  setTimeZone: (timeZone) => set({ timeZone }),
+}));
+
+export function currentDirection(): 'ltr' | 'rtl' {
+  return directionFor(useLocaleStore.getState().locale);
+}
diff --git a/src/i18n/useFormat.ts b/src/i18n/useFormat.ts
new file mode 100644
index 0000000..9e9c34c
--- /dev/null
+++ b/src/i18n/useFormat.ts
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { createFormatters, type Formatters } from './format';
+import { useLocaleStore } from './locale-store';
+
+/**
+ * Formatters bound to the active locale/time zone. Components use this
+ * rather than importing `toLocale*` directly so changing the locale
+ * re-renders every formatted value consistently (issue #88).
+ */
+export function useFormat(): Formatters {
+  const locale = useLocaleStore((state) => state.locale);
+  const timeZone = useLocaleStore((state) => state.timeZone);
+  return useMemo(() => createFormatters(locale, timeZone), [locale, timeZone]);
+}
diff --git a/src/pages/AccessibilityStatementPage.module.css b/src/pages/AccessibilityStatementPage.module.css
new file mode 100644
index 0000000..70fdb4e
--- /dev/null
+++ b/src/pages/AccessibilityStatementPage.module.css
@@ -0,0 +1,27 @@
+.section {
+  margin-block-start: var(--space-8);
+}
+
+.section h2 {
+  font-size: var(--text-xl);
+  margin-block-end: var(--space-2);
+}
+
+.list {
+  margin: 0;
+  padding-inline-start: var(--space-6);
+  color: var(--color-text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.list li {
+  max-inline-size: 70ch;
+}
+
+.reviewed {
+  margin-block: var(--space-8) 0;
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
diff --git a/src/pages/AccessibilityStatementPage.test.tsx b/src/pages/AccessibilityStatementPage.test.tsx
new file mode 100644
index 0000000..1e8200d
--- /dev/null
+++ b/src/pages/AccessibilityStatementPage.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { axe } from 'jest-axe';
+import { render, screen } from '../test/render';
+import { AccessibilityStatementPage } from './AccessibilityStatementPage';
+
+describe('AccessibilityStatementPage (#89)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<AccessibilityStatementPage />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('states conformance honestly and links to the feedback channel', () => {
+    render(<AccessibilityStatementPage />);
+
+    expect(
+      screen.getByRole('heading', { level: 1, name: /accessibility statement/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/partially conformant/i)).toBeInTheDocument();
+    expect(screen.getByText(/manual NVDA and VoiceOver pass/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /open an accessibility issue/i })).toBeInTheDocument();
+    const reviewed = screen.getByText('2026-10-18');
+    expect(reviewed.tagName).toBe('TIME');
+    expect(reviewed).toHaveAttribute('datetime', '2026-10-18');
+  });
+});
diff --git a/src/pages/AccessibilityStatementPage.tsx b/src/pages/AccessibilityStatementPage.tsx
new file mode 100644
index 0000000..40b8980
--- /dev/null
+++ b/src/pages/AccessibilityStatementPage.tsx
@@ -0,0 +1,105 @@
+import { Link } from 'react-router-dom';
+import styles from './AccessibilityStatementPage.module.css';
+
+const LAST_REVIEWED = '2026-10-18';
+
+/**
+ * Public accessibility statement (issue #89). Kept factual: it describes
+ * what has actually been tested in this repo and names what has not (a
+ * manual NVDA/VoiceOver pass), instead of claiming full conformance.
+ */
+export function AccessibilityStatementPage() {
+  return (
+    <div className="container">
+      <div className="card">
+        <h1>Accessibility statement</h1>
+        <p>
+          DocForum is a care-continuity platform used by patients, doctors and facility staff. We
+          want everyone to be able to book care, read their records and run a clinic, including
+          people who use a keyboard, a screen reader, magnification or reduced motion.
+        </p>
+
+        <section className={styles.section} aria-labelledby="conformance-heading">
+          <h2 id="conformance-heading">Conformance status</h2>
+          <p>
+            The patient, auth, doctor, facility and admin screens aim to meet{' '}
+            <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2 level AA</a>. We are{' '}
+            <strong>partially conformant</strong>: automated and keyboard checks pass for the
+            flows covered below, but a full manual screen-reader audit has not been completed yet,
+            so we do not claim full conformance.
+          </p>
+        </section>
+
+        <section className={styles.section} aria-labelledby="measures-heading">
+          <h2 id="measures-heading">How we check</h2>
+          <ul className={styles.list}>
+            <li>
+              <strong>Automated:</strong> every component test suite runs axe checks
+              (<code>jest-axe</code>) against the rendered auth, patient, doctor, facility and
+              admin surfaces.
+            </li>
+            <li>
+              <strong>Keyboard-only:</strong> dialogs trap and restore focus, Escape closes them,
+              tables and forms are reachable in order, and every interactive control is a native
+              button, link or labelled input.
+            </li>
+            <li>
+              <strong>Structure:</strong> data tables have captions and row/column headers; live
+              queue updates are announced politely and batched rather than one message per row.
+            </li>
+            <li>
+              <strong>Preferences:</strong> <code>prefers-reduced-motion</code> is respected by
+              every animation, and the interface can be switched to a right-to-left locale
+              (<Link to="/accessibility">use the Locale control in the footer</Link>).
+            </li>
+          </ul>
+        </section>
+
+        <section className={styles.section} aria-labelledby="limitations-heading">
+          <h2 id="limitations-heading">Known limitations</h2>
+          <ul className={styles.list}>
+            <li>
+              A manual NVDA and VoiceOver pass on the live deployment is still outstanding. The
+              fixes in this release were verified with automated axe rules and keyboard tests; a
+              human screen-reader review is tracked in the repository.
+            </li>
+            <li>
+              The facility map uses third-party OpenStreetMap tiles, which are decorative
+              (<code>alt=&quot;&quot;</code>); the same facilities are available as a text list
+              with distance and address, and markers are keyboard operable.
+            </li>
+            <li>
+              Wide clinical tables scroll horizontally on narrow screens; each table has a caption
+              and headers so screen readers keep the association.
+            </li>
+            <li>
+              The locale switcher changes date, number and amount formatting and the layout
+              direction. It is not a full translation of the product; untranslated copy remains in
+              English.
+            </li>
+          </ul>
+        </section>
+
+        <section className={styles.section} aria-labelledby="feedback-heading">
+          <h2 id="feedback-heading">Feedback</h2>
+          <p>
+            If something blocks you, please{' '}
+            <a
+              href="https://github.com/DocForum/docforum-web/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              open an accessibility issue
+            </a>{' '}
+            and tell us the screen, the assistive technology and what happened. We aim to
+            acknowledge accessibility reports within five working days.
+          </p>
+        </section>
+
+        <p className={styles.reviewed}>
+          Last reviewed: <time dateTime={LAST_REVIEWED}>{LAST_REVIEWED}</time>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/AdminDashboardPage.a11y.test.tsx b/src/pages/AdminDashboardPage.a11y.test.tsx
new file mode 100644
index 0000000..4f2486c
--- /dev/null
+++ b/src/pages/AdminDashboardPage.a11y.test.tsx
@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { render, screen } from '../test/render';
+import { AdminDashboardPage } from './AdminDashboardPage';
+import { useAuthStore } from '../store/auth-store';
+
+vi.mock('../services/payments-service');
+
+beforeEach(() => {
+  useAuthStore.setState({
+    accessToken: 'test-token',
+    user: { id: 'admin-1', email: 'admin@docforum.org', role: 'admin', createdAt: '', updatedAt: '' },
+  });
+});
+
+describe('AdminDashboardPage accessibility (#90)', () => {
+  it('has no detectable axe violations', async () => {
+    const { container } = render(<AdminDashboardPage />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('gives the lookup a real form and a labelled field', async () => {
+    render(<AdminDashboardPage />);
+
+    expect(screen.getByRole('form')).toBeInTheDocument();
+    expect(screen.getByLabelText(/payment intent id/i)).toHaveAccessibleDescription(
+      /paste the id/i,
+    );
+
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText(/payment intent id/i), 'intent-1{Enter}');
+    // Selecting an id marks it as selected; the PaymentIntentPanel renders below.
+    expect(screen.getByRole('form')).toBeInTheDocument();
+  });
+});
diff --git a/src/pages/AdminDashboardPage.tsx b/src/pages/AdminDashboardPage.tsx
index 87ed54c..0a79a2c 100644
--- a/src/pages/AdminDashboardPage.tsx
+++ b/src/pages/AdminDashboardPage.tsx
@@ -4,6 +4,7 @@ import { useAuthStore } from '../store/auth-store';
 import { CreatePaymentIntentForm } from '../features/payments/components/CreatePaymentIntentForm';
 import { PaymentIntentPanel } from '../features/payments/components/PaymentIntentPanel';
 import { TextField } from '../components/TextField';
+import { Button } from '../components/Button';
 
 // v1: admin accounts are invited/seeded directly, not self-serve — there's
 // no admin signup flow anywhere in this repo or docforum-core, by design
@@ -44,17 +45,26 @@ export function AdminDashboardPage() {
 
       <CreatePaymentIntentForm onCreated={setSelectedIntentId} />
 
-      <div className="card">
-        <h2>Look up an existing payment intent</h2>
-        <TextField
-          label="Payment intent id"
-          value={lookupId}
-          onChange={(e) => setLookupId(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') setSelectedIntentId(lookupId);
+      <section className="card" aria-labelledby="lookup-heading">
+        <h2 id="lookup-heading">Look up an existing payment intent</h2>
+        <form
+          aria-label="Look up an existing payment intent"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (lookupId.trim()) setSelectedIntentId(lookupId.trim());
           }}
-        />
-      </div>
+        >
+          <TextField
+            label="Payment intent id"
+            value={lookupId}
+            onChange={(e) => setLookupId(e.target.value)}
+            hint="Paste the id returned when the intent was created."
+          />
+          <Button type="submit" variant="secondary">
+            Look up
+          </Button>
+        </form>
+      </section>
 
       {selectedIntentId && <PaymentIntentPanel intentId={selectedIntentId} />}
     </div>
diff --git a/src/pages/DoctorDashboardPage.tsx b/src/pages/DoctorDashboardPage.tsx
index 068d877..41b9bd5 100644
--- a/src/pages/DoctorDashboardPage.tsx
+++ b/src/pages/DoctorDashboardPage.tsx
@@ -99,7 +99,7 @@ export function DoctorDashboardPage() {
 
       <div className={styles.dashboardGrid}>
         <section className={styles.card}>
-          <h2>Today\'s appointments</h2>
+          <h2>Today&apos;s appointments</h2>
           <p>Appointments for today open in the live queue once the patient checks in.</p>
         </section>
         <section className={styles.card}>
diff --git a/src/pages/FacilityDashboardPage.tsx b/src/pages/FacilityDashboardPage.tsx
index df77e39..570920b 100644
--- a/src/pages/FacilityDashboardPage.tsx
+++ b/src/pages/FacilityDashboardPage.tsx
@@ -108,7 +108,11 @@ export function FacilityDashboardPage() {
   return (
     <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', paddingBottom: 'var(--space-12)' }}>
       <nav className={styles.tabsNav} aria-label="Facility navigation">
-        <Link to="/facility" className={`${styles.tabLink} ${styles.tabLinkActive}`}>
+        <Link
+          to="/facility"
+          className={`${styles.tabLink} ${styles.tabLinkActive}`}
+          aria-current="page"
+        >
           Fulfillment Queue
         </Link>
         <Link to="/facility/verify" className={styles.tabLink}>
diff --git a/src/pages/HomePage.module.css b/src/pages/HomePage.module.css
index d5c71c8..41a7a0f 100644
--- a/src/pages/HomePage.module.css
+++ b/src/pages/HomePage.module.css
@@ -105,7 +105,7 @@
 .threadLineSvg {
   flex: 1;
   width: 100%;
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
   overflow: visible;
 }
 
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 7000b2b..66ef208 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -127,13 +127,21 @@ export function HomePage() {
       </section>
 
       <section className={styles.thread} aria-label="How a visit flows through DocForum" ref={threadSectionRef}>
+        <h2 className="srOnly">The care thread</h2>
         <ol className={styles.threadList}>
           {THREAD.map((step, i) => {
             const isFinal = i === THREAD.length - 1;
             return (
               <li key={step.label} className={styles.threadStep}>
                 <div className={styles.threadNode}>
-                  <svg width="14" height="14" viewBox="0 0 14 14" className={styles.threadDotSvg}>
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 14 14"
+                    className={styles.threadDotSvg}
+                    aria-hidden="true"
+                    focusable="false"
+                  >
                     <circle
                       ref={(el) => {
                         dotRefs.current[i] = el;
@@ -145,7 +153,13 @@ export function HomePage() {
                     />
                   </svg>
                   {!isFinal && (
-                    <svg className={styles.threadLineSvg} height="2" preserveAspectRatio="none">
+                    <svg
+                      className={styles.threadLineSvg}
+                      height="2"
+                      preserveAspectRatio="none"
+                      aria-hidden="true"
+                      focusable="false"
+                    >
                       <line
                         ref={(el) => {
                           lineRefs.current[i] = el;
diff --git a/src/services/api-client.test.ts b/src/services/api-client.test.ts
new file mode 100644
index 0000000..3bdc8b8
--- /dev/null
+++ b/src/services/api-client.test.ts
@@ -0,0 +1,127 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  ApiError,
+  IDEMPOTENCY_HEADER,
+  apiFetch,
+  computeBackoffMs,
+  createIdempotencyKey,
+  isRetryableError,
+} from './api-client';
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'content-type': 'application/json' },
+  });
+}
+
+const noWait = { baseDelayMs: 1, sleep: async () => {} };
+
+describe('apiFetch retry policy (#85)', () => {
+  const fetchMock = vi.fn();
+
+  beforeEach(() => {
+    fetchMock.mockReset();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    Object.defineProperty(navigator, 'onLine', { configurable: true, value: true });
+  });
+
+  it('retries reads with backoff after a retryable failure', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ message: 'waking up' }, 503))
+      .mockResolvedValueOnce(jsonResponse({ message: 'waking up' }, 502))
+      .mockResolvedValueOnce(jsonResponse({ ok: true }));
+
+    await expect(apiFetch('/doctor/queue/today', { retry: noWait })).resolves.toEqual({
+      ok: true,
+    });
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+
+  it('does not retry a 404', async () => {
+    fetchMock.mockResolvedValueOnce(jsonResponse({ message: 'Not found' }, 404));
+
+    await expect(apiFetch('/appointments/missing', { retry: noWait })).rejects.toBeInstanceOf(
+      ApiError,
+    );
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('never retries a mutation without an Idempotency-Key', async () => {
+    fetchMock.mockResolvedValue(jsonResponse({ message: 'cold start' }, 503));
+
+    await expect(
+      apiFetch('/payments/intents', { method: 'POST', body: {}, retry: noWait }),
+    ).rejects.toBeInstanceOf(ApiError);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('retries a mutation when it carries an Idempotency-Key, reusing the same key', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ message: 'cold start' }, 503))
+      .mockResolvedValueOnce(jsonResponse({ id: 'intent-1' }));
+
+    const key = createIdempotencyKey();
+    await expect(
+      apiFetch('/payments/intents', {
+        method: 'POST',
+        body: { amountStroops: '100' },
+        idempotencyKey: key,
+        retry: noWait,
+      }),
+    ).resolves.toEqual({ id: 'intent-1' });
+
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    const headers = fetchMock.mock.calls.map(
+      ([, init]) => (init as RequestInit).headers as Record<string, string>,
+    );
+    expect(headers[0][IDEMPOTENCY_HEADER]).toBe(key);
+    expect(headers[1][IDEMPOTENCY_HEADER]).toBe(key);
+  });
+
+  it('does not retry network failures while the browser reports offline', async () => {
+    Object.defineProperty(navigator, 'onLine', { configurable: true, value: false });
+    fetchMock.mockRejectedValue(new TypeError('Failed to fetch'));
+
+    await expect(apiFetch('/care-threads', { retry: noWait })).rejects.toBeInstanceOf(TypeError);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not retry aborted requests', async () => {
+    const abortError = new Error('Aborted');
+    abortError.name = 'AbortError';
+    fetchMock.mockRejectedValue(abortError);
+
+    await expect(apiFetch('/care-threads', { retry: noWait })).rejects.toThrow('Aborted');
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('retry helpers (#85)', () => {
+  it('classifies retryable errors', () => {
+    expect(isRetryableError(new ApiError('busy', 503))).toBe(true);
+    expect(isRetryableError(new ApiError('timeout', 408))).toBe(true);
+    expect(isRetryableError(new ApiError('rate limited', 429))).toBe(true);
+    expect(isRetryableError(new ApiError('bad request', 400))).toBe(false);
+    expect(isRetryableError(new ApiError('conflict', 409))).toBe(false);
+    expect(isRetryableError(new TypeError('Failed to fetch'))).toBe(true);
+  });
+
+  it('backs off exponentially with jitter and a cap', () => {
+    expect(computeBackoffMs(1, 100, 10_000, () => 0)).toBe(50);
+    expect(computeBackoffMs(2, 100, 10_000, () => 0)).toBe(100);
+    expect(computeBackoffMs(3, 100, 10_000, () => 0)).toBe(200);
+    expect(computeBackoffMs(10, 100, 500, () => 0)).toBe(250);
+  });
+
+  it('generates a fresh key per call', () => {
+    const a = createIdempotencyKey();
+    const b = createIdempotencyKey();
+    expect(a).not.toBe(b);
+    expect(a.length).toBeGreaterThan(8);
+  });
+});
diff --git a/src/services/api-client.ts b/src/services/api-client.ts
index 51c31c6..e6a0379 100644
--- a/src/services/api-client.ts
+++ b/src/services/api-client.ts
@@ -1,6 +1,6 @@
 // Thin fetch wrapper for calling docforum-core's API. This is the *only*
-// place HTTP details (base URL, headers, error shape) live — feature
-// services build on top of this, never call fetch() directly.
+// place HTTP details (base URL, headers, retry policy, error shape) live —
+// feature services build on top of this, never call fetch() directly.
 //
 // docforum-core's Phase 1 is real now (see its docs/api/README.md) — the
 // request/response envelope and error shape below match its actual
@@ -25,66 +25,176 @@ export class ApiError extends Error {
   }
 }
 
+export const IDEMPOTENCY_HEADER = 'Idempotency-Key';
+
+/** Retry tuning for a single request. Inject `sleep` in tests. */
+export interface RetryOptions {
+  maxAttempts?: number;
+  baseDelayMs?: number;
+  maxDelayMs?: number;
+  sleep?: (ms: number) => Promise<void>;
+}
+
 export interface RequestOptions {
   method?: 'GET' | 'POST' | 'PATCH' | 'DELETE';
   body?: unknown;
   accessToken?: string | null;
   signal?: AbortSignal;
+  /**
+   * Stable key for one logical mutation attempt. Preset on POST/PATCH/DELETE
+   * requests that are safe to retry: the same key is sent on every retry so
+   * docforum-core can deduplicate (docforum-core#48).
+   */
+  idempotencyKey?: string;
+  /** `false` disables retries entirely. */
+  retry?: RetryOptions | false;
 }
 
-/** PROVISIONAL error envelope assumption: `{ message: string }`. */
-interface ErrorEnvelope {
-  message?: string;
+const DEFAULT_READ_ATTEMPTS = 3;
+/** Retried only when the caller supplied an Idempotency-Key. */
+const DEFAULT_IDEMPOTENT_MUTATION_ATTEMPTS = 2;
+const DEFAULT_BASE_DELAY_MS = 300;
+const DEFAULT_MAX_DELAY_MS = 4_000;
+
+function defaultSleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-export async function apiFetch<T>(path: string, options: RequestOptions = {}): Promise<T> {
-  const { method = 'GET', body, accessToken, signal } = options;
-
-  const headers: Record<string, string> = { Accept: 'application/json' };
-  if (body !== undefined) headers['Content-Type'] = 'application/json';
-  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
-
-  const response = await fetch(`${API_BASE_URL}${path}`, {
-    method,
-    headers,
-    credentials: 'include',
-    body: body !== undefined ? JSON.stringify(body) : undefined,
-    signal,
-  });
+export function createIdempotencyKey(): string {
+  const cryptoApi = globalThis.crypto;
+  if (cryptoApi && typeof cryptoApi.randomUUID === 'function') {
+    return cryptoApi.randomUUID();
+  }
+  // Non-secure-context fallback (crypto.randomUUID needs a secure context
+  // in some browsers). Still unique enough per attempt, and never reused
+  // across attempts because the caller creates it once.
+  return `df-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+}
+
+export function isRetryableStatus(status: number): boolean {
+  return status === 408 || status === 429 || status >= 500;
+}
+
+export function isAbortError(error: unknown): boolean {
+  return (
+    (error instanceof DOMException && error.name === 'AbortError') ||
+    (error instanceof Error && error.name === 'AbortError')
+  );
+}
+
+/** Network failures and retryable HTTP statuses. 4xx is never retried. */
+export function isRetryableError(error: unknown): boolean {
+  if (isAbortError(error)) return false;
+  if (error instanceof ApiError) return isRetryableStatus(error.status);
+  // fetch() rejects with TypeError on network failure (offline, DNS, CORS).
+  return error instanceof TypeError;
+}
+
+export function isOffline(): boolean {
+  return typeof navigator !== 'undefined' && navigator.onLine === false;
+}
 
-  const isJson = response.headers.get('content-type')?.includes('application/json');
-  const payload = isJson ? await response.json().catch(() => undefined) : undefined;
+/** Exponential backoff with jitter, capped at `maxDelayMs`. */
+export function computeBackoffMs(
+  attempt: number,
+  baseDelayMs = DEFAULT_BASE_DELAY_MS,
+  maxDelayMs = DEFAULT_MAX_DELAY_MS,
+  random: () => number = Math.random,
+): number {
+  const exponential = Math.min(maxDelayMs, baseDelayMs * 2 ** Math.max(0, attempt - 1));
+  return Math.round(exponential * (0.5 + random() * 0.5));
+}
+
+function resolveMaxAttempts(options: RequestOptions, method: string): number {
+  if (options.retry === false) return 1;
+  if (options.retry?.maxAttempts !== undefined) return Math.max(1, options.retry.maxAttempts);
+  if (method === 'GET') return DEFAULT_READ_ATTEMPTS;
+  // Hard rule: a mutation without an Idempotency-Key is never retried
+  // automatically — a flaky connection must not become a double booking.
+  return options.idempotencyKey ? DEFAULT_IDEMPOTENT_MUTATION_ATTEMPTS : 1;
+}
 
-  if (!response.ok) {
-    const message = (payload as ErrorEnvelope | undefined)?.message ?? response.statusText;
-    throw new ApiError(message, response.status, payload);
+async function withRetry<T>(options: RequestOptions, method: string, run: () => Promise<T>): Promise<T> {
+  const maxAttempts = resolveMaxAttempts(options, method);
+  const retry = options.retry === false ? {} : (options.retry ?? {});
+  const sleep = retry.sleep ?? defaultSleep;
+
+  let lastError: unknown;
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    try {
+      return await run();
+    } catch (error) {
+      lastError = error;
+      const canRetry =
+        attempt < maxAttempts &&
+        isRetryableError(error) &&
+        !isOffline() &&
+        options.signal?.aborted !== true;
+      if (!canRetry) throw error;
+      await sleep(
+        computeBackoffMs(attempt, retry.baseDelayMs ?? DEFAULT_BASE_DELAY_MS, retry.maxDelayMs ?? DEFAULT_MAX_DELAY_MS),
+      );
+    }
   }
+  throw lastError;
+}
 
-  return payload as T;
+function buildHeaders(options: RequestOptions, includeAccept: boolean): Record<string, string> {
+  const headers: Record<string, string> = includeAccept ? { Accept: 'application/json' } : {};
+  if (options.body !== undefined) headers['Content-Type'] = 'application/json';
+  if (options.accessToken) headers.Authorization = `Bearer ${options.accessToken}`;
+  if (options.idempotencyKey) headers[IDEMPOTENCY_HEADER] = options.idempotencyKey;
+  return headers;
 }
 
-export async function apiFetchBlob(path: string, options: RequestOptions = {}): Promise<Blob> {
-  const { method = 'GET', body, accessToken, signal } = options;
-
-  const headers: Record<string, string> = {};
-  if (body !== undefined) headers['Content-Type'] = 'application/json';
-  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
-
-  const response = await fetch(`${API_BASE_URL}${path}`, {
-    method,
-    headers,
-    credentials: 'include',
-    body: body !== undefined ? JSON.stringify(body) : undefined,
-    signal,
-  });
+/** PROVISIONAL error envelope assumption: `{ message: string }`. */
+interface ErrorEnvelope {
+  message?: string;
+}
+
+export async function apiFetch<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const { method = 'GET', body, signal } = options;
+
+  return withRetry(options, method, async () => {
+    const response = await fetch(`${API_BASE_URL}${path}`, {
+      method,
+      headers: buildHeaders(options, true),
+      credentials: 'include',
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+      signal,
+    });
 
-  if (!response.ok) {
     const isJson = response.headers.get('content-type')?.includes('application/json');
     const payload = isJson ? await response.json().catch(() => undefined) : undefined;
-    const message = (payload as ErrorEnvelope | undefined)?.message ?? response.statusText;
-    throw new ApiError(message, response.status, payload);
-  }
 
-  return response.blob();
+    if (!response.ok) {
+      const message = (payload as ErrorEnvelope | undefined)?.message ?? response.statusText;
+      throw new ApiError(message, response.status, payload);
+    }
+
+    return payload as T;
+  });
 }
 
+export async function apiFetchBlob(path: string, options: RequestOptions = {}): Promise<Blob> {
+  const { method = 'GET', body, signal } = options;
+
+  return withRetry(options, method, async () => {
+    const response = await fetch(`${API_BASE_URL}${path}`, {
+      method,
+      headers: buildHeaders(options, false),
+      credentials: 'include',
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+      signal,
+    });
+
+    if (!response.ok) {
+      const isJson = response.headers.get('content-type')?.includes('application/json');
+      const payload = isJson ? await response.json().catch(() => undefined) : undefined;
+      const message = (payload as ErrorEnvelope | undefined)?.message ?? response.statusText;
+      throw new ApiError(message, response.status, payload);
+    }
+
+    return response.blob();
+  });
+}
diff --git a/src/services/payments-service.ts b/src/services/payments-service.ts
index 2409a6c..e750b9a 100644
--- a/src/services/payments-service.ts
+++ b/src/services/payments-service.ts
@@ -11,6 +11,8 @@ export function linkWallet(stellarPublicKey: string, accessToken: string): Promi
     method: 'POST',
     body: { stellarPublicKey },
     accessToken,
+    // One key per user action; api-client reuses it across network retries.
+    idempotencyKey: createIdempotencyKey(),
   });
 }
 
@@ -27,7 +29,12 @@ export interface CreatePaymentIntentInput {
 }
 
 export function createPaymentIntent(input: CreatePaymentIntentInput, accessToken: string): Promise<PaymentIntent> {
-  return apiFetch<PaymentIntent>('/payments/intents', { method: 'POST', body: input, accessToken });
+  return apiFetch<PaymentIntent>('/payments/intents', {
+    method: 'POST',
+    body: input,
+    accessToken,
+    idempotencyKey: createIdempotencyKey(),
+  });
 }
 
 export function getPaymentIntent(id: string, accessToken: string): Promise<PaymentIntent> {
@@ -35,15 +42,27 @@ export function getPaymentIntent(id: string, accessToken: string): Promise<Payme
 }
 
 export function fundPaymentIntent(id: string, accessToken: string): Promise<PaymentIntent> {
-  return apiFetch<PaymentIntent>(`/payments/intents/${id}/fund`, { method: 'POST', accessToken });
+  return apiFetch<PaymentIntent>(`/payments/intents/${id}/fund`, {
+    method: 'POST',
+    accessToken,
+    idempotencyKey: createIdempotencyKey(),
+  });
 }
 
 export function releasePaymentIntent(id: string, accessToken: string): Promise<PaymentIntent> {
-  return apiFetch<PaymentIntent>(`/payments/intents/${id}/release`, { method: 'POST', accessToken });
+  return apiFetch<PaymentIntent>(`/payments/intents/${id}/release`, {
+    method: 'POST',
+    accessToken,
+    idempotencyKey: createIdempotencyKey(),
+  });
 }
 
 export function refundPaymentIntent(id: string, accessToken: string): Promise<PaymentIntent> {
-  return apiFetch<PaymentIntent>(`/payments/intents/${id}/refund`, { method: 'POST', accessToken });
+  return apiFetch<PaymentIntent>(`/payments/intents/${id}/refund`, {
+    method: 'POST',
+    accessToken,
+    idempotencyKey: createIdempotencyKey(),
+  });
 }
 
 /**
diff --git a/src/styles/contrast.test.ts b/src/styles/contrast.test.ts
new file mode 100644
index 0000000..e3fb04e
--- /dev/null
+++ b/src/styles/contrast.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+
+// Reads the real stylesheet so this fails if a token is edited without
+// checking contrast (rather than asserting a duplicated copy).
+const css = readFileSync(`${process.cwd()}/src/styles/global.css`, 'utf8');
+
+/**
+ * Guards the palette against regressions (issue #89). Parses the real
+ * tokens from global.css so the test fails if someone edits a colour
+ * without checking contrast, rather than asserting a duplicated copy.
+ */
+function tokensIn(block: string): Record<string, string> {
+  return Object.fromEntries(
+    Array.from(block.matchAll(/(--color-[a-z0-9-]+):\s*(#[0-9a-fA-F]{6})/g)).map((match) => [
+      match[1],
+      match[2],
+    ]),
+  );
+}
+
+const darkStart = css.indexOf('@media (prefers-color-scheme: dark)');
+const lightBlock = css.slice(0, darkStart);
+const darkBlock = css.slice(darkStart);
+const light = tokensIn(lightBlock);
+const dark = { ...light, ...tokensIn(darkBlock) };
+
+function luminance(hex: string): number {
+  const channels = [1, 3, 5].map((index) => parseInt(hex.slice(index, index + 2), 16) / 255);
+  const [r, g, b] = channels.map((value) =>
+    value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4,
+  );
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrast(a: string, b: string): number {
+  const first = luminance(a);
+  const second = luminance(b);
+  return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
+}
+
+const PAIRS = [
+  ['text', 'bg'],
+  ['text', 'surface'],
+  ['text-muted', 'bg'],
+  ['text-muted', 'surface'],
+  ['text-faint', 'bg'],
+  ['text-faint', 'surface'],
+  ['accent', 'bg'],
+  ['accent-contrast', 'accent'],
+  ['accent-2', 'surface'],
+  ['accent-2', 'accent-2-subtle'],
+  ['accent-2-contrast', 'accent-2'],
+  ['danger', 'danger-surface'],
+  ['danger-contrast', 'danger'],
+  ['warning', 'warning-surface'],
+] as const;
+
+describe.each([
+  ['light', light],
+  ['dark', dark],
+])('colour contrast — %s theme (#89)', (_theme, tokens) => {
+  it.each(PAIRS)('--color-%s on --color-%s meets WCAG AA (4.5:1)', (foreground, background) => {
+    const fg = tokens[`--color-${foreground}`];
+    const bg = tokens[`--color-${background}`];
+    expect(fg, `--color-${foreground} must be a hex token`).toBeTruthy();
+    expect(bg, `--color-${background} must be a hex token`).toBeTruthy();
+    expect(contrast(fg, bg)).toBeGreaterThanOrEqual(4.5);
+  });
+});
diff --git a/src/styles/global.css b/src/styles/global.css
index d8b10bb..60f9644 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -56,10 +56,13 @@
   --color-surface-hover: #e9e0d1;
   --color-border: #e4dbcb;
   --color-border-strong: #cfc2aa;
+  --color-border-subtle: #efe8dc;
 
   --color-text: #1c1815;
   --color-text-muted: #5e5648;
-  --color-text-faint: #8c8271;
+  /* Darkened from #8c8271: 3.52:1 failed WCAG 2.2 AA for small text.
+     This keeps the same warm grey at 5.2:1 on the light background. */
+  --color-text-faint: #6f6757;
 
   --color-accent: #1f4d3a;
   --color-accent-hover: #163829;
@@ -73,12 +76,17 @@
 
   --color-success: #1f4d3a;
   --color-success-surface: #e7eee9;
-  --color-warning: #a6763d;
+  --color-warning: #8a5a1f;
   --color-warning-surface: #f3e9d8;
   --color-danger: #9b3b2b;
   --color-danger-surface: #f7e8e3;
+  --color-danger-contrast: #ffffff;
 
   --color-focus-ring: #1f4d3a;
+
+  /* WCAG 2.2 AA target size (2.5.8 is 24px; 44px is the comfortable
+     touch minimum this design uses for primary controls). */
+  --target-size: 2.75rem;
 }
 
 /* ---- Color: dark ---- */
@@ -97,10 +105,13 @@
 
     --color-text: #f3ecdf;
     --color-text-muted: #b8ac94;
-    --color-text-faint: #8a7f68;
+    --color-text-faint: #9a8f77;
+    --color-border-subtle: #4a422f;
 
-    --color-accent: #4a9b76;
-    --color-accent-hover: #6bb690;
+    /* Lightened so small accent text on --color-accent-subtle clears 4.5:1
+       (the previous #4a9b76 was 4.25:1). */
+    --color-accent: #5fae8a;
+    --color-accent-hover: #7cc3a1;
     --color-accent-contrast: #0e1c16;
     --color-accent-subtle: #1c2e26;
 
@@ -115,5 +126,6 @@
     --color-warning-surface: #2e2517;
     --color-danger: #e08469;
     --color-danger-surface: #2e1c15;
+    --color-danger-contrast: #241a08;
 
     --color-focus-ring: #4a
diff --git a/src/test/axe.d.ts b/src/test/axe.d.ts
new file mode 100644
index 0000000..1f715e4
--- /dev/null
+++ b/src/test/axe.d.ts
@@ -0,0 +1,11 @@
+import 'vitest';
+
+declare module 'vitest' {
+  interface Assertion<T = unknown> {
+    toHaveNoViolations(): T;
+  }
+
+  interface AsymmetricMatchersContaining {
+    toHaveNoViolations(): void;
+  }
+}
diff --git a/src/test/setup.ts b/src/test/setup.ts
index bb02c60..7b7a6c5 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1 +1,5 @@
 import '@testing-library/jest-dom/vitest';
+import { expect } from 'vitest';
+import { toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 4e70ea4..663d37b 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -16,7 +16,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
+    "types": ["vitest/globals", "@testing-library/jest-dom", "node"]
   },
   "include": ["src"]
 }