diff --git a/docs/development.md b/docs/development.md
index 1e7cad0..eae857e 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -107,3 +107,20 @@ Add primitives with `pnpm dlx shadcn@latest add <component>`. `components.json`
 selects Base UI, Nova, and Lucide. Theme defaults live in `src/styles/globals.css`;
 components own their Tailwind classes. See [architecture](architecture.md) for
 module ownership and the current layout.
+
+## Accessibility
+
+Oxlint enables `jsx-a11y` correctness rules. The semantic-tag preference is disabled
+because SVG/canvas images and live regions legitimately use ARIA. Documentation
+table regions retain keyboard focus for scrolling. Shared links and labels forward
+content and associations explicitly so lint can inspect them.
+
+The browser suite runs axe on Home, About, API, settings tabs, and editor/export
+dialogs. Run just these checks with `pnpm run test:browser --grep 'accessibility:'`
+after building. Tests check the rendered DOM, including generated ARIA references
+that static lint cannot validate. Base UI owns tab-panel IDs; use `data-panel` for
+stable test selectors rather than overriding those IDs.
+
+For release review, also run Lighthouse on the production build and manually check
+keyboard navigation, focus restoration, and screen-reader labels. A clean automated
+audit does not establish complete accessibility.
diff --git a/oxlint.config.ts b/oxlint.config.ts
index bc87051..ca4d28a 100644
--- a/oxlint.config.ts
+++ b/oxlint.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from "oxlint";
 
 export default defineConfig({
-  plugins: ["eslint", "unicorn", "oxc", "vitest", "typescript"],
+  plugins: ["eslint", "unicorn", "oxc", "vitest", "typescript", "jsx-a11y"],
   categories: { correctness: "error" },
   env: { node: true },
   ignorePatterns: [
@@ -16,6 +16,8 @@ export default defineConfig({
     "test-results/**",
   ],
   rules: {
+    // SVG/canvas images and live status regions intentionally use ARIA roles.
+    "jsx-a11y/prefer-tag-over-role": "off",
     "typescript/consistent-type-definitions": ["error", "type"],
     "no-undef": "error",
     "no-var": "error",
@@ -23,6 +25,11 @@ export default defineConfig({
     "one-var": ["error", "never"],
   },
   overrides: [
+    {
+      files: ["src/components/docs-page.tsx"],
+      // Keyboard users must be able to scroll wide documentation tables.
+      rules: { "jsx-a11y/no-noninteractive-tabindex": "off" },
+    },
     {
       files: ["src/**/*.js", "src/**/*.mjs", "src/**/*.ts", "src/**/*.tsx"],
       env: { node: false, browser: true },
diff --git a/package.json b/package.json
index 2253fc2..946e88d 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.63.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/d3-color": "^3.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a5e5413..02d7535 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -177,6 +177,9 @@ importers:
         specifier: ^1.4.0
         version: 1.4.0
     devDependencies:
+      '@axe-core/playwright':
+        specifier: ^4.13.0
+        version: 4.13.0(playwright-core@1.63.0)
       '@playwright/test':
         specifier: ^1.63.0
         version: 1.63.0
@@ -228,6 +231,11 @@ importers:
 
 packages:
 
+  '@axe-core/playwright@4.13.0':
+    resolution: {integrity: sha512-6YLx+kxXu5GJceG4ozFg+33a2EMTdjYwWGloJ3sb9Kta5pp+ZNS53uxGVog5JetIY8s++P5UrtX+cri+u0VAVg==}
+    peerDependencies:
+      playwright-core: '>= 1.0.0'
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1565,6 +1573,10 @@ packages:
     resolution: {integrity: sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==}
     engines: {node: '>=10.12.0'}
 
+  axe-core@4.13.0:
+    resolution: {integrity: sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==}
+    engines: {node: '>=4'}
+
   babel-dead-code-elimination@1.0.12:
     resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
 
@@ -3598,6 +3610,11 @@ packages:
 
 snapshots:
 
+  '@axe-core/playwright@4.13.0(playwright-core@1.63.0)':
+    dependencies:
+      axe-core: 4.13.0
+      playwright-core: 1.63.0
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.29.7
@@ -4785,6 +4802,8 @@ snapshots:
 
   atomically@1.7.0: {}
 
+  axe-core@4.13.0: {}
+
   babel-dead-code-elimination@1.0.12:
     dependencies:
       '@babel/core': 7.29.7
diff --git a/src/components/dialogs/algorithm-dialog.tsx b/src/components/dialogs/algorithm-dialog.tsx
index f78d439..5613741 100644
--- a/src/components/dialogs/algorithm-dialog.tsx
+++ b/src/components/dialogs/algorithm-dialog.tsx
@@ -119,7 +119,12 @@ export function AlgorithmDialog({
           </TabsList>
         )}
         {!adding && (
-          <TabsContent value="information" id="sort-information" keepMounted className="min-h-72">
+          <TabsContent
+            value="information"
+            data-panel="sort-information"
+            keepMounted
+            className="min-h-72"
+          >
             <table>
               <tbody>
                 {(
@@ -150,7 +155,7 @@ export function AlgorithmDialog({
         )}
         <TabsContent
           value="algorithm"
-          id={adding ? "new-sort-algorithm" : "sort-algorithm"}
+          data-panel={adding ? "new-sort-algorithm" : "sort-algorithm"}
           keepMounted
         >
           <div className="js-editor h-72 w-full" ref={host} />
diff --git a/src/components/docs-page.tsx b/src/components/docs-page.tsx
index 8bfe484..5dd0f79 100644
--- a/src/components/docs-page.tsx
+++ b/src/components/docs-page.tsx
@@ -20,7 +20,7 @@ export function DocsPage({
   components?: Components;
 }) {
   return (
-    <article
+    <main
       id={id}
       className="mx-auto my-8 w-[calc(100%-2rem)] max-w-7xl text-base leading-relaxed [&_h1]:mb-6 [&_h1]:text-4xl [&_h1]:font-bold [&_h2]:mt-8 [&_li]:my-2 [&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:mb-4 [&_ul]:list-disc [&_ul]:pl-6"
     >
@@ -51,6 +51,6 @@ export function DocsPage({
       >
         {content}
       </Markdown>
-    </article>
+    </main>
   );
 }
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 9db0985..c57d6d5 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -39,7 +39,7 @@ export function Footer() {
             skratchdot{" "}
             <img
               className="inline size-4"
-              alt="skratchdot"
+              alt=""
               src={`${import.meta.env.BASE_URL}img/favicon.ico`}
             />
           </TextLink>
diff --git a/src/components/playground/settings-controls.tsx b/src/components/playground/settings-controls.tsx
index 88862a0..7fa5d3d 100644
--- a/src/components/playground/settings-controls.tsx
+++ b/src/components/playground/settings-controls.tsx
@@ -46,7 +46,7 @@ export function Settings({ runtime }: Props) {
         ))}
       </TabsList>
       <div id="settings-content" className="min-h-72 rounded-lg border bg-card p-4">
-        <TabsContent value="audio" id="audio" keepMounted>
+        <TabsContent value="audio" data-panel="audio" keepMounted>
           {(
             [
               ["volume", "Volume", selected.volume.toFixed(2)],
@@ -102,10 +102,10 @@ export function Settings({ runtime }: Props) {
             {selected.audioType} settings
           </Button>
         </TabsContent>
-        <TabsContent value="waveform" id="waveform" keepMounted>
+        <TabsContent value="waveform" data-panel="waveform" keepMounted>
           <WaveformControls store={store} />
         </TabsContent>
-        <TabsContent value="scale" id="scale" keepMounted>
+        <TabsContent value="scale" data-panel="scale" keepMounted>
           <FilteredOptions
             id="scale"
             label="Scale"
@@ -114,7 +114,7 @@ export function Settings({ runtime }: Props) {
             onSelect={(value) => update({ key: "scale", value })}
           />
         </TabsContent>
-        <TabsContent value="soundfont" id="soundfont" keepMounted>
+        <TabsContent value="soundfont" data-panel="soundfont" keepMounted>
           <FilteredOptions
             id="soundfont"
             label="Soundfont"
diff --git a/src/components/text-link.tsx b/src/components/text-link.tsx
index 2fa7c20..9e8d366 100644
--- a/src/components/text-link.tsx
+++ b/src/components/text-link.tsx
@@ -2,7 +2,7 @@ import { createLink } from "@tanstack/react-router";
 import type { ComponentProps } from "react";
 import { cn } from "@/utilities/cn";
 
-export function TextLink({ className, ...props }: ComponentProps<"a">) {
+export function TextLink({ className, children, ...props }: ComponentProps<"a">) {
   return (
     <a
       className={cn(
@@ -10,7 +10,9 @@ export function TextLink({ className, ...props }: ComponentProps<"a">) {
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+    </a>
   );
 }
 
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 8eda3f6..55c921a 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -3,10 +3,11 @@
 import * as React from "react";
 import { cn } from "cn";
 
-function Label({ className, ...props }: React.ComponentProps<"label">) {
+function Label({ className, htmlFor, ...props }: React.ComponentProps<"label">) {
   return (
     <label
       data-slot="label"
+      htmlFor={htmlFor}
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className,
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index b733c9f..1b48b29 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -59,7 +59,8 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   );
 }
 
-function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+// Base UI owns panel IDs so tab aria-controls references stay in sync.
+function TabsContent({ className, ...props }: Omit<TabsPrimitive.Panel.Props, "id">) {
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
diff --git a/test/browser/accessibility.spec.mjs b/test/browser/accessibility.spec.mjs
new file mode 100644
index 0000000..a51ba7a
--- /dev/null
+++ b/test/browser/accessibility.spec.mjs
@@ -0,0 +1,48 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+async function checkAccessibility(page) {
+  const { violations } = await new AxeBuilder({ page }).analyze();
+  expect(
+    violations.map(({ id, nodes }) => ({
+      id,
+      nodes: nodes.map(({ target, failureSummary }) => ({ target, failureSummary })),
+    })),
+  ).toEqual([]);
+}
+
+for (const route of ["./", "about", "api"]) {
+  test(`accessibility: ${route}`, async ({ page }) => {
+    await page.goto(route);
+    if (route === "./") await expect(page.locator("#base-svg rect")).toHaveCount(12);
+    await checkAccessibility(page);
+  });
+}
+
+test("accessibility: settings and dialogs", async ({ page }) => {
+  await page.goto("./");
+  await expect(page.locator("#base-svg rect")).toHaveCount(12);
+  for (const tab of await page.getByRole("tab").all()) {
+    await tab.click();
+    await checkAccessibility(page);
+  }
+  await page.getByRole("tab", { name: "Audio", exact: true }).click();
+  await page.locator('[data-audio-type="soundfont"]').click();
+  await page.getByRole("tab", { name: "SoundFont", exact: true }).click();
+  await checkAccessibility(page);
+  await page.locator("#modal-sort-open").click();
+  await checkAccessibility(page);
+  await page.getByRole("tab", { name: "Algorithm", exact: true }).click();
+  await expect(page.getByRole("button", { name: "Save changes" })).toBeEnabled();
+  await checkAccessibility(page);
+  await page.keyboard.press("Escape");
+  await page.locator("#add-algorithm-btn").click();
+  await expect(page.locator(".ace_editor")).toBeVisible();
+  await checkAccessibility(page);
+  await page.keyboard.press("Escape");
+  for (const id of ["base", "sort"]) {
+    await page.locator(`[data-midi-export="${id}"]`).click();
+    await checkAccessibility(page);
+    await page.keyboard.press("Escape");
+  }
+});
diff --git a/test/browser/site.spec.mjs b/test/browser/site.spec.mjs
index 315c201..84c0da8 100644
--- a/test/browser/site.spec.mjs
+++ b/test/browser/site.spec.mjs
@@ -256,7 +256,7 @@ test("React controls work without Bootstrap, jQuery, or classic vendor scripts",
   await page.locator("#tab-audio").focus();
   await page.keyboard.press("ArrowRight");
   await expect(page.locator("#tab-waveform")).toBeFocused();
-  await expect(page.locator("#waveform")).toBeVisible();
+  await expect(page.locator("[data-panel=waveform]")).toBeVisible();
   await page.keyboard.press("ArrowRight");
   await expect(page.locator("#tab-scale")).toBeFocused();
   await page.locator("#scale-filter").fill("[");
@@ -282,7 +282,7 @@ test("Base UI dialogs trap focus, report invalid edits, and close on cached-page
   await page.locator("#new-sort-name").fill("Invalid algorithm");
   await expect(page.locator("#save-algorithm-new")).toBeEnabled();
   await page
-    .locator("#new-sort-algorithm .js-editor.ace_editor")
+    .locator("[data-panel=new-sort-algorithm] .js-editor.ace_editor")
     .evaluate((element) => globalThis.ace.edit(element).setValue("let = ;"));
   await page.locator("#save-algorithm-new").click();
   await expect(dialog.getByRole("alert")).toBeVisible();
@@ -423,11 +423,13 @@ test("Ace loads on demand and a closed dialog cannot finish initializing", async
   await expect(page.locator("#modal-sort")).toBeHidden();
   releaseEditor();
   await expect.poll(() => page.evaluate(() => typeof globalThis.ace)).toBe("object");
-  await expect(page.locator("#sort-algorithm .js-editor.ace_editor")).toHaveCount(0);
+  await expect(page.locator("[data-panel=sort-algorithm] .js-editor.ace_editor")).toHaveCount(0);
   await page.locator("#add-algorithm-btn").click();
   await page.locator("#new-sort-name").fill("Lazy editor");
   await expect(page.locator("#save-algorithm-new")).toBeEnabled();
-  await expect(page.locator("#new-sort-algorithm .js-editor.ace_editor")).toHaveCount(1);
+  await expect(page.locator("[data-panel=new-sort-algorithm] .js-editor.ace_editor")).toHaveCount(
+    1,
+  );
   expect(editorRequests).toHaveLength(1);
 });
 
@@ -456,7 +458,7 @@ test("editor supports modern JavaScript, syntax diagnostics, and two-space soft
   await page.goto("./");
   await page.locator("#modal-sort-open").click();
   await expect(page.locator("#modal-sort")).toBeVisible();
-  const editor = page.locator("#sort-algorithm .js-editor.ace_editor");
+  const editor = page.locator("[data-panel=sort-algorithm] .js-editor.ace_editor");
   await page.locator("#modal-sort [role=tab]:last-child").click();
   await editor.evaluate((element) => {
     const editor = globalThis.ace.edit(element);
@@ -501,7 +503,7 @@ test("all built-ins can be edited and saved from readable production source", as
     await expect(page.locator("#modal-sort")).toBeVisible();
     const display = await page.locator("#sort-info-display").textContent();
     const source = await page
-      .locator("#sort-algorithm .js-editor.ace_editor")
+      .locator("[data-panel=sort-algorithm] .js-editor.ace_editor")
       .evaluate((element) => globalThis.ace.edit(element).getValue());
     expect(source).toContain("AS.");
     await page.locator("#save-algorithm-edit").click();
@@ -544,7 +546,7 @@ for (const fallback of [false, true]) {
     await page.locator("#add-algorithm-btn").click();
     await page.locator("#new-sort-name").fill("Custom smoke");
     await page
-      .locator("#new-sort-algorithm .js-editor.ace_editor")
+      .locator("[data-panel=new-sort-algorithm] .js-editor.ace_editor")
       .evaluate((element) => globalThis.ace.edit(element).setValue("AS.play(0);"));
     await page.locator("#save-algorithm-new").click();
     await expect(page.locator("#modal-add-algorithm")).toBeHidden();
@@ -710,7 +712,9 @@ test("teardown clears owned resources and repeated remounts do not duplicate UI
   const initialSliderCount = await page.locator("input[type=range]").count();
   for (let cycle = 0; cycle < 2; cycle++) {
     await page.locator("#add-algorithm-btn").click();
-    await expect(page.locator("#new-sort-algorithm .js-editor.ace_editor")).toHaveCount(1);
+    await expect(page.locator("[data-panel=new-sort-algorithm] .js-editor.ace_editor")).toHaveCount(
+      1,
+    );
     await page.evaluate(() => {
       globalThis.dispatchEvent(
         new globalThis.PageTransitionEvent("pagehide", { persisted: false }),
@@ -772,7 +776,9 @@ test("destroy during an editor download cannot initialize a stale editor", async
     globalThis.dispatchEvent(new globalThis.PageTransitionEvent("pageshow", { persisted: true })),
   );
   await page.locator("#add-algorithm-btn").click();
-  await expect(page.locator("#new-sort-algorithm .js-editor.ace_editor")).toHaveCount(1);
+  await expect(page.locator("[data-panel=new-sort-algorithm] .js-editor.ace_editor")).toHaveCount(
+    1,
+  );
 });
 
 test("teardown cancels pending audio resume without removing unrelated native listeners", async ({
@@ -847,7 +853,7 @@ test("resizing and saving a selected algorithm update sorting without reselectin
   await page.locator("#modal-sort-open").click();
   await page.locator("#modal-sort [role=tab]:last-child").click();
   await page
-    .locator("#sort-algorithm .js-editor.ace_editor")
+    .locator("[data-panel=sort-algorithm] .js-editor.ace_editor")
     .evaluate((element) => globalThis.ace.edit(element).setValue("AS.play(0);"));
   await page.locator("#save-algorithm-edit").click();
   await expect.poll(() => page.evaluate(() => globalThis.sortRequests.at(-1)?.type)).toBe("custom");
@@ -929,8 +935,8 @@ test("audio settings render selections and survive subscription reconnection", a
   await page.goto("./");
   await page.locator("#settings #tab-waveform").click();
   await expect(page.locator("#waveform-adshr-attack-display")).toHaveText("50 ms");
-  await page.locator('#waveform button[data-waveform="sin"]').click();
-  await expect(page.locator('#waveform button[data-waveform="sin"]')).toHaveAttribute(
+  await page.locator('[data-panel=waveform] button[data-waveform="sin"]').click();
+  await expect(page.locator('[data-panel=waveform] button[data-waveform="sin"]')).toHaveAttribute(
     "aria-pressed",
     "true",
   );
@@ -1031,7 +1037,10 @@ test("envelope controls preserve the compact settings panel", async ({ page }) =
     const before = await page.locator("#sort-section").boundingBox();
     await page.locator("#settings #tab-waveform").click();
     await expect(page.locator("#envelope-controls label").first()).toHaveCSS("font-size", "12px");
-    await expect(page.locator("#waveform button").first()).toHaveCSS("font-size", "12.8px");
+    await expect(page.locator("[data-panel=waveform] button").first()).toHaveCSS(
+      "font-size",
+      "12.8px",
+    );
     const after = await page.locator("#sort-section").boundingBox();
     expect(Math.abs(after.y - before.y)).toBeLessThanOrEqual(2);
     const panel = await page.locator("#settings-content").boundingBox();
@@ -1059,7 +1068,7 @@ test("waveform envelope edits survive switching presets", async ({ page }) => {
   for (const thumb of await thumbs.all()) await expect(thumb).toBeVisible();
   await page.locator("#envelope-controls label").first().click();
   await expect(page.getByRole("slider", { name: "Attack", exact: true })).toBeFocused();
-  await page.locator('#waveform button[data-waveform="string"]').click();
+  await page.locator('[data-panel=waveform] button[data-waveform="string"]').click();
   const display = page.locator("#waveform-adshr-attack-display");
   const preview = page.locator("#waveform-canvas");
   await expect(preview).toHaveAttribute("aria-label", /String: illustrative/);
@@ -1084,7 +1093,7 @@ test("waveform envelope edits survive switching presets", async ({ page }) => {
   await slider.press("ArrowRight");
   await expect(display).not.toHaveText("50 ms");
   const attack = await display.textContent();
-  await page.locator('#waveform button[data-waveform="sin"]').click();
+  await page.locator('[data-panel=waveform] button[data-waveform="sin"]').click();
   await expect(display).toHaveText(attack);
   await expect(preview).toHaveAttribute("aria-label", "sin oscillator waveform");
   expect(await preview.evaluate((canvas) => canvas.toDataURL())).not.toBe(stringPreview);
@@ -1097,7 +1106,7 @@ test("waveform envelope edits survive switching presets", async ({ page }) => {
     "aria-label",
     /sustain 51% for 200 ms/,
   );
-  await page.locator('#waveform button[data-waveform="string"]').click();
+  await page.locator('[data-panel=waveform] button[data-waveform="string"]').click();
   await expect(display).toHaveText(attack);
   expect(await preview.evaluate((canvas) => canvas.toDataURL())).toBe(stringPreview);
   expect(errors).toEqual([]);