Improve accessible navigation

This commit is contained in:
Hazem Krimi
2023-11-22 19:27:27 +01:00
parent 077c4fe728
commit 41a5505631
3 changed files with 118 additions and 25 deletions
+28 -7
View File
@@ -7,22 +7,43 @@
<span>Hazem Krimi</span> <span>Hazem Krimi</span>
</div> </div>
<div id="links"> <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 }} {{ readFile "assets/icons/linkedin.svg" | safeHTML }}
</a> </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 }} {{ readFile "assets/icons/twitter.svg" | safeHTML }}
</a> </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 }} {{ readFile "assets/icons/github.svg" | safeHTML }}
</a> </a>
<a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> <a
{{ readFile "assets/icons/rss.svg" | safeHTML }} 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>
<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 }} {{ readFile "assets/icons/mail.svg" | safeHTML }}
</a> </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 }} {{ readFile "assets/icons/cv.svg" | safeHTML }}
</a> </a>
</div> </div>
+47 -10
View File
@@ -12,24 +12,61 @@
{{ end }} {{ end }}
</div> </div>
<div id="links"> <div id="links">
<a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a> <a
<a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a> aria-label="Hazem Krimi's Linkedin profile"
<a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a> href="https://www.linkedin.com/in/hazemkrimi" target="_blank">
<a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a> {{ readFile "assets/icons/linkedin.svg" | safeHTML }}
<a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a> </a>
<a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.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> <div class="vertical-separator"></div>
<span <a
href="#"
class="theme-toggler" class="theme-toggler"
aria-label="Theme toggler"
> >
{{ readFile "assets/icons/moon.svg" | safeHTML }} {{ readFile "assets/icons/moon.svg" | safeHTML }}
{{ readFile "assets/icons/sun.svg" | safeHTML }} {{ readFile "assets/icons/sun.svg" | safeHTML }}
</span> </a>
</div> </div>
<span <a
href="#"
id="nav-toggler" id="nav-toggler"
aria-label="Mobile navigation toggler"
> >
{{ readFile "assets/icons/burger.svg" | safeHTML }} {{ readFile "assets/icons/burger.svg" | safeHTML }}
{{ readFile "assets/icons/close.svg" | safeHTML }} {{ readFile "assets/icons/close.svg" | safeHTML }}
</span> </a>
</header> </header>
+43 -8
View File
@@ -8,17 +8,52 @@
</div> </div>
<hr> <hr>
<div id="links"> <div id="links">
<span <a
href="#"
class="theme-toggler" class="theme-toggler"
aria-label="Theme toggler"
> >
{{ readFile "assets/icons/moon.svg" | safeHTML }} {{ readFile "assets/icons/moon.svg" | safeHTML }}
{{ readFile "assets/icons/sun.svg" | safeHTML }} {{ readFile "assets/icons/sun.svg" | safeHTML }}
</span> </a>
<a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a> <a
<a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a> aria-label="Hazem Krimi's CV"
<a href="{{ urls.JoinPath .Site.BaseURL "index.xml" }}" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a> href="{{ $cv.Permalink }}" target="_blank"
<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> {{ readFile "assets/icons/cv.svg" | safeHTML }}
<a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a> </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> </div>
</nav> </nav>