diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index e81a46b..b3f7ed9 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -26,6 +26,58 @@
 	body {
 		min-height: 100dvh;
 	}
+
+	/* Sichtbarer Fokus-Ring für Tastatur-Nutzer. Tailwind 4 strippt
+	   die Browser-Defaults; wir setzen einen expliziten Outline.
+	   Nur :focus-visible, damit Maus-Klicks visuell sauber bleiben. */
+	:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	/* Screen-Reader-only Utility. Wird im Study-View genutzt, um die
+	   Prompt-/Answer-Regionen unsichtbar zu betiteln. */
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+
+	/* Skip-Link: versteckt bis Fokus, dann sprung zur Main-Region. */
+	.skip-link {
+		position: absolute;
+		top: 0;
+		left: 0;
+		padding: 0.5rem 0.75rem;
+		background: var(--color-primary);
+		color: var(--color-primary-fg);
+		z-index: 50;
+		transform: translateY(-200%);
+		transition: transform 0.15s;
+	}
+	.skip-link:focus {
+		transform: translateY(0);
+	}
+}
+
+/* Reduce-Motion-Respekt: Animationen + Transitions ausschalten,
+   wenn der User das im OS so eingestellt hat. */
+@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;
+	}
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/apps/web/src/lib/components/Header.svelte b/apps/web/src/lib/components/Header.svelte
index f87b008..59a3045 100644
--- a/apps/web/src/lib/components/Header.svelte
+++ b/apps/web/src/lib/components/Header.svelte
@@ -18,7 +18,7 @@
 			<span>{t('app.name')}</span>
 		</a>
 
-		<nav class="flex items-center gap-6 text-sm" aria-label={t('app.name')}>
+		<nav class="flex items-center gap-6 text-sm" aria-label={t('common.main_nav')}>
 			<a
 				href="/decks"
 				class="hover:text-[var(--color-primary)]"
@@ -45,7 +45,7 @@
 			<div
 				class="flex overflow-hidden rounded border border-[var(--color-border)] text-xs"
 				role="group"
-				aria-label="Sprache / Language"
+				aria-label={t('common.language_switcher')}
 			>
 				<button
 					type="button"
diff --git a/apps/web/src/lib/components/ToastStack.svelte b/apps/web/src/lib/components/ToastStack.svelte
index d1abb28..3916f18 100644
--- a/apps/web/src/lib/components/ToastStack.svelte
+++ b/apps/web/src/lib/components/ToastStack.svelte
@@ -1,21 +1,30 @@
 <script lang="ts">
 	import { toasts } from '$lib/stores/toasts.svelte.ts';
+	import { i18n, t } from '$lib/i18n/index.svelte.ts';
+
+	const closeLabel = $derived(i18n.current === 'en' ? 'Close' : 'Schließen');
 </script>
 
 {#if toasts.items.length > 0}
-	<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+	<div
+		class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
+		role="region"
+		aria-live="polite"
+		aria-label={t('common.notifications')}
+	>
 		{#each toasts.items as t (t.id)}
 			<div
 				class="flex items-start gap-3 rounded-lg px-4 py-3 shadow-lg max-w-sm border bg-[var(--color-card)] border-[var(--color-border)]"
 				class:text-[var(--color-success)]={t.kind === 'success'}
 				class:text-[var(--color-warning)]={t.kind === 'warning'}
 				class:text-[var(--color-danger)]={t.kind === 'error'}
+				role={t.kind === 'error' ? 'alert' : 'status'}
 			>
 				<span class="flex-1 text-sm">{t.message}</span>
 				<button
 					class="text-[var(--color-muted)] hover:text-[var(--color-fg)] text-lg leading-none"
 					onclick={() => toasts.dismiss(t.id)}
-					aria-label="Schließen"
+					aria-label={closeLabel}
 				>
 					×
 				</button>
diff --git a/apps/web/src/lib/i18n/de.ts b/apps/web/src/lib/i18n/de.ts
index e755850..fb2a6e6 100644
--- a/apps/web/src/lib/i18n/de.ts
+++ b/apps/web/src/lib/i18n/de.ts
@@ -212,5 +212,9 @@ export const de: TranslationNode = {
 	},
 	common: {
 		empty: '(leer)',
+		skip_to_content: 'Zum Inhalt springen',
+		main_nav: 'Hauptnavigation',
+		notifications: 'Benachrichtigungen',
+		language_switcher: 'Sprache wechseln',
 	},
 };
diff --git a/apps/web/src/lib/i18n/en.ts b/apps/web/src/lib/i18n/en.ts
index dc4c768..989aea8 100644
--- a/apps/web/src/lib/i18n/en.ts
+++ b/apps/web/src/lib/i18n/en.ts
@@ -209,5 +209,9 @@ export const en: TranslationNode = {
 	},
 	common: {
 		empty: '(empty)',
+		skip_to_content: 'Skip to content',
+		main_nav: 'Main navigation',
+		notifications: 'Notifications',
+		language_switcher: 'Switch language',
 	},
 };
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 1f72c6a..ed3a694 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -2,13 +2,24 @@
 	import '../app.css';
 	import Header from '$lib/components/Header.svelte';
 	import ToastStack from '$lib/components/ToastStack.svelte';
