skip link

card-one/index.html

@@ -31,7 +31,7 @@
       <img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
       <img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
     </header>
-    <main>
+    <main id="main">
       <h1>The Travels of <span class="card">Card One</span></h1>
 
       <p><span class="card">Card one</span> has 16 total recipients. Its journey began in late December, 2025.</p>

card-two/index.html

@@ -31,7 +31,7 @@
       <img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
       <img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
     </header>
-    <main>
+    <main id="main">
       <h1>The Travels of <span class="card">Card Two</span></h1>
 
       <p><span class="card">Card two</span> has 16 total recipients.</p>

index.html

@@ -31,7 +31,7 @@
       <img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
     </header>
 
-    <main>
+    <main id="main">
       <h1>Siblinghood of the Traveling Greeting Card</h1>
 
       <p id="author">a community-building project by <a target="_blank" href="https://leecat.art">lee</a>.</p>

scripts/nav.js

@@ -22,6 +22,13 @@ const constructMenuLink = function(title, href) {
   return a;
 }
 
+const constructSkipLink = function() {
+  const a = constructMenuLink("skip", "#main");
+  a.id = "skip";
+
+  return a;
+}
+
 const constructDropdown = function() {
   const div = document.createElement("div");
   div.id = "dropdown";
@@ -31,6 +38,7 @@ const constructDropdown = function() {
   button.id="drop-button";
   button.ariaLabel = "card submenu";
   button.ariaExpanded = "false";
+  button.type = "button";
   button.setAttribute("aria-controls", "drop-content");
   div.append(button);
 
@@ -50,6 +58,7 @@ const constructDropdown = function() {
 
 const constructNav = function() {
   const nav = document.getElementById("top-nav");
+  nav.append(constructSkipLink());
   nav.append(constructMenuLink("home", "/"));
   nav.append(constructDropdown());
 }

styles/main.css

@@ -26,6 +26,7 @@ body {
 main {
   width: 65%;
   margin: 0 auto 2rem;
+  scroll-margin-top: 1.5rem;
 }
 
 @media (max-width: 650px) {

styles/nav.css

@@ -1,5 +1,6 @@
 nav {
   display: flex;
+  position: relative;
   gap: 1rem;
   justify-content: center;
   margin: 1rem auto;
@@ -8,16 +9,18 @@ nav {
 nav a,
 nav button {
   font-size: 1.4rem;
-  border: 1px solid;
+  border: .1rem solid;
   border-radius: .15rem;
   padding: .15rem .3rem;
   color: var(--color-accent);
   text-decoration: none;
   line-height: 2rem;
+  outline-offset: .1rem;
 }
 
 @media (max-width: 650px) {
-  nav a {
+  nav a,
+  nav button {
     font-size: 1.1rem;
   }
 }
@@ -33,10 +36,26 @@ nav button {
 
 nav a:focus-visible,
 nav button:focus-visible {
-  outline: none;
+  outline: .1rem solid var(--color-accent);
-  color: var(--color-bg);
+}
-  background-color: var(--color-accent);
+
-  border-color: var(--color-accent);
+#skip {
+	left: -999px;
+  position: absolute;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	z-index: -99;
+  background-color: var(--color-bg);
+}
+
+#skip:focus-visible {
+	left: 1rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
 }
 
 #current-page {
@@ -50,7 +69,7 @@ nav ul {
   position: absolute;
   z-index: 1;
   margin: 0 0 0 1rem;
-  min-width: 8rem;
+  min-width: 10rem;
 }
 
 #dropdown {
@@ -64,7 +83,7 @@ nav ul.show {
 }
 
 nav ul li {
-  margin: .25rem;
+  margin: .5rem;
 }
 
 nav ul a {