From 021e8145ba028b5634861eaadb065b7ac71133fb Mon Sep 17 00:00:00 2001
From: Joseph <166889171+0xj0s3ph@users.noreply.github.com>
Date: Mon, 20 Oct 2025 01:40:11 +0900
Subject: [PATCH] Add skip links for improved keyboard navigation accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements skip-to-content link to help keyboard and screen reader users
bypass navigation and jump directly to main content.

Changes:
- Added "Skip to Content" link in header (hidden until focused)
- Added id="main-content" and tabindex="-1" to main element
- Styled skip link to be visible on keyboard focus with brand colors
- Uses modern clip-path technique for accessible hiding

Fixes #72

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 _includes/mixins/main_header.html |  1 +
 _layouts/page.html                |  2 +-
 assets/css/style.css              | 22 ++++++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/_includes/mixins/main_header.html b/_includes/mixins/main_header.html
index 54cf8aa..0dfc485 100644
--- a/_includes/mixins/main_header.html
+++ b/_includes/mixins/main_header.html
@@ -1,5 +1,6 @@
 <header>
   <div id="sticky-header" class="menu-area">
+    <a href="#main-content">Skip to Content</a>
     <div class="container">{% include mixins/navbar.html %}</div>
   </div>
 </header>
diff --git a/_layouts/page.html b/_layouts/page.html
index d62cca7..be0154f 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -3,4 +3,4 @@
 ---
 
 {% include mixins/main_header.html %}
-<main>{{content}}</main>
+<main id="main-content" tabindex="-1">{{content}}</main>
diff --git a/assets/css/style.css b/assets/css/style.css
index 8283647..4292fc7 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -34,6 +34,28 @@ Version: 1.0
 
 /* ---------------- 0. Custom Meg Styling ---------------- */
 
+[href="#main-content"] {
+  background: #03777e;
+  border-radius: 0 0 0.5rem;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  color: #fff;
+  font-size: 1.6rem;
+  font-weight: bold;
+  padding: 1rem 2rem;
+  text-decoration: none;
+}
+
+/* Hide skip link when it's not focused */
+[href="#main-content"]:not(:focus) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 /* Set font for responsiveness
 ------------------------------
 Most browsers set their default font size to 1.6rem, so if we set ours at 62.5% of that it will come out to 10px. From there, it's a lot easier to calculate rem sizing. Plus if someone changes their default browser settings, our site is coded to respond to it automatically.