feat(a11y): add skip to content link (#84)

heybran · web-flow · commit 2b06d5b81613 · 2024-11-08T10:29:29.000+01:00
diff --git a/_includes/base.njk b/_includes/base.njk
@@ -9,6 +9,8 @@
 {% include 'html-head.njk' %}
 
 <body>
+    <a href="#main-content" class="skip-to-content">Skip to main content</a>
+
     {% include 'header.njk' %}
 
     <div class="wrapper">
@@ -17,7 +19,7 @@
         <div class="main-container">
             {% include 'version-note.njk' %}
 
-            <main>
+            <main id="main-content">
                 {% block content %}
                 {% endblock %}
             </main>
diff --git a/assets/sass/_links.scss b/assets/sass/_links.scss
@@ -43,3 +43,24 @@ a {
 		}
 	}
 }
+
+/* Same style can be used on both light theme and dark theme. */
+.skip-to-content {
+	position: fixed;
+	top: 1rem;
+	left: 1rem;
+	z-index: -1;
+	padding-inline: 1.75ch;
+	padding-block: 0.75ch;
+	border-radius: 0.5ch;
+	background: #ffe633 !important;
+	font-weight: bold;
+	opacity: 0;
+	color: black !important;
+	border: 3px solid black;
+}
+
+.skip-to-content:focus-visible {
+	opacity: 1;
+	z-index: 1001;
+}
