diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
index 3e04df7872..dc248b2aed 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.ts
@@ -55,6 +55,10 @@ const preview: Preview = {
   parameters: {
     layout: "centered",
     backgrounds: { disable: true },
+    // Accessibility gate
+    a11y: {
+      test: "error",
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3916b11574..ea214ee79c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -48,6 +48,7 @@
         "@vitest/ui": "^4.1.5",
         "@vue/test-utils": "^2.4.9",
         "@vue/tsconfig": "^0.7.0",
+        "axe-core": "^4.12.1",
         "eslint": "^10.0.3",
         "eslint-plugin-vue": "^10.8.0",
         "eslint-plugin-vuejs-accessibility": "^2.5.0",
@@ -6130,9 +6131,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.0.tgz",
-      "integrity": "sha512-FTavr/7Ba0IptwGOPxnQvdyW2tAsdLBMTBXz7rKH6xJ2skpyxpBxyHkDdBs4lf69yRqYpkqCdfhnwS8YULGOmg==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
diff --git a/frontend/package.json b/frontend/package.json
index 002d3be3d5..19105574bc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -75,6 +75,7 @@
     "@vitest/ui": "^4.1.5",
     "@vue/test-utils": "^2.4.9",
     "@vue/tsconfig": "^0.7.0",
+    "axe-core": "^4.12.1",
     "eslint": "^10.0.3",
     "eslint-plugin-vue": "^10.8.0",
     "eslint-plugin-vuejs-accessibility": "^2.5.0",
diff --git a/frontend/src/v2/lib/data/RTable/RTable.vue b/frontend/src/v2/lib/data/RTable/RTable.vue
index 84ad8585b3..c642d07e1e 100644
--- a/frontend/src/v2/lib/data/RTable/RTable.vue
+++ b/frontend/src/v2/lib/data/RTable/RTable.vue
@@ -143,6 +143,7 @@ onBeforeUnmount(() => {
   <div
     class="r-table"
     :class="{ 'r-table--mobile-stack': mobileStack }"
+    role="table"
     v-bind="$attrs"
   >
     <!-- Header row — each column header is a cell `<div>` containing
@@ -151,7 +152,9 @@ onBeforeUnmount(() => {
          icon next to "Type"). The sort button is the only interactive
          element so adornments stay focusable / clickable on their own
          without nesting buttons. -->
-    <div class="r-table__scroll" :style="scrollStyle">
+    <!-- Presentational so rows resolve their role="table" parent (the
+         scroll/body divs are layout-only). -->
+    <div class="r-table__scroll" :style="scrollStyle" role="presentation">
       <div class="r-table__header" :style="gridStyle" role="row">
         <div
           v-for="col in columns"
@@ -198,7 +201,7 @@ onBeforeUnmount(() => {
       </div>
 
       <!-- Body — skeletons / real rows / empty state, in that order. -->
-      <div class="r-table__body">
+      <div class="r-table__body" role="presentation">
         <template v-if="loading">
           <div
             v-for="i in loadingRows"
diff --git a/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts b/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts
index 5e9c5d0eaa..63faea1357 100644
--- a/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts
+++ b/frontend/src/v2/lib/forms/RCheckbox/RCheckbox.stories.ts
@@ -79,7 +79,13 @@ export const Indeterminate: Story = {
   args: { label: "Some items selected", indeterminate: true },
 };
 
-export const NoLabel: Story = { args: {} };
+export const NoLabel: Story = {
+  render: () => ({
+    components: { RCheckbox },
+    setup: () => ({ value: ref(false) }),
+    template: `<RCheckbox v-model="value" aria-label="Accept" />`,
+  }),
+};
 
 // ── Multi-state ─────────────────────────────────────────────────────
 
diff --git a/frontend/src/v2/lib/forms/RDateField/RDateField.vue b/frontend/src/v2/lib/forms/RDateField/RDateField.vue
index 893b4cc50d..7ebc8cd898 100644
--- a/frontend/src/v2/lib/forms/RDateField/RDateField.vue
+++ b/frontend/src/v2/lib/forms/RDateField/RDateField.vue
@@ -410,8 +410,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+  <!-- combobox role goes here, not on RTextField: with a visible label
+       RTextField renders a <label>, where the role is disallowed and voids
+       the input's label association. -->
   <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-  <div ref="referenceEl" class="r-date-field" @keydown="onFieldKeydown">
+  <div
+    ref="referenceEl"
+    class="r-date-field"
+    role="combobox"
+    aria-haspopup="dialog"
+    :aria-expanded="isOpen"
+    @keydown="onFieldKeydown"
+  >
     <!-- Single `@click` on the wrapper is enough: native clicks on
          every part of the field (input, icon, label well) bubble up
          here. We deliberately don't subscribe to `click:append-inner` —
@@ -425,9 +435,6 @@ onBeforeUnmount(() => {
       :append-inner-icon="
         clearable && selectedDate ? undefined : 'mdi-calendar'
       "
-      :aria-haspopup="'dialog'"
-      :aria-expanded="isOpen"
-      role="combobox"
       @click="toggle"
     >
       <template v-if="clearable && selectedDate" #append-inner>
diff --git a/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts b/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
index b02ca743ca..50ae708083 100644
--- a/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
+++ b/frontend/src/v2/lib/forms/RDropzone/RDropzone.stories.ts
@@ -22,6 +22,7 @@ const meta: Meta<typeof RDropzone> = {
     title: "Drop files here",
     hint: "Drag and drop, or click to browse",
     activeTitle: "Release to upload",
+    inputLabel: "Upload files",
     multiple: true,
   },
   render: (args) => ({
diff --git a/frontend/src/v2/lib/forms/RRating/RRating.stories.ts b/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
index 849fc6a2db..dbd3d0b34d 100644
--- a/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
+++ b/frontend/src/v2/lib/forms/RRating/RRating.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { ref } from "vue";
 import RRating from "./RRating.vue";
 
@@ -39,6 +40,38 @@ export const Default: Story = { args: { halfIncrements: true, hover: true } };
 export const Readonly: Story = { args: { readonly: true } };
 export const Large: Story = { args: { size: "large" } };
 
+// Keyboard: Tab across the star buttons, Enter/Space commits the rating.
+export const KeyboardNav: Story = {
+  name: "Keyboard navigation (play)",
+  args: { ariaLabel: "Rating" },
+  render: (args) => ({
+    components: { RRating },
+    setup: () => {
+      const value = ref(0);
+      return { args, value };
+    },
+    template: `<RRating v-bind="args" v-model="value" />`,
+  }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const stars = canvas.getAllByRole("radio");
+
+    await step("Tab focuses the stars in order", async () => {
+      await userEvent.tab();
+      expect(stars[0]).toHaveFocus();
+      await userEvent.tab();
+      await userEvent.tab();
+      expect(stars[2]).toHaveFocus();
+    });
+
+    await step("Enter commits the focused star as the rating", async () => {
+      await userEvent.keyboard("{Enter}");
+      expect(stars[2]).toHaveAttribute("aria-checked", "true");
+      expect(stars[0]).toHaveAttribute("aria-checked", "false");
+    });
+  },
+};
+
 // Difficulty preset — same primitive driven by props. Exercises the
 // new emptyIcon/fullIcon/activeColor pass-through used by the
 // score-picker on GameDetails.
diff --git a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
index 7b033a5844..7e75bb2865 100644
--- a/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
+++ b/frontend/src/v2/lib/forms/RSelect/RSelect.stories.ts
@@ -211,6 +211,10 @@ export const Validation: Story = {
 // ── Clearable ──────────────────────────────────────────────────────
 
 export const Clearable: Story = {
+  // a11y todo (#1848): clear <button> nested in the activator <button>
+  // (nested-interactive). Fix = lift clear/chip-close out as siblings; a
+  // visual-layout refactor deferred pending in-browser verification.
+  parameters: { a11y: { test: "todo" } },
   render: () => ({
     components: { RSelect },
     setup: () => ({ value: ref("psx"), items: PLATFORMS }),
diff --git a/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts b/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
index 59aeec3071..c713a6289a 100644
--- a/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
+++ b/frontend/src/v2/lib/forms/RSlider/RSlider.stories.ts
@@ -5,6 +5,8 @@ import RSlider from "./RSlider.vue";
 const meta: Meta<typeof RSlider> = {
   title: "Forms/RSlider",
   component: RSlider,
+  // RSlider has no visible label, so every instance needs `ariaLabel`.
+  args: { ariaLabel: "Value" },
   argTypes: {
     min: { control: "number" },
     max: { control: "number" },
@@ -112,11 +114,11 @@ export const ColorLadder: Story = {
     }),
     template: `
       <div style="display:flex;flex-direction:column;gap:18px;padding:24px;min-width:380px">
-        <RSlider v-model="primary" color="primary" value-position="right" value-suffix="%" />
-        <RSlider v-model="success" color="success" value-position="right" value-suffix="%" />
-        <RSlider v-model="warning" color="warning" value-position="right" value-suffix="%" />
-        <RSlider v-model="danger" color="danger" value-position="right" value-suffix="%" />
-        <RSlider v-model="info" color="info" value-position="right" value-suffix="%" />
+        <RSlider v-model="primary" color="primary" value-position="right" value-suffix="%" aria-label="Primary" />
+        <RSlider v-model="success" color="success" value-position="right" value-suffix="%" aria-label="Success" />
+        <RSlider v-model="warning" color="warning" value-position="right" value-suffix="%" aria-label="Warning" />
+        <RSlider v-model="danger" color="danger" value-position="right" value-suffix="%" aria-label="Danger" />
+        <RSlider v-model="info" color="info" value-position="right" value-suffix="%" aria-label="Info" />
       </div>
     `,
   }),
@@ -148,7 +150,7 @@ export const CommitOnEnd: Story = {
     },
     template: `
       <div style="padding:24px;min-width:380px;display:flex;flex-direction:column;gap:10px">
-        <RSlider v-model="preview" value-position="thumb" value-suffix="%" @end="onEnd" />
+        <RSlider v-model="preview" value-position="thumb" value-suffix="%" aria-label="Volume" @end="onEnd" />
         <div style="font:12px sans-serif;color:var(--r-color-fg-muted)">
           previewing: {{ preview }} · last committed: {{ committed }}
         </div>
diff --git a/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts b/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
index 3766265e97..a6f54f49d5 100644
--- a/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
+++ b/frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { ref } from "vue";
 import RSwitch from "./RSwitch.vue";
 
@@ -59,3 +60,29 @@ export const Small: Story = {
 export const Disabled: Story = {
   args: { label: "Disabled", disabled: true },
 };
+
+// Keyboard: Tab focuses the switch, Space/Enter toggle it.
+export const KeyboardToggle: Story = {
+  name: "Keyboard toggle (play)",
+  args: { label: "Notifications" },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const sw = canvas.getByRole("switch");
+
+    await step("Tab moves focus onto the switch", async () => {
+      await userEvent.tab();
+      expect(sw).toHaveFocus();
+      expect(sw).toHaveAttribute("aria-checked", "false");
+    });
+
+    await step("Space toggles it on", async () => {
+      await userEvent.keyboard(" ");
+      expect(sw).toHaveAttribute("aria-checked", "true");
+    });
+
+    await step("Enter toggles it back off", async () => {
+      await userEvent.keyboard("{Enter}");
+      expect(sw).toHaveAttribute("aria-checked", "false");
+    });
+  },
+};
diff --git a/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts b/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
index 7647812374..ab72bfc828 100644
--- a/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
+++ b/frontend/src/v2/lib/forms/RTextField/RTextField.stories.ts
@@ -164,6 +164,7 @@ export const WithSubtitle: Story = {
 
 export const WithHint: Story = {
   args: {
+    label: "Email address",
     placeholder: "your@email.com",
     hint: "We'll only contact you about account events.",
     prependInnerIcon: "mdi-email",
@@ -172,6 +173,7 @@ export const WithHint: Story = {
 
 export const WithError: Story = {
   args: {
+    label: "Email address",
     placeholder: "your@email.com",
     error: true,
     errorMessages: "Must be a valid email address",
@@ -301,17 +303,20 @@ export const LoginForm: Story = {
       <div style="width:320px;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--r-color-bg-elevated);border:1px solid var(--r-color-border);border-radius:12px">
         <RTextField
           v-model="user"
+          label="Username"
           variant="underlined"
           placeholder="username"
           prepend-inner-icon="mdi-account"
         />
         <RTextField
           v-model="pass"
+          label="Password"
           variant="underlined"
           :type="show ? 'text' : 'password'"
           placeholder="password"
           prepend-inner-icon="mdi-lock"
           :append-inner-icon="show ? 'mdi-eye-off' : 'mdi-eye'"
+          :append-inner-tooltip="show ? 'Hide password' : 'Show password'"
           @click:append-inner="show = !show"
         />
         <RBtn block color="primary">Sign in</RBtn>
diff --git a/frontend/src/v2/lib/forms/RTextField/RTextField.vue b/frontend/src/v2/lib/forms/RTextField/RTextField.vue
index 439a380c28..470028be24 100644
--- a/frontend/src/v2/lib/forms/RTextField/RTextField.vue
+++ b/frontend/src/v2/lib/forms/RTextField/RTextField.vue
@@ -58,6 +58,12 @@ interface Props {
   /** Tooltip text shown on hover/focus over the append-inner
    *  adornment. The canonical use is the password-reveal eye icon. */
   appendInnerTooltip?: string;
+  /** Accessible name for the interactive prepend-inner adornment button.
+   *  Falls back to `prependInnerTooltip`. */
+  prependInnerLabel?: string;
+  /** Accessible name for the interactive append-inner adornment button.
+   *  Falls back to `appendInnerTooltip`. */
+  appendInnerLabel?: string;
   autocomplete?: string;
   name?: string;
   rules?: Rule[];
@@ -111,6 +117,8 @@ const props = withDefaults(defineProps<Props>(), {
   appendInnerIcon: undefined,
   prependInnerTooltip: undefined,
   appendInnerTooltip: undefined,
+  prependInnerLabel: undefined,
+  appendInnerLabel: undefined,
   autocomplete: undefined,
   name: undefined,
   rules: () => [],
@@ -357,6 +365,14 @@ function hasListener(name: string): boolean {
 const prependInteractive = computed(() => hasListener("click:prepend-inner"));
 const appendInteractive = computed(() => hasListener("click:append-inner"));
 
+// Interactive adornments are real buttons; name them (label, else tooltip).
+const prependAdornmentLabel = computed(
+  () => props.prependInnerLabel ?? props.prependInnerTooltip,
+);
+const appendAdornmentLabel = computed(
+  () => props.appendInnerLabel ?? props.appendInnerTooltip,
+);
+
 function onPrependInnerClick(evt: MouseEvent) {
   // Always emit — emit() is a no-op when nothing's subscribed. The
   // listener-detection above only governs the visual treatment
@@ -424,6 +440,7 @@ function onAppendInnerClick(evt: MouseEvent) {
         :class="{ 'r-text-field__adornment--interactive': prependInteractive }"
         :type="prependInteractive ? 'button' : undefined"
         :tabindex="prependInteractive ? 0 : undefined"
+        :aria-label="prependInteractive ? prependAdornmentLabel : undefined"
         @mousedown.prevent
         @click="onPrependInnerClick"
       >
@@ -505,6 +522,11 @@ function onAppendInnerClick(evt: MouseEvent) {
         :tabindex="
           appendInteractive && !showLoading && !showClear ? 0 : undefined
         "
+        :aria-label="
+          appendInteractive && !showLoading && !showClear
+            ? appendAdornmentLabel
+            : undefined
+        "
         @mousedown.prevent
         @click="onAppendInnerClick"
       >
diff --git a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
index fa4171a540..4f7118a991 100644
--- a/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
+++ b/frontend/src/v2/lib/menus/RMenuItem/RMenuItem.stories.ts
@@ -83,9 +83,10 @@ export const WithNavigation: Story = {
   render: () => ({
     components: { RMenuItem },
     setup: () => ({ panelStyle: PANEL_STYLE }),
+    // Link items get role="menuitem", which needs a role="menu" parent.
     template: `
       <div style="padding:40px">
-        <div :style="panelStyle">
+        <div :style="panelStyle" role="menu" aria-label="Navigation">
           <RMenuItem to="/platforms" icon="mdi-gamepad-variant-outline" label="Platforms" />
           <RMenuItem href="https://romm.app" icon="mdi-open-in-new" label="External link" />
         </div>
@@ -111,7 +112,7 @@ export const NewTabGesture: Story = {
     setup: () => ({ args, panelStyle: PANEL_STYLE }),
     template: `
       <div style="padding:40px">
-        <div :style="panelStyle">
+        <div :style="panelStyle" role="menu" aria-label="Actions">
           <RMenuItem v-bind="args" @click="args.onClick" />
         </div>
       </div>
diff --git a/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts b/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts
index 876fbcd8dd..3ebc326daf 100644
--- a/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts
+++ b/frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts
@@ -58,7 +58,7 @@ export const Inline: Story = {
             <img :src="item" :alt="'Slide ' + (index + 1)" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;" />
           </template>
           <template #thumbnail="{ item }">
-            <img :src="item" />
+            <img :src="item" alt="" />
           </template>
         </RCarousel>
       </div>
@@ -124,7 +124,7 @@ export const InlineLight: Story = {
             <img :src="item" :alt="'Slide ' + (index + 1)" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;" />
           </template>
           <template #thumbnail="{ item }">
-            <img :src="item" />
+            <img :src="item" alt="" />
           </template>
         </RCarousel>
       </div>
diff --git a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
index d6108a2474..5a0e407083 100644
--- a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
+++ b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.stories.ts
@@ -10,6 +10,7 @@ const meta: Meta<typeof RProgressCircular> = {
     size: { control: "number" },
     width: { control: "number" },
     color: { control: "text" },
+    label: { control: "text" },
     modelValue: { control: { type: "range", min: 0, max: 100 } },
   },
 };
@@ -25,7 +26,13 @@ export const Indeterminate: Story = {
 };
 
 export const Determinate: Story = {
-  args: { indeterminate: false, modelValue: 65, size: 64, width: 4 },
+  args: {
+    indeterminate: false,
+    modelValue: 65,
+    size: 64,
+    width: 4,
+    label: "Download progress",
+  },
 };
 
 // ── Size ladder ─────────────────────────────────────────────────────
@@ -68,23 +75,23 @@ export const DeterminateLadder: Story = {
     template: `
       <div style="display:flex;align-items:flex-end;gap:24px;font:11px/1.2 sans-serif;color:var(--r-color-fg-muted)">
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="0" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="0" :size="48" :width="4" label="Progress" />
           <span>0%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="25" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="25" :size="48" :width="4" label="Progress" />
           <span>25%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="50" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="50" :size="48" :width="4" label="Progress" />
           <span>50%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="75" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="75" :size="48" :width="4" label="Progress" />
           <span>75%</span>
         </div>
         <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-          <RProgressCircular :indeterminate="false" :model-value="100" :size="48" :width="4" />
+          <RProgressCircular :indeterminate="false" :model-value="100" :size="48" :width="4" label="Progress" />
           <span>100%</span>
         </div>
       </div>
diff --git a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
index 3954fbe4c8..bf75802c02 100644
--- a/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
+++ b/frontend/src/v2/lib/primitives/RProgressCircular/RProgressCircular.vue
@@ -19,7 +19,7 @@
 //
 // Default slot — overlay content centred over the ring (percentage
 // text, status icon). Lives outside the SVG so it isn't rotated.
-import { computed, useSlots } from "vue";
+import { computed, getCurrentInstance, useSlots } from "vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -34,6 +34,9 @@ interface Props {
   color?: string;
   /** 0–100. Only consulted when `indeterminate` is false. */
   modelValue?: number;
+  /** Accessible name for the progressbar. Without it (and without slot
+   *  content), an indeterminate ring is treated as decorative. */
+  label?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,10 +45,19 @@ const props = withDefaults(defineProps<Props>(), {
   width: 2,
   color: "primary",
   modelValue: undefined,
+  label: undefined,
 });
 
 const slots = useSlots();
 
+// An unnamed indeterminate ring is decorative (a "busy" spinner beside
+// real text): hide it rather than expose an unnamed progressbar.
+const hasSlotContent = computed(() => !!slots.default);
+const decorative = computed(
+  () => props.indeterminate && !props.label && !hasSlotContent.value,
+);
+const contentId = `r-pc-label-${getCurrentInstance()?.uid ?? ""}`;
+
 const TONE_MAP: Record<string, string> = {
   primary: "var(--r-color-brand-primary)",
   secondary: "var(--r-color-brand-secondary)",
@@ -101,11 +113,16 @@ const dashOffset = computed(() => 100 - progressValue.value);
       height: `${diameter}px`,
       '--r-pc-color': resolvedColor,
     }"
-    role="progressbar"
-    :aria-valuemin="0"
-    :aria-valuemax="100"
-    :aria-valuenow="indeterminate ? undefined : progressValue"
-    :aria-busy="indeterminate || undefined"
+    :role="decorative ? undefined : 'progressbar'"
+    :aria-hidden="decorative ? 'true' : undefined"
+    :aria-label="!decorative && label ? label : undefined"
+    :aria-labelledby="
+      !decorative && !label && hasSlotContent ? contentId : undefined
+    "
+    :aria-valuemin="decorative ? undefined : 0"
+    :aria-valuemax="decorative ? undefined : 100"
+    :aria-valuenow="!decorative && !indeterminate ? progressValue : undefined"
+    :aria-busy="!decorative && indeterminate ? true : undefined"
   >
     <svg class="r-pc__svg" :viewBox="`0 0 ${diameter} ${diameter}`">
       <!-- Track — faint underlay so the empty portion still reads
@@ -131,7 +148,7 @@ const dashOffset = computed(() => 100 - progressValue.value);
         :stroke-dashoffset="indeterminate ? undefined : dashOffset"
       />
     </svg>
-    <span v-if="slots.default" class="r-pc__content">
+    <span v-if="slots.default" :id="contentId" class="r-pc__content">
       <slot />
     </span>
   </span>
diff --git a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
index ab6cd87ac8..1fcb4cfb5e 100644
--- a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
+++ b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
 import { ref } from "vue";
 import RTabNav from "./RTabNav.vue";
 
@@ -108,6 +109,44 @@ export const HiddenItems: Story = {
 // Image variant — items can carry a logo / brand mark via the `image`
 // field instead of an MDI icon. Mirrors the per-provider raw-metadata
 // tabs in EditRomDialog (IGDB / MobyGames / etc).
+// Keyboard: Tab across the tabs, Enter/Space activates the focused one.
+export const KeyboardNav: Story = {
+  name: "Keyboard navigation (play)",
+  args: {
+    modelValue: "overview",
+    items: [
+      { id: "overview", label: "Overview" },
+      { id: "media", label: "Media" },
+      { id: "notes", label: "Notes" },
+    ],
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole("tab");
+
+    await step("Tab focuses the tabs in DOM order", async () => {
+      await userEvent.tab();
+      expect(tabs[0]).toHaveFocus();
+      await userEvent.tab();
+      expect(tabs[1]).toHaveFocus();
+    });
+
+    await step("Enter activates the focused tab", async () => {
+      expect(tabs[1]).toHaveAttribute("aria-selected", "false");
+      await userEvent.keyboard("{Enter}");
+      expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+      expect(tabs[0]).toHaveAttribute("aria-selected", "false");
+    });
+
+    await step("Space activates the next tab", async () => {
+      await userEvent.tab();
+      expect(tabs[2]).toHaveFocus();
+      await userEvent.keyboard(" ");
+      expect(tabs[2]).toHaveAttribute("aria-selected", "true");
+    });
+  },
+};
+
 export const WithImages: Story = {
   args: {
     size: "small",
diff --git a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue
index 7278b14c50..c99691eb9e 100644
--- a/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue
+++ b/frontend/src/v2/lib/primitives/RTabNav/RTabNav.vue
@@ -161,7 +161,7 @@ onBeforeUnmount(() => {
       <RImg
         v-if="t.image"
         :src="t.image"
-        :alt="t.label"
+        alt=""
         width="1em"
         height="1em"
         contain
diff --git a/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts b/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts
index 7cb968f3b3..f8ff40f806 100644
--- a/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts
+++ b/frontend/src/v2/lib/structural/RToolbar/RToolbar.stories.ts
@@ -145,8 +145,8 @@ export const Colored: Story = {
       <div style="display:flex;flex-direction:column;gap:14px;width:720px">
         <RToolbar color="primary" title="Primary">
           <template #append>
-            <RBtn variant="text" prepend-icon="mdi-bell" />
-            <RBtn variant="text" prepend-icon="mdi-account-circle" />
+            <RBtn variant="text" prepend-icon="mdi-bell" aria-label="Notifications" />
+            <RBtn variant="text" prepend-icon="mdi-account-circle" aria-label="Account" />
           </template>
         </RToolbar>
         <RToolbar color="success" title="Success — scan complete">
@@ -200,7 +200,7 @@ export const GalleryHeader: Story = {
             <RBtn icon="mdi-arrow-left" variant="text" aria-label="Back" />
           </template>
           <template #append>
-            <RBtn variant="text" prepend-icon="mdi-magnify" />
+            <RBtn variant="text" prepend-icon="mdi-magnify" aria-label="Search" />
             <RBtn variant="text" prepend-icon="mdi-filter">Filters</RBtn>
             <RBtn variant="text" prepend-icon="mdi-sort-variant">Sort</RBtn>
             <RBtn icon="mdi-dots-vertical" variant="text" aria-label="More" />
diff --git a/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts b/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts
index 0a1ee6fa79..346372779a 100644
--- a/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts
+++ b/frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts
@@ -98,7 +98,7 @@ export const ParentAttach: Story = {
     components: { RTooltip, RBtn },
     template: `
       <div style="padding:48px;display:flex;justify-content:center">
-        <RBtn icon="mdi-delete" variant="translucent">
+        <RBtn icon="mdi-delete" variant="translucent" aria-label="Delete this item">
           <RTooltip activator="parent" text="Delete this item" location="top" />
         </RBtn>
       </div>
@@ -116,22 +116,22 @@ export const PlacementCardinals: Story = {
       <div style="padding:80px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center">
         <RTooltip text="Tooltip on top" location="top">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-up" />
+            <RBtn v-bind="props" icon="mdi-arrow-up" aria-label="Tooltip on top" />
           </template>
         </RTooltip>
         <RTooltip text="Tooltip on end" location="end">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-right" />
+            <RBtn v-bind="props" icon="mdi-arrow-right" aria-label="Tooltip on end" />
           </template>
         </RTooltip>
         <RTooltip text="Tooltip on bottom" location="bottom">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-down" />
+            <RBtn v-bind="props" icon="mdi-arrow-down" aria-label="Tooltip on bottom" />
           </template>
         </RTooltip>
         <RTooltip text="Tooltip on start" location="start">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-arrow-left" />
+            <RBtn v-bind="props" icon="mdi-arrow-left" aria-label="Tooltip on start" />
           </template>
         </RTooltip>
       </div>
@@ -222,7 +222,7 @@ export const CustomContent: Story = {
       <div style="padding:80px;display:flex;justify-content:center">
         <RTooltip location="top">
           <template #activator="{ props }">
-            <RBtn v-bind="props" icon="mdi-keyboard">Shortcuts</RBtn>
+            <RBtn v-bind="props" icon="mdi-keyboard" aria-label="Shortcuts">Shortcuts</RBtn>
           </template>
           <div style="display:flex;flex-direction:column;gap:4px">
             <div style="display:flex;align-items:center;gap:8px">
@@ -353,22 +353,22 @@ export const IconBarRealWorld: Story = {
         <div style="display:flex;gap:4px;padding:6px;background:var(--r-color-bg-elevated);border:1px solid var(--r-color-border);border-radius:10px">
           <RTooltip text="Filters" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-filter" variant="text" />
+              <RBtn v-bind="props" icon="mdi-filter" variant="text" aria-label="Filters" />
             </template>
           </RTooltip>
           <RTooltip text="Sort" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-sort-variant" variant="text" />
+              <RBtn v-bind="props" icon="mdi-sort-variant" variant="text" aria-label="Sort" />
             </template>
           </RTooltip>
           <RTooltip text="Search" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-magnify" variant="text" />
+              <RBtn v-bind="props" icon="mdi-magnify" variant="text" aria-label="Search" />
             </template>
           </RTooltip>
           <RTooltip text="More actions" location="bottom">
             <template #activator="{ props }">
-              <RBtn v-bind="props" icon="mdi-dots-vertical" variant="text" />
+              <RBtn v-bind="props" icon="mdi-dots-vertical" variant="text" aria-label="More actions" />
             </template>
           </RTooltip>
         </div>
diff --git a/frontend/test/storybook.test.ts b/frontend/test/storybook.test.ts
index bc9b072d9f..d549ea2ad2 100644
--- a/frontend/test/storybook.test.ts
+++ b/frontend/test/storybook.test.ts
@@ -1,8 +1,68 @@
 import { composeStories } from "@storybook/vue3-vite";
-import { describe, it } from "vitest";
+import axe from "axe-core";
+import { describe, expect, it } from "vitest";
 
 type StoryModule = Record<string, unknown>;
-type ComposedStory = { run?: () => Promise<void> };
+
+// Per-story addon-a11y config. `test`: "error" fails on violations, "todo"
+// warns (ratchet escape hatch), "off" skips. `options` forwards to axe.run.
+type A11yParameters = {
+  test?: "error" | "todo" | "off";
+  options?: axe.RunOptions;
+};
+
+type ComposedStory = {
+  run?: (context?: { canvasElement?: HTMLElement }) => Promise<void>;
+  parameters?: { a11y?: A11yParameters };
+};
+
+// color-contrast needs real layout, which happy-dom lacks; disable it here
+// (covered by the a11y panel / a future browser-mode run).
+const DEFAULT_AXE_OPTIONS: axe.RunOptions = {
+  rules: { "color-contrast": { enabled: false } },
+};
+
+function formatViolations(violations: axe.Result[]): string {
+  return violations
+    .map((v) => {
+      const nodes = v.nodes
+        .map((n) => `      ${n.html}\n        ${n.failureSummary ?? ""}`)
+        .join("\n");
+      return `  [${v.impact ?? "n/a"}] ${v.id}: ${v.help}\n${nodes}\n    ${v.helpUrl}`;
+    })
+    .join("\n\n");
+}
+
+async function checkA11y(
+  element: HTMLElement,
+  params: A11yParameters,
+  storyName: string,
+): Promise<void> {
+  const mode = params.test ?? "error";
+  if (mode === "off") return;
+
+  const options: axe.RunOptions = {
+    ...DEFAULT_AXE_OPTIONS,
+    ...params.options,
+    rules: { ...DEFAULT_AXE_OPTIONS.rules, ...params.options?.rules },
+  };
+
+  const results = await axe.run(element, options);
+  if (results.violations.length === 0) return;
+
+  const report = formatViolations(results.violations);
+  if (mode === "todo") {
+    console.warn(
+      `a11y (todo) "${storyName}" has ${results.violations.length} violation(s):\n${report}`,
+    );
+    return;
+  }
+
+  expect(
+    results.violations,
+    `Accessibility violations in "${storyName}":\n${report}`,
+  ).toHaveLength(0);
+}
 
 const storyModules = import.meta.glob<StoryModule>(
   "../src/v2/lib/**/*.stories.ts",
@@ -20,7 +80,20 @@ for (const [path, module] of Object.entries(storyModules)) {
             `Story "${name}" has no run() helper — composeStories incompatible.`,
           );
         }
-        await s.run();
+        // Render into an owned canvas so axe scans exactly this story's
+        // subtree, then clean it up so stories stay isolated.
+        const canvasElement = document.createElement("div");
+        document.body.appendChild(canvasElement);
+        try {
+          await s.run({ canvasElement });
+          await checkA11y(
+            canvasElement,
+            s.parameters?.a11y ?? {},
+            `${path.replace(/^\.\.\//, "")} > ${name}`,
+          );
+        } finally {
+          canvasElement.remove();
+        }
       });
     }
   });