diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html
index 8b26853..d8a5bfa 100644
--- a/src/_includes/layouts/base.html
+++ b/src/_includes/layouts/base.html
@@ -24,7 +24,7 @@
     </head>
     <body class="[ flex-col ]">
         {% include "partials/header.html" %}
-        <main id="main" class="[ flow flex-1 wrapper ]">
+        <main id="main" class="[ flow flex-1 wrapper ]" tabindex="-1">
             {{ content | safe }}
         </main>
         {% include "partials/footer.html" %}
diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html
index a3e126f..50d1d26 100644
--- a/src/_includes/partials/header.html
+++ b/src/_includes/partials/header.html
@@ -1,4 +1,5 @@
 <header class="[ navbar ][ py-1 mb-2 ]">
+    <a href="#main">Skip to content</a>
     <div class="[ wrapper ]">
         <nav class="[ repel ]">
             <div class="[ site-logo ] [ flex items-center gap-0.5 ]">
diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css
index aee0fbb..fd2771c 100644
--- a/src/css/global/global-styles.css
+++ b/src/css/global/global-styles.css
@@ -167,6 +167,23 @@ mark {
   padding-block: var(--spacing-0\.25);
 }
 
+[href="#main"] {
+  background-color: var(--color-background);
+  margin-inline: var(--spacing-1);
+}
+
+[href="#main"]:not(:focus) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
     scroll-behavior: auto;
