diff --git a/.changeset/healthy-mirrors-hide.md b/.changeset/healthy-mirrors-hide.md
new file mode 100644
index 000000000000..c67893be67b8
--- /dev/null
+++ b/.changeset/healthy-mirrors-hide.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Use aria-current instead of active class in nav
diff --git a/packages/create-svelte/templates/default/src/routes/Header.svelte b/packages/create-svelte/templates/default/src/routes/Header.svelte
index db29882759c8..368b721e891b 100644
--- a/packages/create-svelte/templates/default/src/routes/Header.svelte
+++ b/packages/create-svelte/templates/default/src/routes/Header.svelte
@@ -16,13 +16,13 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li class:active={$page.url.pathname === '/'}>
+			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
 				<a href="/">Home</a>
 			</li>
-			<li class:active={$page.url.pathname === '/about'}>
+			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 				<a href="/about">About</a>
 			</li>
-			<li class:active={$page.url.pathname.startsWith('/sverdle')}>
+			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
 				<a href="/sverdle">Sverdle</a>
 			</li>
 		</ul>
@@ -97,7 +97,7 @@
 		height: 100%;
 	}
 
-	li.active::before {
+	li[aria-current='page']::before {
 		--size: 6px;
 		content: '';
 		width: 0;