From ee564e0170af7e4ede801bcb64092c8f35276139 Mon Sep 17 00:00:00 2001
From: Michael Boelen <michael.boelen@cisofy.com>
Date: Mon, 19 Jun 2023 23:18:06 +0200
Subject: [PATCH] Verbeteren navigeerbaarheid tbv accessibility

---
 themes/nluug/layouts/partials/header.html | 32 +++++++++++------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/themes/nluug/layouts/partials/header.html b/themes/nluug/layouts/partials/header.html
index 8fac793..505c545 100644
--- a/themes/nluug/layouts/partials/header.html
+++ b/themes/nluug/layouts/partials/header.html
@@ -42,42 +42,42 @@
     <a href="{{ "/" | relLangURL }}" class="logo" title="{{ strings.FirstUpper (i18n "back_to_home") }}"><img class="max-width" src="{{ $logoresource | relURL }}" alt="NLUUG-logo" width="{{ $logoresource.Width }}" height="{{ $logoresource.Height }}"></a>
 -->
     <input type="checkbox" id="hamburger" aria-label="menu button">
-    <label for="hamburger"><span></span></label>
+    <label for="hamburger" aria-hidden="true"><span>&nbsp;</span></label>
 
-    <nav aria-label="Main navigation">
+    <nav aria-label="Hoofdmenu">
 
-       <ul class="menus menu">
+       <ul class="menus menu" role="menubar" aria-label="Menu bovenzijde">
            {{ $currentPage := . }}
            {{ range .Site.Menus.main }}
              {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
              {{ if .Children }}
-               <li>
+               <li role="none">
                  <!-- <button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown-{{ $.Scratch.Get "counter" }}" aria-labelledby="button-link-{{ $.Scratch.Get "counter" }}"></button> -->
-                 <a id="button-link-{{ $.Scratch.Get "counter" }}" href="{{ .URL }}">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a>
-                 <ul class="dropdown" id="dropdown-{{ $.Scratch.Get "counter" }}">
+                 <a id="button-link-{{ $.Scratch.Get "counter" }}" href="{{ .URL }}" role="menuitem" aria-haspopup="true" aria-expanded="true">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a>
+                 <ul class="dropdown" id="dropdown-{{ $.Scratch.Get "counter" }}" role="menu">
                    {{ range .Children }}
-                     <li><a href="{{ .URL }}">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a></li>
+                     <li role="none"><a href="{{ .URL }}" role="menuitem">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a></li>
                    {{ end }}
                  </ul>
                </li>
              {{ else }}
-             <li>
+             <li role="none">
                <!-- <button type="button" aria-haspopup="true" aria-expanded="true" aria-labelledby="button-link-{{ $.Scratch.Get "counter" }}"></button> -->
-               <a id="button-link-{{ $.Scratch.Get "counter" }}" href="{{ .URL }}">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a>
+               <a id="button-link-{{ $.Scratch.Get "counter" }}" href="{{ .URL }}" role="menuitem">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a>
              </li>
              {{ end }}
            {{ end }}
-           <li>
+           <li role="none">
              {{ $search := safeHTML (strings.FirstUpper (i18n "search")) }}
              <!-- <button type="button" aria-haspopup="false" aria-expanded="true" aria-label="{{ $search }}"></button> -->
-             <a href="{{ relLangURL "/zoeken/" }}">
-               {{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass" "title" $search) }}
+             <a href="{{ relLangURL "/zoeken/" }}" role="menuitem" aria-label="{{ $search }}">
+               {{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass" "alt" "Icoon om te zoeken" "title" $search) }}
              </a>
            </li>
-           <li>
-             {{ $text := safeHTML (strings.FirstUpper (i18n "ledendeel")) }}
-             <a href="https://leden.nluug.nl/leden/">
-               {{ partial "show-svg-icon.html" (dict "context" . "icon" "user" "title" $text) }}
+           <li role="none">
+             {{ $text := safeHTML (strings.FirstUpper (i18n "members_area")) }}
+             <a href="https://leden.nluug.nl/leden/" role="menuitem" aria-label="{{ $text }}">
+               {{ partial "show-svg-icon.html" (dict "context" . "icon" "user" "alt" "Icoon om naar ledendeel te gaan" "title" $text) }}
              </a>
            </li>
          </ul>