+	import { i18n, t } from '$lib/i18n/index.svelte.ts';
 
 	let { children } = $props();
+
+	// Hält das `lang`-Attribut am <html> aktuell. Initial-SSR rendert
+	// "de"; sobald i18n-Detection im Browser läuft, ziehen wir nach.
+	$effect(() => {
+		if (typeof document !== 'undefined') {
+			document.documentElement.setAttribute('lang', i18n.current);
+		}
+	});
 </script>
 
+<a href="#main" class="skip-link">{t('common.skip_to_content')}</a>
+
 <Header />
 
-<main class="mx-auto max-w-6xl px-4 py-8">
+<main id="main" class="mx-auto max-w-6xl px-4 py-8" tabindex="-1">
 	{@render children?.()}
 </main>
 
diff --git a/apps/web/src/routes/decks/+page.svelte b/apps/web/src/routes/decks/+page.svelte
index 4f02bfd..9160c5b 100644
--- a/apps/web/src/routes/decks/+page.svelte
+++ b/apps/web/src/routes/decks/+page.svelte
@@ -96,7 +96,7 @@
 					</div>
 				</a>
 				<button
-					class="absolute right-2 top-2 hidden rounded p-1 text-[var(--color-muted)] hover:bg-[var(--color-border)] hover:text-[var(--color-danger)] group-hover:block"
+					class="absolute right-2 top-2 rounded p-1 text-[var(--color-muted)] opacity-0 hover:bg-[var(--color-border)] hover:text-[var(--color-danger)] focus-visible:opacity-100 group-hover:opacity-100"
 					onclick={() => onDelete(deck.id, deck.name)}
 					aria-label={t('decks.delete_confirm', { name: deck.name })}
 					title={t('decks.delete_confirm', { name: deck.name })}
diff --git a/apps/web/src/routes/decks/[id]/+page.svelte b/apps/web/src/routes/decks/[id]/+page.svelte
index bb092ee..fa0ba2b 100644
--- a/apps/web/src/routes/decks/[id]/+page.svelte
+++ b/apps/web/src/routes/decks/[id]/+page.svelte
@@ -145,7 +145,7 @@
 						</p>
 					</a>
 					<button
-						class="opacity-0 group-hover:opacity-100 text-sm text-[var(--color-muted)] hover:text-[var(--color-danger)]"
+						class="text-sm text-[var(--color-muted)] opacity-0 hover:text-[var(--color-danger)] focus-visible:opacity-100 group-hover:opacity-100"
 						onclick={() => onDeleteCard(card.id)}
 						aria-label={t('deck_detail.card_delete_aria')}
 					>