diff --git a/layouts/index.html b/layouts/index.html
index 1deb834..1f80d60 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -75,7 +75,28 @@
             height: 100vh;
             height: 100dvh;
         }
-        
+
+        .skip-link {
+            position: absolute;
+            top: -100px;
+            left: 8px;
+            z-index: 9999;
+            padding: 8px 14px;
+            background: var(--accent);
+            color: var(--bg);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            font-weight: 600;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: top 0.15s ease;
+        }
+        .skip-link:focus-visible {
+            top: 8px;
+            outline: 2px solid var(--text);
+            outline-offset: 2px;
+        }
+
         .map-container {
             flex: 1;
             min-height: 0;
@@ -757,6 +778,11 @@
             transition: border-color 0.15s, background 0.15s;
         }
         .info-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+        .info-link:focus-visible {
+            outline: 2px solid var(--accent);
+            outline-offset: 2px;
+            border-color: var(--accent);
+        }
         .info-link-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-mute); }
         .info-link:hover .info-link-icon { color: var(--accent); }
         .info-link span { flex: 1; }
@@ -801,6 +827,7 @@
     </style>
 </head>
 <body class="antialiased">
+<a href="#map" class="skip-link">Skip to map</a>
 <div class="app-container overflow-hidden">
     <header class="hud">
         <div class="brand">
@@ -881,7 +908,7 @@ <h1 class="title"><em>Veeam</em> Data Cloud Service Map</h1>
     </header>
 
     <div class="map-container bg-[var(--bg)] transition-colors duration-300 relative">
-        <div id="map"></div>
+        <div id="map" tabindex="-1"></div>
         
         <div id="mapLoading" class="absolute inset-0 flex items-center justify-center z-[1000]" style="background: rgba(10, 13, 18, 0.92); backdrop-filter: blur(4px);">
             <div class="flex flex-col items-center gap-3">
@@ -904,7 +931,7 @@ <h1 class="title"><em>Veeam</em> Data Cloud Service Map</h1>
                     <h3 class="text-lg font-semibold mb-1" style="color: var(--text)">Failed to Load Map</h3>
                     <p class="text-sm max-w-xs" style="color: var(--text-mute)">The map failed to load. Please check your internet connection and try refreshing the page.</p>
                 </div>
-                <button onclick="location.reload()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors">
+                <button onclick="location.reload()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
                     Refresh Page
                 </button>
             </div>
diff --git a/tests/ui.spec.ts b/tests/ui.spec.ts
index 92af2c3..06c0c88 100644
--- a/tests/ui.spec.ts
+++ b/tests/ui.spec.ts
@@ -788,13 +788,18 @@ test.describe('Veeam Data Cloud Services Map - UI Tests', () => {
       test.skip(testInfo.project.name === 'webkit' && process.platform === 'linux', 'Dynamic aria-hidden accessibility tree updates are unreliable in webkit on Linux');
       test.skip(testInfo.project.name === 'Mobile Safari', 'Hardware keyboard navigation does not apply to mobile');
       await page.keyboard.press('Tab');
-      
+
+      const skipLink = page.getByRole('link', { name: 'Skip to map' });
+      await expect(skipLink).toBeFocused();
+
+      await page.keyboard.press('Tab');
+
       const searchInput = page.getByRole('combobox', { name: 'Search regions' });
       await expect(searchInput).toBeFocused();
-      
+
       await page.keyboard.press('Tab');
       await page.keyboard.press('Tab');
-      
+
       const serviceButton = page.getByRole('button', { name: /all services/i });
       await expect(serviceButton).toBeFocused();
 
