diff --git a/docs/src/components/CustomHeader.astro b/docs/src/components/CustomHeader.astro
index a3402836c9..a349e514f1 100644
--- a/docs/src/components/CustomHeader.astro
+++ b/docs/src/components/CustomHeader.astro
@@ -6,7 +6,7 @@ const base = import.meta.env.BASE_URL;
 // Filter out RSS link from social links
 ---
 
-<div class="custom-header-links">
+<nav class="custom-header-links" aria-label="Primary navigation">
 	<a href={`${base}introduction/overview/`} class="header-link">Docs</a>
 	<a href={`${base}setup/quick-start/`} class="header-link">Quick Start</a>
 	<a href={`${base}examples/comment-triggered/chatops/`} class="header-link">Examples</a>
@@ -14,7 +14,7 @@ const base = import.meta.env.BASE_URL;
 	<a href={`${base}blog/`} class="header-link">Blog</a>
 	<a href={`${base}reference/faq/`} class="header-link">FAQ</a>
 	<a href={`${base}blog/2026-01-12-welcome-to-pelis-agent-factory/`} class="header-link">Peli's Agent Factory</a>
-</div>
+</nav>
 <Default {...Astro.props} />
 
 <style>
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 860afdac65..59c7e01de4 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -79,6 +79,28 @@
   animation: light-glow-move 20s ease-in-out infinite;
 }
 
+/* Skip to Content Link - Enhanced Accessibility */
+/* Override Starlight's default skip link styles for better visibility */
+a[href*="#"][href$="_top"]:focus,
+a[href*="#overview"]:focus:first-child {
+  clip: auto !important;
+  clip-path: none !important;
+  position: fixed !important;
+  top: 1rem !important;
+  left: 1rem !important;
+  z-index: 9999 !important;
+  padding: 1rem 1.5rem !important;
+  background-color: var(--sl-color-accent) !important;
+  color: var(--sl-color-text-invert) !important;
+  text-decoration: none !important;
+  font-weight: 600 !important;
+  font-size: 1rem !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+  outline: 3px solid var(--sl-color-accent-high) !important;
+  outline-offset: 2px !important;
+}
+
 /* Campaign specs Mermaid diagram colors
    We style Mermaid nodes by their class (tracked, notTracked, workflow, external)
    so we can use lighter colors in light mode and darker colors in dark mode. */