0m364 · 0m364 · Apr 30, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -25,3 +25,7 @@
 ## 2026-04-18 - Accessible Dynamically Updating Pseudo-Terminals
 **Learning:** When building custom interactive terminal or log interfaces, standard input focus doesn't trigger screen readers to announce new lines added to the terminal output container. As a result, users relying on assistive technologies type commands but receive no audio feedback when the terminal responds.
 **Action:** Apply `aria-live="polite"` and `aria-atomic="false"` to the container element where dynamic output is appended. This ensures screen readers announce only the new lines as they appear without interrupting the user's typing or reading the entire history.
+
+## 2026-04-30 - Skip to Main Content Accessibility
+**Learning:** Screen reader and keyboard users often have to tab through repetitive site navigation (like header links) on every single page load before reaching the primary content. This causes fatigue and frustration.
+**Action:** Always include a visually hidden 'Skip to main content' link immediately after the opening `<body>` tag that becomes visible on `:focus`. Ensure the main content container has a matching `id` attribute and explicitly set `tabindex="-1"` (e.g., `<main id="main-content" tabindex="-1">`) so it can consistently receive programmatic focus across browsers.
diff --git a/concepts.html b/concepts.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <header>
         <div class="container">
             <h1>CHARLES WILLIAMS</h1>
@@ -24,7 +25,7 @@ <h1>CHARLES WILLIAMS</h1>
         </div>
     </header>
 
-    <main class="container">
+    <main id="main-content" class="container" tabindex="-1">
         <section class="card">
             <h2>Memory Shards: A Nodal Architecture for Resilient Associative Intelligence</h2>
             <p><strong>Author:</strong> C. Williams</p>

diff --git a/contact.html b/contact.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <header>
         <div class="container">
             <h1>CHARLES WILLIAMS</h1>
@@ -24,7 +25,7 @@ <h1>CHARLES WILLIAMS</h1>
         </div>
     </header>
 
-    <main class="container">
+    <main id="main-content" class="container" tabindex="-1">
         <section class="card full-width">
             <h2>Get in Touch</h2>
             <p>For specialized, Referral-Only Consultation and R&amp;D, please reach out via email or explore our open-source research and models.</p>

diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <header>
         <div class="container">
             <h1>CHARLES WILLIAMS Consulting</h1>
@@ -24,7 +25,7 @@ <h1>CHARLES WILLIAMS Consulting</h1>
         </div>
     </header>
 
-    <main class="container">
+    <main id="main-content" class="container" tabindex="-1">
         <section id="digital-privacy" class="card">
             <h2>Digital Privacy Isn't a Luxury. It’s Your Right.</h2>
             <p>In a world that never stops watching, CHARLES WILLIAMS provides the tools, knowledge, and strategies to help everyday people reclaim their digital footprint.</p>

diff --git a/products.html b/products.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <header>
         <div class="container">
             <h1>CHARLES WILLIAMS</h1>
@@ -25,7 +26,7 @@ <h1>CHARLES WILLIAMS</h1>
         </div>
     </header>
 
-    <main class="container">
+    <main id="main-content" class="container" tabindex="-1">
         <section id="agentic-loop" class="card">
             <h2>Localized Agentic Loop AI</h2>
             <p>At the core of CHARLES WILLIAMS is our proprietary, model-agnostic agentic loop AI framework. Engineered specifically for robust deployment in zero-trust, disconnected environments where standard cloud-based LLMs fail. By utilizing localized <strong>Edge Processing</strong> on advanced SDR (Software Defined Radio) platforms, this framework enables continuous <strong>Adaptive RF Machine Learning (RFML)</strong> and real-time signal classification.</p>

diff --git a/styles.css b/styles.css
@@ -324,3 +324,21 @@ footer a:hover {
 .websdr-home-link {
     display: inline-block;
 }
+
+.skip-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 10px 15px;
+    background-color: var(--accent-color);
+    color: var(--white);
+    font-weight: bold;
+    text-decoration: none;
+    z-index: 1000;
+    transform: translateY(-100%);
+    transition: transform 0.3s ease-in-out;
+}
+
+.skip-link:focus {
+    transform: translateY(0);
+}
diff --git a/test_ui.py b/test_ui.py
@@ -42,5 +42,39 @@ async def run():
         await context.close()
         await browser.close()
 
+async def run_focus_test():
+    async with async_playwright() as p:
+        browser = await p.chromium.launch(
+            headless=True,
+            args=[
+                '--font-render-hinting=none',
+                '--disable-features=IsolateOrigins,site-per-process'
+            ]
+        )
+        context = await browser.new_context(
+            record_video_dir="/home/jules/verification/videos"
+        )
+        page = await context.new_page()
+
+        print("Testing keyboard focus...")
+        await page.goto('http://127.0.0.1:8000/index.html', wait_until='domcontentloaded')
+
+        try:
+            await page.wait_for_timeout(2000)
+        except Exception as e:
+            print("❌ Failed to wait.", e)
+
+        # Press Tab repeatedly to cycle focus
+        for i in range(10):
+            await page.keyboard.press("Tab")
+            await page.wait_for_timeout(200)
+            await page.screenshot(path=f"/home/jules/verification/screenshots/focus_{i}.png")
+
+        print("✅ Keyboard focus test done.")
+
+        await context.close()
+        await browser.close()
+
 if __name__ == '__main__':
     asyncio.run(run())
+    asyncio.run(run_focus_test())