Add 'Skip to main content' a11y link

jultty · Jun 5, 2024 · 1a9a3ec · jultty · Jun 5, 2024 · 1a9a3ec
1 parent 47d592e
commit 1a9a3ec
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -15,6 +15,16 @@ html {
   color: #888
 }
 
+#a11y-skip {
+  position: absolute;
+  left: -1000%;
+}
+
+#a11y-skip:focus {
+  display: inline;
+  left: 5%;
+}
+
 #nav-menu li {
   display: inline-block;
   margin-left: 20px;

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -38,22 +38,38 @@ function localize_menu() {
   }
 }
 
+function localize_navigation() {
+  const skip = document.getElementById('a11y-skip')
+  const post_list = document.getElementById('nav-posts')
+
+  if (lang == 'pt') {
+    skip.innerText = 'Saltar para o conteúdo principal'
+    post_list.ariaLabel = 'Listagem de todas as postagens'
+  } else {
+    skip.innerText = 'Skip to main content'
+    post_list.ariaLabel = 'Listing of all posts'
+  }
+}
+
 const en_lang_swapper = document.getElementById('lang-swap-en')
 const pt_lang_swapper = document.getElementById('lang-swap-pt')
 
 en_lang_swapper.addEventListener("click", () => {
   lang = 'en'
   populate_posts()
+  localize_navigation()
   localize_menu()
 })
 
 pt_lang_swapper.addEventListener("click", () => {
   lang = 'pt'
   populate_posts()
+  localize_navigation()
   localize_menu()
 })
 
 document.addEventListener('DOMContentLoaded', () => {
   populate_posts()
+  localize_navigation()
   localize_menu()
 })
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
     <script src="assets/js/main.js" defer></script>
   </head>
   <body>
+    <a id="a11y-skip" href="#main">Skip to main content</a>
     <header>
       <pre class="header-art"
         role="img" aria-label="ASCII art with jutty.dev in a 3D, slanted font">
@@ -37,7 +38,9 @@
         <li><a id="nav-menu-rss" href="https://blog.jutty.dev/assets/rss/en.rss">RSS</a></li>
         <li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
       </ul>
-      <ul id="nav-posts"></ul>
+      <main id="main">
+        <ul id="nav-posts" aria-label="Listing of all posts"></ul>
+      </main>
     </nav>
   </body>
 </html>