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>
-->
<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>