Refactor skip link for improved accessibility and add main content ID for better navigation

rdhar · rdhar · commit 83d952a551ab · 2026-04-12T17:21:50.000+01:00
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -3,7 +3,7 @@ import { SITE_NAME } from "../consts";
 import HeaderLink from "./HeaderLink.astro";
 ---
 
-<a href="#main-content" class="sr-only focus:not-sr-only">Skip to content</a>
+<a href="#main-content" class="skip-link">Skip to content</a>
 <header>
   <nav aria-label="Primary">
     <h2><a href="/">{SITE_NAME}</a></h2>
@@ -68,4 +68,24 @@ import HeaderLink from "./HeaderLink.astro";
       display: none;
     }
   }
+  .skip-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    padding: 0.5em 1em;
+    background: white;
+    color: var(--black);
+    text-decoration: none;
+    font-size: 0.875em;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .skip-link:focus-visible {
+    clip-path: none;
+    overflow: visible;
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
 </style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -86,7 +86,7 @@ const posts = (await getCollection("blog")).sort((a, b) => b.data.pubDate.valueO
   </head>
   <body>
     <Header />
-    <main>
+    <main id="main-content">
       <section>
         <ul>
           {

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ const posts = (await getCollection("blog")).sort((a, b) => b.data.pubDate.valueO`
`86`	`86`	`</head>`
`87`	`87`	`<body>`
`88`	`88`	`<Header />`
`89`		`- <main>`
	`89`	`+ <main id="main-content">`
`90`	`90`	`<section>`
`91`	`91`	`<ul>`
`92`	`92`	`{`