diff --git a/packages/site-kit/src/lib/components/SkipLink.svelte b/packages/site-kit/src/lib/components/SkipLink.svelte
new file mode 100644
index 00000000..2e96f465
--- /dev/null
+++ b/packages/site-kit/src/lib/components/SkipLink.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let href;
+</script>
+
+<a {href}>Skip to main content</a>
+
+<style>
+	a {
+		background: white;
+		color: var(--text);
+		border: 2px solid black;
+		padding: 8px;
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		transform: translateY(-100%);
+		z-index: 101; /* 1 more than the nav z-index */
+	}
+
+	a:focus {
+		transform: translateY(0%);
+	}
+</style>
diff --git a/packages/site-kit/src/lib/index.js b/packages/site-kit/src/lib/index.js
index c0b27a89..43719e7c 100644
--- a/packages/site-kit/src/lib/index.js
+++ b/packages/site-kit/src/lib/index.js
@@ -7,3 +7,4 @@ export { default as PreloadingIndicator } from './components/PreloadingIndicator
 export { default as Nav } from './components/Nav.svelte';
 export { default as NavItem } from './components/NavItem.svelte';
 export { default as Section } from './components/Section.svelte';
+export { default as SkipLink } from './components/SkipLink.svelte';
diff --git a/sites/kit.svelte.dev/src/routes/__layout.svelte b/sites/kit.svelte.dev/src/routes/__layout.svelte
index 867ade72..81e30f01 100644
--- a/sites/kit.svelte.dev/src/routes/__layout.svelte
+++ b/sites/kit.svelte.dev/src/routes/__layout.svelte
@@ -1,7 +1,7 @@
 <script>
 	import '@sveltejs/site-kit/base.css';
 	import { page, navigating } from '$app/stores';
-	import { Icon, Icons, Nav, NavItem, PreloadingIndicator } from '@sveltejs/site-kit';
+	import { Icon, Icons, Nav, NavItem, PreloadingIndicator, SkipLink } from '@sveltejs/site-kit';
 </script>
 
 <Icons />
@@ -10,6 +10,7 @@
 	<PreloadingIndicator />
 {/if}
 
+<SkipLink href="#main" />
 <Nav {page} logo="/images/svelte-kit-horizontal.svg">
 	<svelte:fragment slot="nav-center">
 		<NavItem href="/docs">Docs</NavItem>
@@ -32,7 +33,7 @@
 	</svelte:fragment>
 </Nav>
 
-<main>
+<main id="main">
 	<slot />
 </main>
 
diff --git a/sites/svelte.dev/src/routes/__layout.svelte b/sites/svelte.dev/src/routes/__layout.svelte
index 956bc5f5..d06c3bc6 100644
--- a/sites/svelte.dev/src/routes/__layout.svelte
+++ b/sites/svelte.dev/src/routes/__layout.svelte
@@ -2,7 +2,7 @@
 	import '@sveltejs/site-kit/base.css';
 	import { setContext } from 'svelte';
 	import { page, navigating, session } from '$app/stores';
-	import { Icon, Icons, Nav, NavItem } from '@sveltejs/site-kit';
+	import { Icon, Icons, Nav, NavItem, SkipLink } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '$lib/components/PreloadingIndicator.svelte';
 
 	setContext('app', {
@@ -37,6 +37,7 @@
 {/if}
 
 {#if $page.url.pathname !== '/repl/embed'}
+	<SkipLink href="#main" />
 	<Nav {page} logo="/svelte-logo-horizontal.svg">
 		<svelte:fragment slot="nav-center">
 			<NavItem href="/tutorial">Tutorial</NavItem>
@@ -63,7 +64,7 @@
 	</Nav>
 {/if}
 
-<main>
+<main id="main">
 	<slot />
 </main>