diff --git a/.storybook/main.ts b/.storybook/main.ts
index 07c30a30..274a8a83 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y'
   ],
   framework: {
     name: '@storybook/sveltekit',
diff --git a/package.json b/package.json
index 4050fb6b..1f3c59e3 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@chromatic-com/storybook": "^3.2.6",
     "@reuters-graphics/yaks-eslint": "^0.1.1",
     "@reuters-graphics/yaks-prettier": "^0.1.1",
+    "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-svelte-csf": "5.0.0-next.28",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d0e22ef..53a50a4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
       '@reuters-graphics/yaks-prettier':
         specifier: ^0.1.1
         version: 0.1.1(prettier@3.5.3)(svelte@5.28.1)(typescript@5.8.3)
+      '@storybook/addon-a11y':
+        specifier: ^8.6.12
+        version: 8.6.12(storybook@8.6.12(prettier@3.5.3))
       '@storybook/addon-essentials':
         specifier: ^8.6.12
         version: 8.6.12(@types/react@18.3.20)(storybook@8.6.12(prettier@3.5.3))
@@ -834,6 +837,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@storybook/addon-a11y@8.6.12':
+    resolution: {integrity: sha512-H28zHiL8uuv29XsVNf9VjNWsCeht/l66GPYHT7aom1jh+f3fS9+sutrCGEBC/T7cnRpy8ZyuHCtihUqS+RI4pg==}
+    peerDependencies:
+      storybook: ^8.6.12
+
   '@storybook/addon-actions@8.6.12':
     resolution: {integrity: sha512-B5kfiRvi35oJ0NIo53CGH66H471A3XTzrfaa6SxXEJsgxxSeKScG5YeXcCvLiZfvANRQ7QDsmzPUgg0o3hdMXw==}
     peerDependencies:
@@ -1342,6 +1350,10 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  axe-core@4.10.3:
+    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
+    engines: {node: '>=4'}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -4698,6 +4710,14 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.40.0':
     optional: true
 
+  '@storybook/addon-a11y@8.6.12(storybook@8.6.12(prettier@3.5.3))':
+    dependencies:
+      '@storybook/addon-highlight': 8.6.12(storybook@8.6.12(prettier@3.5.3))
+      '@storybook/global': 5.0.0
+      '@storybook/test': 8.6.12(storybook@8.6.12(prettier@3.5.3))
+      axe-core: 4.10.3
+      storybook: 8.6.12(prettier@3.5.3)
+
   '@storybook/addon-actions@8.6.12(storybook@8.6.12(prettier@3.5.3))':
     dependencies:
       '@storybook/global': 5.0.0
@@ -5377,6 +5397,8 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
+  axe-core@4.10.3: {}
+
   axobject-query@4.1.0: {}
 
   bail@2.0.2: {}
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index 518debd8..3dc2f490 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within, waitFor } from '@storybook/test';
   import SiteHeader from './SiteHeader.svelte';
   import Theme from '../Theme/Theme.svelte';
 
@@ -12,7 +13,18 @@
   });
 </script>
 
-<Story name="Demo">
+<Story
+  name="Demo"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('More'));
+    await waitFor(() =>
+      expect(canvas.getByText('Graphics')).toBeInTheDocument()
+    );
+    await userEvent.click(canvas.getByText('World'));
+    await waitFor(() => expect(canvas.getByText('Europe')).toBeInTheDocument());
+  }}
+>
   <div>
     <SiteHeader />
   </div>