diff --git a/.changeset/nine-crabs-help.md b/.changeset/nine-crabs-help.md
new file mode 100644
index 00000000..747174ac
--- /dev/null
+++ b/.changeset/nine-crabs-help.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Change a11y description inline styles to classes
diff --git a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
index a26778c1..a9716478 100644
--- a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+++ b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
@@ -6,14 +6,14 @@
   let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
 </script>
 
-<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
+<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   Press enter or space to select a node.
   {#if !store.disableKeyboardA11y}
     You can then use the arrow keys to move the node around.
   {/if}
   Press delete to remove it and escape to cancel.
 </div>
-<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
+<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   Press enter or space to select an edge. You can then press delete to remove it or escape to
   cancel.
 </div>
@@ -23,8 +23,26 @@
     id={`${ARIA_LIVE_MESSAGE}-${store.flowId}`}
     aria-live="assertive"
     aria-atomic="true"
-    style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);"
+    class="a11y-live-msg"
   >
     {store.ariaLiveMessage}
   </div>
 {/if}
+
+<style>
+  .a11y-hidden {
+    display: none;
+  }
+
+  .a11y-live-msg {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0px, 0px, 0px, 0px);
+    clip-path: inset(100%);
+  }
+</style>