Verbeteren navigeerbaarheid tbv accessibility

This commit is contained in:
Michael Boelen 2023-06-19 23:18:06 +02:00
parent 36d71a3938
commit ee564e0170

View file

@ -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> <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"> <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 := . }} {{ $currentPage := . }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }} {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
{{ if .Children }} {{ 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> --> <!-- <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> <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" }}"> <ul class="dropdown" id="dropdown-{{ $.Scratch.Get "counter" }}" role="menu">
{{ range .Children }} {{ 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 }} {{ end }}
</ul> </ul>
</li> </li>
{{ else }} {{ else }}
<li> <li role="none">
<!-- <button type="button" aria-haspopup="true" aria-expanded="true" aria-labelledby="button-link-{{ $.Scratch.Get "counter" }}"></button> --> <!-- <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> </li>
{{ end }} {{ end }}
{{ end }} {{ end }}
<li> <li role="none">
{{ $search := safeHTML (strings.FirstUpper (i18n "search")) }} {{ $search := safeHTML (strings.FirstUpper (i18n "search")) }}
<!-- <button type="button" aria-haspopup="false" aria-expanded="true" aria-label="{{ $search }}"></button> --> <!-- <button type="button" aria-haspopup="false" aria-expanded="true" aria-label="{{ $search }}"></button> -->
<a href="{{ relLangURL "/zoeken/" }}"> <a href="{{ relLangURL "/zoeken/" }}" role="menuitem" aria-label="{{ $search }}">
{{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass" "title" $search) }} {{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass" "alt" "Icoon om te zoeken" "title" $search) }}
</a> </a>
</li> </li>
<li> <li role="none">
{{ $text := safeHTML (strings.FirstUpper (i18n "ledendeel")) }} {{ $text := safeHTML (strings.FirstUpper (i18n "members_area")) }}
<a href="https://leden.nluug.nl/leden/"> <a href="https://leden.nluug.nl/leden/" role="menuitem" aria-label="{{ $text }}">
{{ partial "show-svg-icon.html" (dict "context" . "icon" "user" "title" $text) }} {{ partial "show-svg-icon.html" (dict "context" . "icon" "user" "alt" "Icoon om naar ledendeel te gaan" "title" $text) }}
</a> </a>
</li> </li>
</ul> </ul>