round2 item (1): a11y — skip-to-content link (reveals on focus, jumps to main) + prefers-reduced-motion (disable transitions/transforms/smooth-scroll)

2b5ea411c2a928c264fd505e0f67e994acdecfc9 · 2026-06-29 22:07:21 -0700 · Steve

Files touched

M public/index.html
M public/styles.css

Diff

commit 2b5ea411c2a928c264fd505e0f67e994acdecfc9
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 29 22:07:21 2026 -0700

    round2 item (1): a11y — skip-to-content link (reveals on focus, jumps to main) + prefers-reduced-motion (disable transitions/transforms/smooth-scroll)
---
 public/index.html |  3 ++-
 public/styles.css | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 78bb5d1..3ede55c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,6 +28,7 @@
   <link rel="stylesheet" href="/styles.css" />
 </head>
 <body>
+  <a class="skip" href="#top">Skip to content</a>
   <!-- top bar: logo UL · hamburger UR -->
   <header class="topbar">
     <a class="logo" id="logo" href="#top">ROBERT</a>
@@ -48,7 +49,7 @@
     </nav>
   </div>
 
-  <main id="top">
+  <main id="top" tabindex="-1">
     <!-- HUGE hero -->
     <section class="hero" style="padding:0;border-bottom:5px solid #0a0a0a">
       <div class="hero-img" id="heroImg"></div>
diff --git a/public/styles.css b/public/styles.css
index d309a84..7bbeee3 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -11,6 +11,23 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body { overflow-x: hidden; }   /* brutalist negative-margins safety guard */
+main:focus { outline: none; }
+
+/* skip-to-content: hidden until keyboard focus, then brutalist top-left */
+.skip {
+  position: absolute; left: 12px; top: -60px; z-index: 100;
+  background: var(--accent); color: var(--ink); font-weight: 800; text-transform: uppercase;
+  padding: 12px 18px; border: 5px solid var(--ink); text-decoration: none;
+  transition: top .15s;
+}
+.skip:focus { top: 12px; }
+
+/* respect reduced-motion: kill transitions/transforms/smooth-scroll */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
+  .cta:hover { transform: none; }
+}
 body {
   background: var(--paper);
   color: var(--ink);

← 4b3333d loop ledger: round2 item (7) done + deployed · back to Robet Site · loop ledger: round2 item (1) done + deployed e175b73 →