From 41a55056311301d73eee6f6d5975b45208816629 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 22 Nov 2023 19:27:27 +0100
Subject: [PATCH] Improve accessible navigation

---
 layouts/partials/footer.html            | 35 ++++++++++++---
 layouts/partials/header.html            | 57 ++++++++++++++++++++-----
 layouts/partials/mobile-navigation.html | 51 ++++++++++++++++++----
 3 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e4c4827..6f117f5 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -7,22 +7,43 @@
     <span>Hazem Krimi</span>
   </div>
   <div id="links">
-    <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank">
+    <a
+      aria-label="Hazem Krimi's Linkedin profile"
+      href="https://www.linkedin.com/in/hazemkrimi"
+      target="_blank"
+    >
       {{ readFile "assets/icons/linkedin.svg" | safeHTML }}
     </a>
-    <a href="https://twitter.com/HazemKrimi" target="_blank">
+    <a
+      aria-label="Hazem Krimi's Twitter or X profile"
+      href="https://twitter.com/HazemKrimi"
+      target="_blank"
+    >
       {{ readFile "assets/icons/twitter.svg" | safeHTML }}
     </a>
-    <a href="https://github.com/hazemKrimi" target="_blank">
+    <a
+      aria-label="Hazem Krimi's Github profile"
+      href="https://github.com/hazemKrimi"
+      target="_blank"
+    >
       {{ readFile "assets/icons/github.svg" | safeHTML }}
     </a>
-    <a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank">
-      {{ readFile "assets/icons/rss.svg" | safeHTML }}
+    <a
+      aria-label="Hazem Krimi's content RSS feed"
+      href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}"
+      target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }}
     </a>
-    <a href="mailto:me@hazemkrimi.tech" target="_blank">
+    <a
+      aria-label="Hazem Krimi's Email"
+      href="mailto:me@hazemkrimi.tech"
+      target="_blank"
+    >
       {{ readFile "assets/icons/mail.svg" | safeHTML }}
     </a>
-    <a href="{{ $cv.Permalink }}" target="_blank">
+    <a
+      aria-label="Hazem Krimi's CV"
+      href="{{ $cv.Permalink }}" target="_blank"
+    >
       {{ readFile "assets/icons/cv.svg" | safeHTML }}
     </a>
   </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d69b955..19ba377 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,24 +12,61 @@
     {{ end }}
   </div>
   <div id="links">
-    <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
-    <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
-    <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
-    <a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
-    <a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a>
-    <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
+    <a
+      aria-label="Hazem Krimi's Linkedin profile"
+      href="https://www.linkedin.com/in/hazemkrimi" target="_blank">
+      {{ readFile "assets/icons/linkedin.svg" | safeHTML }}
+    </a>
+    <a
+      aria-label="Hazem Krimi's Twitter or X profile"
+      href="https://twitter.com/HazemKrimi"
+      target="_blank"
+    >
+      {{ readFile "assets/icons/twitter.svg" | safeHTML }}
+    </a>
+    <a
+      aria-label="Hazem Krimi's Github profile"
+      href="https://github.com/hazemKrimi" target="_blank"
+    >
+      {{ readFile "assets/icons/github.svg" | safeHTML }}
+    </a>
+    <a
+      aria-label="Hazem Krimi's content RSS feed"
+      href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}"
+      target="_blank"
+    >
+      {{ readFile "assets/icons/rss.svg" | safeHTML }}
+    </a>
+    <a
+      aria-label="Hazem Krimi's Email"
+      href="mailto:me@hazemkrimi.tech"
+      target="_blank"
+    >
+      {{ readFile "assets/icons/mail.svg" | safeHTML }}
+    </a>
+    <a
+      aria-label="Hazem Krimi's CV"
+      href="{{ $cv.Permalink }}"
+      target="_blank"
+    >
+      {{ readFile "assets/icons/cv.svg" | safeHTML }}
+    </a>
     <div class="vertical-separator"></div>
-    <span
+    <a
+      href="#"
       class="theme-toggler"
+      aria-label="Theme toggler"
     >
       {{ readFile "assets/icons/moon.svg" | safeHTML }}
       {{ readFile "assets/icons/sun.svg" | safeHTML }}
-    </span>
+    </a>
   </div>
-  <span
+  <a
+    href="#"
     id="nav-toggler"
+    aria-label="Mobile navigation toggler"
   >
     {{ readFile "assets/icons/burger.svg" | safeHTML }}
     {{ readFile "assets/icons/close.svg" | safeHTML }}
-  </span>
+  </a>
 </header>
diff --git a/layouts/partials/mobile-navigation.html b/layouts/partials/mobile-navigation.html
index 223acd2..7775ce6 100644
--- a/layouts/partials/mobile-navigation.html
+++ b/layouts/partials/mobile-navigation.html
@@ -8,17 +8,52 @@
     </div>
     <hr>
     <div id="links">
-      <span
+      <a
+        href="#"
         class="theme-toggler"
+        aria-label="Theme toggler"
       >
         {{ readFile "assets/icons/moon.svg" | safeHTML }}
         {{ readFile "assets/icons/sun.svg" | safeHTML }}
-      </span>
-      <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
-      <a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a>
-      <a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
-      <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
-      <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
-      <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
+      </a>
+      <a
+        aria-label="Hazem Krimi's CV"
+        href="{{ $cv.Permalink }}" target="_blank"
+      >
+        {{ readFile "assets/icons/cv.svg" | safeHTML }}
+      </a>
+      <a
+        aria-label="Hazem Krimi's Email"
+        href="mailto:me@hazemkrimi.tech"
+        target="_blank"
+      >
+        {{ readFile "assets/icons/mail.svg" | safeHTML }}
+      </a>
+      <a
+        aria-label="Hazem Krimi's content RSS feed"
+        href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}"
+        target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }}
+      </a>
+      <a
+        aria-label="Hazem Krimi's Github profile"
+        href="https://github.com/hazemKrimi"
+        target="_blank"
+      >
+        {{ readFile "assets/icons/github.svg" | safeHTML }}
+      </a>
+      <a
+        aria-label="Hazem Krimi's Twitter or X profile"
+        href="https://twitter.com/HazemKrimi"
+        target="_blank"
+      >
+        {{ readFile "assets/icons/twitter.svg" | safeHTML }}
+      </a>
+      <a
+        aria-label="Hazem Krimi's Linkedin profile"
+        href="https://www.linkedin.com/in/hazemkrimi"
+        target="_blank"
+      >
+        {{ readFile "assets/icons/linkedin.svg" | safeHTML }}
+      </a>
   </div>
 </nav>
\ No newline at end of file