diff --git a/src/app.css b/src/app.css
index 1adb651..ada33c0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -32,10 +32,75 @@ body {
 	background: var(--bg-space);
 }
 
+/*
+ * Focus indicators. These used to live in SkillTree.svelte's *scoped* style
+ * block, so Svelte's scoping meant they never reached NodeModal or StatsPanel
+ * children — those fell back to the UA default outline, which is low-contrast
+ * on this background. Global is the only place this rule works.
+ */
+:focus-visible {
+	outline: 2px solid var(--color-gold);
+	outline-offset: 2px;
+	border-radius: 2px;
+}
+
+/*
+ * Reduced motion. The JS side (see config.prefersReducedMotion) skips the
+ * entrance and never creates the ambient GSAP loops; this covers the CSS
+ * animations and transitions those can't reach.
+ */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
 /*
  * Visually-hidden but available to screen readers and crawlers. Used for the
  * text version of the portfolio (the interactive content is canvas-rendered).
  */
+/*
+ * ...but focusable content inside it must become visible when focused, or a
+ * sighted keyboard user tabs through ~20 invisible stops with no idea where
+ * focus is (WCAG 2.4.7). Standard sr-only-focusable treatment.
+ */
+.sr-only:focus-within {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 2000;
+	width: auto;
+	height: auto;
+	max-width: min(90vw, 60rem);
+	max-height: 90vh;
+	margin: 0;
+	overflow: auto;
+	clip: auto;
+	white-space: normal;
+	padding: 1.5rem;
+	background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
+	border: 1px solid var(--color-gold);
+	border-radius: 0 0 8px 0;
+	color: #e8e8f0;
+	line-height: 1.6;
+}
+
+.sr-only:focus-within a {
+	color: var(--color-gold);
+}
+
+.sr-only:focus-within h1,
+.sr-only:focus-within h2,
+.sr-only:focus-within h3 {
+	color: var(--color-gold);
+	margin: 1rem 0 0.5rem;
+}
+
 .sr-only {
 	position: absolute;
 	width: 1px;
diff --git a/src/lib/components/NodeModal.svelte b/src/lib/components/NodeModal.svelte
index 6777124..5e8aeb4 100644
--- a/src/lib/components/NodeModal.svelte
+++ b/src/lib/components/NodeModal.svelte
@@ -2,28 +2,84 @@
 	import type { TreeNode } from '$lib/data';
 	import { categoryColorHex } from '$lib/theme';
 
-	const { node, visible, onClose }: { node: TreeNode; visible: boolean; onClose: () => void } =
-		$props();
+	const {
+		node,
+		visible,
+		onClose,
+		onDismiss
+	}: {
+		node: TreeNode;
+		visible: boolean;
+		/** Explicit close (✕ button) — always immediate. */
+		onClose: () => void;
+		/** Outside/backdrop dismissal — subject to the mobile touch-bleed guard. */
+		onDismiss: () => void;
+	} = $props();
+
+	let dialogEl = $state<HTMLDivElement | null>(null);
+
+	const FOCUSABLE =
+		'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+	/**
+	 * Move focus into the dialog on open and restore it on close.
+	 *
+	 * Without this, `aria-modal="true"` was lying: it tells assistive tech that
+	 * everything outside the dialog does not exist, while focus stayed on the
+	 * canvas behind it and Tab walked the whole hidden text version underneath.
+	 */
+	$effect(() => {
+		if (!visible || !dialogEl) return;
+
+		const previouslyFocused = document.activeElement as HTMLElement | null;
+		const first = dialogEl.querySelector<HTMLElement>(FOCUSABLE);
+		(first ?? dialogEl).focus({ preventScroll: true });
+
+		return () => previouslyFocused?.focus?.({ preventScroll: true });
+	});
+
+	/** Keep Tab inside the dialog while it's open. */
+	function trapFocus(e: KeyboardEvent) {
+		if (e.key !== 'Tab' || !dialogEl) return;
+
+		const items = [...dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+			(el) => el.offsetParent !== null || el === document.activeElement
+		);
+		if (!items.length) return;
+
+		const first = items[0];
+		const last = items[items.length - 1];
+		const active = document.activeElement;
+
+		if (e.shiftKey && (active === first || active === dialogEl)) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && active === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
 </script>
 
-<div
-	class="modal-backdrop"
-	class:visible
-	onclick={onClose}
-	onkeydown={(e) => e.key === 'Escape' && onClose()}
-	role="presentation"
-	aria-label="Modal backdrop. Click to close or press Escape."
->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_interactive_supports_focus -->
+<!--
+	Backdrop is presentational: click-to-close only. It previously carried an
+	onkeydown Escape handler, but a role="presentation" div with no tabindex can
+	never be a keydown target, so that handler was unreachable. Escape is handled
+	by the global key listener (see pixi/interaction.ts), and Tab is trapped by
+	the dialog below.
+-->
+<div class="modal-backdrop" class:visible onclick={onDismiss} role="presentation">
 	<div
+		bind:this={dialogEl}
 		class="modal"
 		class:visible
 		onclick={(e) => e.stopPropagation()}
+		onkeydown={trapFocus}
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="modal-title"
 		aria-describedby="modal-description"
+		tabindex="-1"
 		style="--node-color: {categoryColorHex[node.category]}"
 	>
 		<button class="close-btn" onclick={onClose} aria-label="Close dialog">✕</button>
@@ -219,6 +275,10 @@
 		backdrop-filter: blur(4px);
 	}
 
+	.modal:focus {
+		outline: none;
+	}
+
 	.modal {
 		background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
 		border: 1px solid var(--node-color);
diff --git a/src/lib/components/SkillTree.svelte b/src/lib/components/SkillTree.svelte
index 4308539..9fc6dc9 100644
--- a/src/lib/components/SkillTree.svelte
+++ b/src/lib/components/SkillTree.svelte
@@ -9,6 +9,7 @@
 	import Tooltip from './Tooltip.svelte';
 	import NodeModal from './NodeModal.svelte';
 	import StatsPanel from './StatsPanel.svelte';
+	import TreeNavigator from './TreeNavigator.svelte';
 	import { MOBILE_BREAKPOINT } from '$lib/config';
 	import {
 		BRANCH_IDS,
@@ -18,16 +19,18 @@
 		countByProficiency
 	} from '$lib/utils/stats';
 	import { createBackground } from '$lib/pixi/background';
-	import { createController } from '$lib/pixi/controller';
+	import { createController, type SkillTreeController } from '$lib/pixi/controller';
 	import { createLines } from '$lib/pixi/lines';
 	import { createNodes } from '$lib/pixi/nodes';
-	import { attachPanZoom, attachKeyboard, updateParallax } from '$lib/pixi/interaction';
+	import { attachPanZoom, attachKeyboard, updateParallax, panToNode } from '$lib/pixi/interaction';
 	import { runEntranceAnimations } from '$lib/pixi/animation';
 	import { createLifecycle } from '$lib/pixi/lifecycle';
 
 	const { onRenderFail }: { onRenderFail?: () => void } = $props();
 
 	let container: HTMLDivElement;
+	// Set once the canvas is up; the tree navigator uses it to pan the camera.
+	let controllerRef: SkillTreeController | null = null;
 	let selectedNode = $state<TreeNode | null>(null);
 	let modalVisible = $state(false);
 	let showWelcomeTitle = $state(true);
@@ -62,18 +65,23 @@
 	}
 
 	function closeModal() {
-		// Prevent closing if modal just opened (within 300ms)
-		// This fixes touch events "bleeding through" on mobile
-		if (Date.now() - modalOpenedAt < 300) {
-			return;
-		}
-
 		modalVisible = false;
 		setTimeout(() => {
 			selectedNode = null;
 		}, 200);
 	}
 
+	/**
+	 * Backdrop//outside dismissal only. The 300ms guard exists because a tap that
+	 * opens the modal on mobile can bleed through to the backdrop underneath —
+	 * but it used to gate *every* close path, so pressing Escape or the ✕ right
+	 * after opening silently did nothing.
+	 */
+	function dismissModal() {
+		if (Date.now() - modalOpenedAt < 300) return;
+		closeModal();
+	}
+
 	function toggleStatsPanel() {
 		statsPanelVisible = !statsPanelVisible;
 		if (statsPanelVisible && modalVisible) {
@@ -165,6 +173,8 @@
 			treeContainer.alpha = 1;
 
 			const controller = createController(app, treeContainer, bg, endScale);
+			controllerRef = controller;
+			life.add(() => (controllerRef = null));
 
 			// Build the visualisation (connections first, then nodes on top)
 			controller.lineObjects = createLines(treeContainer);
@@ -318,11 +328,24 @@
 <div
 	bind:this={container}
 	class="canvas-container"
-	role="application"
-	aria-label="Interactive skill tree visualization. Use arrow keys to pan, +/- to zoom, R to reset view, C to toggle character stats panel."
+	role="img"
+	aria-label="Skill tree visualisation. Arrow keys pan, plus and minus zoom, R resets the view, C toggles the character stats panel. For a navigable list of every entry, use the skill tree navigator."
 	tabindex="0"
 ></div>
 
+<!--
+	The keyboard/AT interface for the canvas. role="application" used to sit on
+	the div above, which tells screen readers to suppress their own navigation
+	and forward every key — appropriate only for a widget implementing a full
+	keyboard model, which the canvas does not. This does.
+-->
+<TreeNavigator
+	onActivate={openModal}
+	onFocusNode={(node) => {
+		if (controllerRef) panToNode(controllerRef, node.x, node.y, life);
+	}}
+/>
+
 <!-- Loading Indicator for Lighthouse LCP -->
 {#if isLoading}
 	<LoadingIndicator />
@@ -345,7 +368,12 @@
 
 <!-- Modal Overlay -->
 {#if selectedNode}
-	<NodeModal node={selectedNode} visible={modalVisible} onClose={closeModal} />
+	<NodeModal
+		node={selectedNode}
+		visible={modalVisible}
+		onClose={closeModal}
+		onDismiss={dismissModal}
+	/>
 {/if}
 
 <!-- Character Stats Panel (toggle button + backdrop + panel) -->
@@ -362,12 +390,8 @@
 />
 
 <style>
-	/* Global focus indicators for accessibility */
-	*:focus-visible {
-		outline: 2px solid var(--color-gold);
-		outline-offset: 2px;
-	}
-
+	/* Focus indicators are global now — see app.css. A scoped rule here could
+	   never reach NodeModal or StatsPanel children. */
 	.canvas-container {
 		width: 100%;
 		height: 100%;
diff --git a/src/lib/components/StatsPanel.svelte b/src/lib/components/StatsPanel.svelte
index 868faf0..b6fe0d8 100644
--- a/src/lib/components/StatsPanel.svelte
+++ b/src/lib/components/StatsPanel.svelte
@@ -40,27 +40,36 @@
 
 <!-- Stats Panel Backdrop -->
 {#if visible}
-	<div
-		class="stats-panel-backdrop visible"
-		onclick={onToggle}
-		onkeydown={(e) => e.key === 'Escape' && onToggle()}
-		role="presentation"
-		aria-label="Stats panel backdrop. Click to close or press Escape."
-	></div>
+	<!-- Presentational click-to-close. The onkeydown this used to carry could
+	     never fire (role="presentation", no tabindex); Escape is global. -->
+	<div class="stats-panel-backdrop visible" onclick={onToggle} role="presentation"></div>
 {/if}
 
 <!-- Stats Panel -->
+<!--
+	`inert` rather than aria-hidden: the panel is only translated off-screen, so
+	its focusable children stayed in the tab order while announcing as nothing —
+	a direct axe `aria-hidden-focus` violation. inert removes it from the
+	accessibility tree AND the tab order together.
+-->
 <div
 	id="stats-panel"
 	class="stats-panel"
 	class:visible
 	role="complementary"
 	aria-label="Character Statistics"
-	aria-hidden={!visible}
+	inert={!visible}
 >
 	<!-- Character Card -->
 	<div class="character-card">
-		<img src="/headshot.jpg" alt="Character Portrait" class="character-portrait" />
+		<img
+			src="/headshot.jpg"
+			alt=""
+			width="120"
+			height="120"
+			decoding="async"
+			class="character-portrait"
+		/>
 
 		<div class="character-stats-bar">
 			<div class="stat-item">
@@ -70,7 +79,7 @@
 			</div>
 		</div>
 
-		<h1 class="character-name">Kevin Riehl</h1>
+		<p class="character-name">Kevin Riehl</p>
 		<p class="character-title">{playerClass}</p>
 	</div>
 
@@ -107,13 +116,14 @@
 		<!-- Skill Branches -->
 		{#each Object.entries(skillsByBranch) as [branchId, branch] (branchId)}
 			<div class="skill-branch">
-				<div
+				<!-- A real <button>: the previous div+role="button" handled Enter but
+				     not Space, which the ARIA button pattern requires. -->
+				<button
+					type="button"
 					class="branch-header"
 					onclick={() => onToggleBranch(branchId)}
-					onkeydown={(e) => e.key === 'Enter' && onToggleBranch(branchId)}
-					tabindex="0"
-					role="button"
 					aria-expanded={expandedBranches.has(branchId)}
+					aria-controls="skill-list-{branchId}"
 				>
 					<img
 						src={treeNodes.find((n) => n.id === branchId)?.icon || ''}
@@ -123,10 +133,10 @@
 					<span class="branch-title">{branch.label}</span>
 					<span class="branch-count">({branch.skills.length})</span>
 					<span class="expand-icon" class:expanded={expandedBranches.has(branchId)}>▼</span>
-				</div>
+				</button>
 
 				{#if expandedBranches.has(branchId)}
-					<div class="skill-list" transition:slide={{ duration: 300 }}>
+					<div id="skill-list-{branchId}" class="skill-list" transition:slide={{ duration: 300 }}>
 						{#each branch.skills as skill (skill.id)}
 							<div class="skill-item">
 								{#if skill.icon}
@@ -362,6 +372,11 @@
 		border-radius: 8px;
 		cursor: pointer;
 		transition: all 0.2s ease;
+		/* Reset the UA button defaults so this keeps the previous appearance. */
+		width: 100%;
+		text-align: left;
+		font: inherit;
+		color: inherit;
 	}
 
 	.branch-header:hover {
diff --git a/src/lib/components/TreeNavigator.svelte b/src/lib/components/TreeNavigator.svelte
new file mode 100644
index 0000000..3447800
--- /dev/null
+++ b/src/lib/components/TreeNavigator.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+	// Accessible counterpart to the canvas.
+	//
+	// The skill tree is drawn entirely in WebGL: nodes are PixiJS Containers with
+	// no DOM representation, so before this there was no way to reach a node by
+	// keyboard or have one announced. The canvas advertised role="application",
+	// which tells screen readers to hand every key to the app — for a widget that
+	// implemented no keyboard model at all.
+	//
+	// This renders the same data.ts as a real WAI-ARIA tree: roving tabindex,
+	// arrow-key traversal, Enter/Space to open the same modal a click opens.
+	// Visually hidden until focused, then shown, so it doubles as a skip-target
+	// for sighted keyboard users instead of ~20 invisible tab stops.
+	import { treeNodes, type TreeNode } from '$lib/data';
+	import { buildHierarchy, flattenVisible } from '$lib/utils/tree';
+	import { categoryColorHex } from '$lib/theme';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	const {
+		onActivate,
+		onFocusNode
+	}: {
+		/** Enter/Space on a node — opens the same modal as a canvas click. */
+		onActivate: (node: TreeNode) => void;
+		/** Focus moved to a node — pans the canvas so the two stay in sync. */
+		onFocusNode?: (node: TreeNode) => void;
+	} = $props();
+
+	const roots = buildHierarchy(treeNodes);
+
+	// SvelteSet, not $state(new Set()) — Svelte does not proxy a plain Set, so
+	// in-place mutation is untracked. (This is the same trap that silently broke
+	// the stats panel's expand/collapse.)
+	const expanded = new SvelteSet<string>(roots.map((r) => r.node.id));
+	let activeId = $state(roots[0]?.node.id ?? '');
+
+	const rows = $derived(flattenVisible(roots, (id) => expanded.has(id)));
+
+	function setExpanded(id: string, open: boolean) {
+		if (open) expanded.add(id);
+		else expanded.delete(id);
+	}
+
+	function focusRow(index: number) {
+		const row = rows[index];
+		if (!row) return;
+		activeId = row.branch.node.id;
+		document.getElementById(`tn-${row.branch.node.id}`)?.focus();
+		onFocusNode?.(row.branch.node);
+	}
+
+	function handleKeydown(e: KeyboardEvent, index: number) {
+		const { branch } = rows[index];
+		const hasChildren = branch.children.length > 0;
+		const isOpen = expanded.has(branch.node.id);
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				focusRow(Math.min(index + 1, rows.length - 1));
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				focusRow(Math.max(index - 1, 0));
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				if (hasChildren && !isOpen) setExpanded(branch.node.id, true);
+				else if (hasChildren) focusRow(index + 1);
+				break;
+			case 'ArrowLeft': {
+				e.preventDefault();
+				if (hasChildren && isOpen) {
+					setExpanded(branch.node.id, false);
+					break;
+				}
+				// Otherwise move to the parent row.
+				const parentId = branch.node.parentId;
+				const parentIndex = rows.findIndex((r) => r.branch.node.id === parentId);
+				if (parentIndex !== -1) focusRow(parentIndex);
+				break;
+			}
+			case 'Home':
+				e.preventDefault();
+				focusRow(0);
+				break;
+			case 'End':
+				e.preventDefault();
+				focusRow(rows.length - 1);
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				onActivate(branch.node);
+				break;
+		}
+	}
+</script>
+
+<div class="tree-nav">
+	<h2 id="tree-nav-label" tabindex="-1">Skill tree navigator</h2>
+	<p class="tree-nav-hint">
+		Arrow keys move between entries, Right and Left expand and collapse, Enter opens details.
+	</p>
+
+	<ul role="tree" aria-labelledby="tree-nav-label">
+		{#each rows as { branch, level }, index (branch.node.id)}
+			{@const node = branch.node}
+			{@const hasChildren = branch.children.length > 0}
+			<li
+				role="treeitem"
+				id="tn-{node.id}"
+				aria-level={level}
+				aria-expanded={hasChildren ? expanded.has(node.id) : undefined}
+				aria-selected={activeId === node.id}
+				tabindex={activeId === node.id ? 0 : -1}
+				style="--node-color: {categoryColorHex[node.category]}; --level: {level}"
+				onkeydown={(e) => handleKeydown(e, index)}
+				onclick={() => onActivate(node)}
+				onfocus={() => {
+					activeId = node.id;
+					onFocusNode?.(node);
+				}}
+			>
+				<span class="tn-dot" aria-hidden="true"></span>
+				<span class="tn-label">{node.label}</span>
+				<span class="tn-category">{node.category}</span>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	/*
+	 * Visually hidden until something inside it takes focus. Same idea as a skip
+	 * link: invisible to mouse users, but a sighted keyboard user gets a real,
+	 * visible panel instead of focus vanishing into a 1x1px clip region.
+	 */
+	.tree-nav {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.tree-nav:focus-within {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1200;
+		width: min(24rem, 92vw);
+		height: auto;
+		max-height: 90vh;
+		margin: 0;
+		padding: 1rem;
+		overflow-y: auto;
+		clip: auto;
+		white-space: normal;
+		background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
+		border: 1px solid var(--color-gold);
+		border-radius: 0 0 10px 0;
+		box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+	}
+
+	.tree-nav h2 {
+		margin: 0 0 0.25rem;
+		color: var(--color-gold);
+		font-size: 1rem;
+	}
+
+	.tree-nav-hint {
+		margin: 0 0 0.75rem;
+		color: var(--text-muted);
+		font-size: 0.8rem;
+		line-height: 1.4;
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.35rem 0.5rem;
+		padding-left: calc(0.5rem + (var(--level) - 1) * 0.85rem);
+		border-radius: 6px;
+		color: #e8e8f0;
+		font-size: 0.85rem;
+		cursor: pointer;
+	}
+
+	li:hover,
+	li[aria-selected='true'] {
+		background: rgba(255, 255, 255, 0.06);
+	}
+
+	.tn-dot {
+		flex: 0 0 auto;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--node-color);
+	}
+
+	.tn-label {
+		flex: 1 1 auto;
+	}
+
+	.tn-category {
+		flex: 0 0 auto;
+		color: var(--text-muted);
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+</style>
diff --git a/src/lib/config.test.ts b/src/lib/config.test.ts
new file mode 100644
index 0000000..9b4ea8c
--- /dev/null
+++ b/src/lib/config.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { prefersReducedMotion, byDevice } from './config';
+
+const originalWindow = (globalThis as { window?: unknown }).window;
+
+function stubMatchMedia(matches: boolean | null) {
+	(globalThis as { window?: unknown }).window =
+		matches === null
+			? {} // window exists but matchMedia doesn't (very old/embedded engines)
+			: { matchMedia: (media: string) => ({ matches, media }) };
+}
+
+afterEach(() => {
+	(globalThis as { window?: unknown }).window = originalWindow;
+});
+
+describe('prefersReducedMotion', () => {
+	it('is false when there is no window (SSR / prerender)', () => {
+		delete (globalThis as { window?: unknown }).window;
+		expect(prefersReducedMotion()).toBe(false);
+	});
+
+	it('is false when window has no matchMedia', () => {
+		stubMatchMedia(null);
+		expect(prefersReducedMotion()).toBe(false);
+	});
+
+	it('is true when the user asked for reduced motion', () => {
+		stubMatchMedia(true);
+		expect(prefersReducedMotion()).toBe(true);
+	});
+
+	it('is false when the user has not', () => {
+		stubMatchMedia(false);
+		expect(prefersReducedMotion()).toBe(false);
+	});
+
+	it('reads matchMedia at call time, not module load', () => {
+		stubMatchMedia(false);
+		expect(prefersReducedMotion()).toBe(false);
+		stubMatchMedia(true);
+		expect(prefersReducedMotion()).toBe(true);
+	});
+});
+
+describe('byDevice', () => {
+	it('picks the mobile value on mobile and the desktop value otherwise', () => {
+		expect(byDevice({ desktop: 'd', mobile: 'm' }, true)).toBe('m');
+		expect(byDevice({ desktop: 'd', mobile: 'm' }, false)).toBe('d');
+	});
+});
diff --git a/src/lib/config.ts b/src/lib/config.ts
index f54f869..a7158da 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -56,6 +56,19 @@ export const TIMINGS = {
 	nodeStagger: { desktop: 0.08, mobile: 0.05 }
 } as const;
 
+/**
+ * Whether the visitor has asked for reduced motion.
+ *
+ * This site is unusually motion-heavy — a multi-second forced zoom, a staggered
+ * entrance, ~480 looping tweens and a continuous dust ticker — and none of it
+ * was previously conditional. Read at call time, not module load, so it is
+ * correct under SSR/prerender and picks up an OS-level change on reload.
+ */
+export function prefersReducedMotion(): boolean {
+	if (typeof window === 'undefined' || !window.matchMedia) return false;
+	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
 /** Helper: pick a desktop/mobile value. */
 export function byDevice<T>(pair: { desktop: T; mobile: T }, isMobile: boolean): T {
 	return isMobile ? pair.mobile : pair.desktop;
diff --git a/src/lib/pixi/animation.ts b/src/lib/pixi/animation.ts
index 69a0a00..ca01f14 100644
--- a/src/lib/pixi/animation.ts
+++ b/src/lib/pixi/animation.ts
@@ -4,6 +4,7 @@
 import { Container } from 'pixi.js';
 import { gsap } from 'gsap';
 import { getDistanceFromOrigin } from '$lib/utils/tree';
+import { prefersReducedMotion } from '$lib/config';
 import { updateParallax } from './interaction';
 import type { SkillTreeController } from './controller';
 import type { Lifecycle } from './lifecycle';
@@ -19,6 +20,31 @@ export function runEntranceAnimations(ctrl: SkillTreeController, opts: EntranceO
 	const { isMobile } = opts;
 	const { treeContainer, nodeObjects, lineObjects, endScale } = ctrl;
 
+	// Reduced motion: show the finished tree immediately. No zoom, no stagger,
+	// and critically no `repeat: -1` pulses — a static scene, not a faster one.
+	if (prefersReducedMotion()) {
+		treeContainer.scale.set(endScale);
+
+		for (const obj of nodeObjects) {
+			obj.graphics.alpha = 1;
+			obj.graphics.scale.set(1);
+			obj.glowGraphics.alpha = 1;
+			if (obj.graphics instanceof Container) obj.graphics.eventMode = 'static';
+		}
+
+		for (const line of lineObjects) {
+			line.graphics.alpha = 1;
+			line.glowGraphics.alpha = 1;
+			line.plasmaBeam.alpha = 1;
+		}
+
+		const toggle = document.querySelector<HTMLElement>('.stats-panel-toggle');
+		if (toggle) toggle.style.opacity = '1';
+
+		opts.onTitleDone();
+		return;
+	}
+
 	// Responsive animation timing
 	const titleDuration = isMobile ? 1.5 : 2.5;
 	const zoomDuration = isMobile ? 2.5 : 4.5;
diff --git a/src/lib/pixi/background.ts b/src/lib/pixi/background.ts
index bbf2704..bdf8144 100644
--- a/src/lib/pixi/background.ts
+++ b/src/lib/pixi/background.ts
@@ -4,7 +4,7 @@
 import { Application, Graphics, Container } from 'pixi.js';
 import { gsap } from 'gsap';
 import { nebulaPalette } from '$lib/theme';
-import { PARTICLE_COUNTS, byDevice } from '$lib/config';
+import { PARTICLE_COUNTS, byDevice, prefersReducedMotion } from '$lib/config';
 import type { BackgroundLayers } from './types';
 import type { Lifecycle } from './lifecycle';
 
@@ -24,6 +24,18 @@ export function createBackground(
 
 	// Everything below allocates `repeat: -1` ambient tweens; building it inside
 	// the lifecycle's GSAP context makes all of them killable on teardown.
+	const reduceMotion = prefersReducedMotion();
+
+	/**
+	 * Every animation in this file is an infinite ambient loop (twinkle, drift,
+	 * nebula breathing). Routing them through one helper means reduced motion
+	 * never creates them, rather than creating and immediately killing them.
+	 */
+	function ambient(target: object, vars: gsap.TweenVars) {
+		if (reduceMotion) return;
+		ambient(target, vars);
+	}
+
 	life.animate(() => {
 		const screenWidth = app.screen.width;
 		const screenHeight = app.screen.height;
@@ -87,7 +99,7 @@ export function createBackground(
 			nebulaContainer.addChild(nebulaCloud);
 
 			// Animate nebula pulsing
-			gsap.to(nebulaCloud, {
+			ambient(nebulaCloud, {
 				alpha: 0.6,
 				duration: 3 + Math.random() * 2,
 				ease: 'sine.inOut',
@@ -96,7 +108,7 @@ export function createBackground(
 				delay: Math.random() * 2
 			});
 
-			gsap.to(nebulaCloud.scale, {
+			ambient(nebulaCloud.scale, {
 				x: 1.1,
 				y: 1.1,
 				duration: 4 + Math.random() * 2,
@@ -121,7 +133,7 @@ export function createBackground(
 			star.y = Math.random() * screenHeight;
 			starContainer.addChild(star);
 
-			gsap.to(star, {
+			ambient(star, {
 				alpha: alpha * 0.3,
 				duration: 1 + Math.random() * 2,
 				ease: 'sine.inOut',
@@ -148,7 +160,7 @@ export function createBackground(
 			star.y = Math.random() * screenHeight;
 			starContainer.addChild(star);
 
-			gsap.to(star, {
+			ambient(star, {
 				alpha: alpha * 0.4,
 				duration: 0.5 + Math.random() * 1.5,
 				ease: 'sine.inOut',
@@ -173,7 +185,7 @@ export function createBackground(
 			star.y = Math.random() * screenHeight;
 			starContainer.addChild(star);
 
-			gsap.to(star.scale, {
+			ambient(star.scale, {
 				x: 1.3,
 				y: 1.3,
 				duration: 2 + Math.random() * 2,
@@ -208,7 +220,7 @@ export function createBackground(
 				vy: (Math.random() - 0.5) * 0.2
 			});
 
-			gsap.to(dust, {
+			ambient(dust, {
 				alpha: 0.3,
 				duration: 3 + Math.random() * 2,
 				ease: 'sine.inOut',
@@ -233,8 +245,12 @@ export function createBackground(
 				else if (g.y > screenHeight + 20) g.y = -20;
 			}
 		}
-		app.ticker.add(driftDust);
-		life.add(() => app.ticker.remove(driftDust));
+		// Drifting dust is continuous ambient motion — skip it entirely rather
+		// than run it slower.
+		if (!reduceMotion) {
+			app.ticker.add(driftDust);
+			life.add(() => app.ticker.remove(driftDust));
+		}
 
 		// ========== VIGNETTE OVERLAY ==========
 		vignette = new Graphics();
diff --git a/src/lib/pixi/interaction.ts b/src/lib/pixi/interaction.ts
index 594c42d..d10345c 100644
--- a/src/lib/pixi/interaction.ts
+++ b/src/lib/pixi/interaction.ts
@@ -4,7 +4,7 @@
 // handlers read/write it by reference. attach* functions return a cleanup that
 // removes the window-level listeners they added.
 import { gsap } from 'gsap';
-import { ZOOM, PARALLAX, PAN_SPEED } from '$lib/config';
+import { ZOOM, PARALLAX, PAN_SPEED, prefersReducedMotion } from '$lib/config';
 import type { SkillTreeController } from './controller';
 import type { Lifecycle } from './lifecycle';
 
@@ -198,6 +198,9 @@ export function attachPanZoom(
 		app.canvas,
 		'wheel',
 		(e: WheelEvent) => {
+			// Ctrl+wheel is the browser's page-zoom gesture (and trackpad pinch);
+			// swallowing it broke zooming for anyone who relies on it.
+			if (e.ctrlKey || e.metaKey) return;
 			e.preventDefault();
 			const oldScale = treeContainer.scale.x;
 			const zoomFactor = e.deltaY > 0 ? ZOOM.wheelOut : ZOOM.wheelIn;
@@ -214,6 +217,28 @@ export function attachPanZoom(
 	return { flushTooltip };
 }
 
+/**
+ * Centre the view on a node in tree-space. Used by the accessible tree
+ * navigator so keyboard focus and the canvas stay in sync.
+ */
+export function panToNode(ctrl: SkillTreeController, x: number, y: number, life: Lifecycle) {
+	const { app, treeContainer } = ctrl;
+	const scale = treeContainer.scale.x;
+	const targetX = app.screen.width / 2 - x * scale;
+	const targetY = app.screen.height / 2 - y * scale;
+
+	life.animate(() => {
+		gsap.to(treeContainer, {
+			x: targetX,
+			y: targetY,
+			duration: prefersReducedMotion() ? 0 : 0.4,
+			ease: 'power2.out',
+			overwrite: 'auto',
+			onUpdate: () => updateParallax(ctrl)
+		});
+	});
+}
+
 interface KeyboardOpts {
 	onToggleStats: () => void;
 	onCloseModal: () => void;
@@ -221,6 +246,11 @@ interface KeyboardOpts {
 	isStatsVisible: () => boolean;
 }
 
+/** Narrow an event target to an Element, or null. */
+function target0(e: Event): Element | null {
+	return e.target instanceof Element ? e.target : null;
+}
+
 /** Wire keyboard navigation (pan/zoom/reset/stats/escape). Owned by `life`. */
 export function attachKeyboard(ctrl: SkillTreeController, opts: KeyboardOpts, life: Lifecycle) {
 	const { app, treeContainer } = ctrl;
@@ -228,6 +258,39 @@ export function attachKeyboard(ctrl: SkillTreeController, opts: KeyboardOpts, li
 	const maxZoom = ZOOM.max;
 
 	function handleKeydown(e: KeyboardEvent) {
+		// Don't hijack keys the browser or another widget owns.
+		//
+		// - Modifier combos belong to the browser (Ctrl+Plus/Minus zoom, etc).
+		// - Typing in a field must never pan the canvas.
+		// - Arrow keys inside a scrollable overlay (the 380px stats panel, the
+		//   modal body) must scroll it, not pan the tree behind it. Previously
+		//   every arrow press called preventDefault() unconditionally, so those
+		//   regions could not be scrolled by keyboard at all.
+		if (e.ctrlKey || e.metaKey || e.altKey) return;
+
+		// `instanceof Element`, not a truthiness check: a keydown dispatched on
+		// `window` has `window` as its target, which has no tagName/closest — and
+		// calling closest() on it throws, killing the whole handler (Escape
+		// included).
+		const target = e.target instanceof Element ? target0(e) : null;
+		if (target) {
+			const tag = target.tagName;
+			if (
+				tag === 'INPUT' ||
+				tag === 'TEXTAREA' ||
+				tag === 'SELECT' ||
+				(target as HTMLElement).isContentEditable ||
+				target.closest('#stats-panel, [role="dialog"]')
+			) {
+				// Escape still needs to work from inside those regions.
+				if (e.key === 'Escape') {
+					if (opts.isModalVisible()) opts.onCloseModal();
+					else if (opts.isStatsVisible()) opts.onToggleStats();
+				}
+				return;
+			}
+		}
+
 		// Toggle stats panel with 'C' key
 		if (e.key === 'c' || e.key === 'C') {
 			if (!opts.isModalVisible()) {
diff --git a/src/lib/utils/hierarchy.test.ts b/src/lib/utils/hierarchy.test.ts
new file mode 100644
index 0000000..ec7412f
--- /dev/null
+++ b/src/lib/utils/hierarchy.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { buildHierarchy, flattenVisible } from './tree';
+import { treeNodes, type TreeNode } from '$lib/data';
+
+const node = (id: string, parentId: string | null): TreeNode =>
+	({
+		id,
+		label: id,
+		description: '',
+		x: 0,
+		y: 0,
+		parentId,
+		category: 'skills',
+		size: 'small'
+	}) as TreeNode;
+
+describe('buildHierarchy', () => {
+	it('nests children under their parent', () => {
+		const roots = buildHierarchy([node('a', null), node('b', 'a'), node('c', 'b')]);
+		expect(roots).toHaveLength(1);
+		expect(roots[0].node.id).toBe('a');
+		expect(roots[0].children[0].node.id).toBe('b');
+		expect(roots[0].children[0].children[0].node.id).toBe('c');
+	});
+
+	it('treats a node with an unknown parent as a root rather than dropping it', () => {
+		const roots = buildHierarchy([node('a', null), node('orphan', 'missing')]);
+		expect(roots.map((r) => r.node.id).sort()).toEqual(['a', 'orphan']);
+	});
+
+	it('covers every real node exactly once', () => {
+		const seen = new Set<string>();
+		const walk = (branches: ReturnType<typeof buildHierarchy>) => {
+			for (const b of branches) {
+				expect(seen.has(b.node.id)).toBe(false);
+				seen.add(b.node.id);
+				walk(b.children);
+			}
+		};
+		walk(buildHierarchy());
+		expect(seen.size).toBe(treeNodes.length);
+	});
+
+	it('every parentId in the real data resolves to a real node', () => {
+		const ids = new Set(treeNodes.map((n) => n.id));
+		const dangling = treeNodes.filter((n) => n.parentId !== null && !ids.has(n.parentId));
+		expect(dangling.map((n) => n.id)).toEqual([]);
+	});
+});
+
+describe('flattenVisible', () => {
+	it('only descends into expanded branches, and reports depth', () => {
+		const roots = buildHierarchy([node('a', null), node('b', 'a'), node('c', 'b')]);
+		expect(flattenVisible(roots, () => false).map((r) => r.branch.node.id)).toEqual(['a']);
+		expect(flattenVisible(roots, (id) => id === 'a').map((r) => r.branch.node.id)).toEqual([
+			'a',
+			'b'
+		]);
+		const all = flattenVisible(roots, () => true);
+		expect(all.map((r) => r.branch.node.id)).toEqual(['a', 'b', 'c']);
+		expect(all.map((r) => r.level)).toEqual([1, 2, 3]);
+	});
+});
diff --git a/src/lib/utils/tree.ts b/src/lib/utils/tree.ts
index 3f91745..e7f5a2f 100644
--- a/src/lib/utils/tree.ts
+++ b/src/lib/utils/tree.ts
@@ -26,10 +26,59 @@ export function getDistanceFromOrigin(node: TreeNode): number {
  * years of experience (0.3–1.0); other categories use fixed tiers.
  */
 export function getBeamIntensity(node: TreeNode): number {
-	if (node.category === 'skills' && node.yearsOfExperience) {
+	if (node.category === 'skills' && node.yearsOfExperience !== undefined) {
 		return Math.min(0.3 + (node.yearsOfExperience / 10) * 0.7, 1.0);
 	}
 	if (node.category === 'experience') return 0.7;
 	if (node.category === 'origin') return 1.0;
 	return 0.5; // projects and education
 }
+
+/** A node plus its children, for the accessible `role="tree"` navigator. */
+export interface TreeBranch {
+	node: TreeNode;
+	children: TreeBranch[];
+}
+
+/**
+ * Build the parent→child hierarchy implied by `parentId`.
+ *
+ * The canvas draws from the flat array, but an accessible tree widget needs
+ * real nesting to expose level/expanded state. Cycle-safe: any node whose
+ * parent chain doesn't terminate at a root is dropped rather than looping.
+ */
+export function buildHierarchy(nodes: TreeNode[] = treeNodes): TreeBranch[] {
+	const branches = new Map<string, TreeBranch>();
+	for (const node of nodes) branches.set(node.id, { node, children: [] });
+
+	const roots: TreeBranch[] = [];
+	for (const branch of branches.values()) {
+		const parentId = branch.node.parentId;
+		if (parentId === null) {
+			roots.push(branch);
+			continue;
+		}
+		const parent = branches.get(parentId);
+		// Unknown parent → treat as a root rather than silently dropping content.
+		if (!parent) roots.push(branch);
+		else parent.children.push(branch);
+	}
+
+	return roots;
+}
+
+/** Flatten a hierarchy into the currently-visible rows of a tree widget. */
+export function flattenVisible(
+	branches: TreeBranch[],
+	isExpanded: (id: string) => boolean,
+	level = 1
+): Array<{ branch: TreeBranch; level: number }> {
+	const rows: Array<{ branch: TreeBranch; level: number }> = [];
+	for (const branch of branches) {
+		rows.push({ branch, level });
+		if (branch.children.length && isExpanded(branch.node.id)) {
+			rows.push(...flattenVisible(branch.children, isExpanded, level + 1));
+		}
+	}
+	return rows;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 55bc749..120332f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,12 @@
 	let renderFailed = $state(false);
 </script>
 
+<!--
+	First focusable element on the page: jumps straight to the keyboard tree,
+	which otherwise sits behind ~20 links in the text version.
+-->
+<a class="skip-link" href="#tree-nav-label">Skip to skill tree navigator</a>
+
 <!-- Crawlable / screen-reader text version (visually hidden, prerendered). -->
 <SeoContent revealed={renderFailed} />
 
@@ -26,4 +32,21 @@
 	main.hidden {
 		display: none;
 	}
+
+	.skip-link {
+		position: absolute;
+		top: -100%;
+		left: 0.5rem;
+		z-index: 2000;
+		padding: 0.6rem 1rem;
+		border: 1px solid var(--color-gold);
+		border-radius: 0 0 8px 8px;
+		background: var(--panel-from);
+		color: var(--color-gold);
+		text-decoration: none;
+	}
+
+	.skip-link:focus-visible {
+		top: 0;
+	}
 </style>