Adding skipLink for better screen reader mode

change div to section
2026-05-13 15:48:54 +02:00 · 2026-05-13 12:20:08 +02:00
2 changed files with 20 additions and 2 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>
  
@@ -87,11 +91,11 @@
      </h1>
    </header>
    
-    <div class="content-box content-text">
+    <section class="content-box content-text">
      <p class="text">
        As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
      </p>
-    </div>
+    </section>
    
    <div class="content-box placeholder">
Author	SHA1	Message	Date
sefaria	90a0f39790	Adding skipLink for better screen reader mode	2026-05-13 15:48:54 +02:00
sefaria	8dd4e034ee	change div to section	2026-05-13 12:20:08 +02:00