diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index a69c97b4..682aef42 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -3,8 +3,6 @@
     import "@fontsource/ibm-plex-mono/400-italic.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
-    import { beforeUpdate } from "svelte";
-
     import { page } from "$app/stores";
     import { updated } from "$app/stores";
     import { browser } from "$app/environment";
@@ -35,10 +33,6 @@
             document.querySelector("[data-first-focus]");
         to_focus?.focus();
     });
-
-    beforeUpdate(() => {
-        document.getElementById("svelte-announcer")?.remove();
-    })
 </script>
 
 <svelte:head>
diff --git a/web/svelte.config.js b/web/svelte.config.js
index 3f388721..395288a8 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -10,6 +10,17 @@ const config = {
     // for more information about preprocessors
     extensions: [".svelte", ".md"],
     preprocess: [
+        {
+            name: "strip-announcer",
+            markup: ({ content: code }) => {
+                code = code.replace(
+                    /<div id="svelte-announcer" [\s\S]*?<\/div>/,
+                    '<svelte:component this={null} />'
+                );
+
+                return { code }
+            }
+        },
         sveltePreprocess(),
         mdsvex({
             extensions: ['.md'],