Adding skipLink for better screen reader mode

2026-05-13 15:48:54 +02:00
parent 8dd4e034ee
commit 90a0f39790
2 changed files with 18 additions and 0 deletions
@@ -384,6 +384,20 @@ button:visited, .link-button:visited {
 Layout styles
 ======================= */

+#skipLink a {
+  display: block;
+  position: absolute;
+  left: -999px;
+  top: -999px;
+}
+ 
+#skipLink a:focus {
+  left: 0;
+  top: 0;
+  padding: var(--spacing-2);
+  background: var(--color-background-content-box);
+}
+
 main, footer {
  max-width: 900px;
  border: none;
@@ -25,6 +25,10 @@

 <body>
  
+  <div id="skipLink">
+    <a href="#siteContent">Skip to content</a>
+  </div>
+  
  <header class="site-header">
    <a class="logo" href="/">Logo</a>