Implement "skip to main" button

diff --git a/index.html b/index.html
index 4b7216f23fa3ab7d315b65eb2778c09c1af66d1e..9fb43c051c1c7a7573b47f4f51b125904d90894e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -37,6 +37,8 @@
 </head>
 
 <body>
+  <a href="#" id="skip-to-main">Skip to main content</a>
+
   <header>
     <a href="/">
       <svg role="img" aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="#005ce6">

diff --git a/script.js b/script.js
index 862f4c85239fbb32327828fc976015f9b58e2bb1..79450b6006269cdc17bfbfb4552222037349cad2 100644 (file)
--- a/script.js
+++ b/script.js
@@ -290,6 +290,12 @@ document.addEventListener('keydown', e => {
   }
 });
 
+/* Implement "skip to main" button */
+document.querySelector('#skip-to-main').addEventListener('click', e => {
+  e.preventDefault();
+  document.querySelector('main').querySelector('a')?.focus(); // Assumes first focusable element is always <a>
+});
+
 /* Implement client-side routing. Handles view logic for /home and /:post routes. */
 async function showPage(path) {
   // Determine which placeholders to show
@@ -390,8 +396,8 @@ function route(href) {
 /* Set event handlers for client-side routing. */
 globalThis.addEventListener('popstate', _ => showPage(location.pathname));
 document.addEventListener('click', e => {
-  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
-    return; // Use default behavior if any keyboard modifier is applied to the click
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.id === 'skip-to-main') {
+    return; // Use default behavior if any keyboard modifier is applied to the click or it's a special link
   }
 
   const anchor = e.target.closest('a');

diff --git a/style.css b/style.css
index 6b7ccdf1ad75487e92aa46306796211eb292a3e8..7fd9960fe4d21932e439df7d369b99181361484b 100644 (file)
--- a/style.css
+++ b/style.css
@@ -77,6 +77,19 @@ form {
   position: relative;
 }
 
+#skip-to-main {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  left: -1000px;
+  padding: 8px;
+  background: white;
+
+  &:focus {
+    left: 0;
+  }
+}
+
 .visually-hidden {
   position: absolute;
   width: 1px;