Improve the accecibility of the mobil menu. Also switch to SVG hamburger icon that is animated.

layouts/_default/baseof.html

@@ -23,6 +23,7 @@
 {{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end -}}
 {{ if $.Param "menuinheader" }}{{ partial "menu.html" . }}{{ end -}}
 </div>
+{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
 </header>
 
 {{ if not ($.Param "menuinheader") }}{{ partial "menu.html" . }}{{ end -}}
@@ -40,6 +41,5 @@
 {{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}}
 
 </div>
-{{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
 </body>
 </html>

layouts/partials/language-selector.html

@@ -1,5 +1,4 @@
-<h2 class="visually-hidden">{{ i18n "lang_select_title" }}</h2>
-<nav class="language-selector layout__language-selector">
+<nav class="language-selector layout__language-selector" aria-label="{{ i18n "lang_select_title" }}">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="language-icon" width="24" height="24" viewBox="0 0 961 1113">
 <path d="M848 3a17654 17654 0 00-349 118l-39 13-6 2-171-60-173-62c-2 0-2 6-2 118v119l-50 16-53 19c-5 3-5-19-5 343 0 335 0 336 2 339l6 5a92499 92499 0 00459-150l12-4 10 3 467 148 4 2V302l-45-15-45-14-1-132c0-124-1-132-2-134-4-7-9-8-19-5zm-4 145l-1 117-178-57-178-57L843 30l1 118zM458 481l-1 319-216 72-216 72V305l215-72 217-72 1 320zm262-131c17 4 30 9 30 9 1 0 20 67 42 149l57 203 15 56-64-19a2060 2060 0 01-24-84 2094 2094 0 00-130-40l-15 33-14 34-64-18 22-55 55-136 46-112c10-24 13-30 14-30l31 10z"/>
 <path d="M257 360l-35 9c-23 7-25 7-34 7a72 72 0 01-20-3c-1 1 2 11 5 18 4 8 13 17 23 21 6 3 7 3 18 3 19 0 37-6 52-17 12-8 16-18 15-29-2-11-8-13-24-9zM335 413l-35 16c-13 7-23 12-28 13l-38 12a1636 1636 0 01-106 32c-19 3-17 2-17 9l2 8c2 4 9 10 14 12 12 6 42 3 51-6 2-2 3-3 3-7v-6l31-10 40-11a515 515 0 0148-13l-48 96c-10 19-23 40-45 71l-52 71-55 64-7 8h4c7 0 17-2 20-4a929 929 0 00149-179l23 17c26 20 30 23 51 35 25 14 39 21 56 27 8 2 12 3 13 1 1-4-6-30-9-33l-26-12-47-20-40-17-16-7 10-17c22-35 34-56 53-95l20-40 1-10v-11h-3l-17 6zM716 451l-23 56-23 55 86 26a4814 4814 0 00-40-137zM680 972a460 460 0 0026 44 422 422 0 01-319 66 517 517 0 01-175-66c-7-3-14-2-17 4-2 3-2 9 0 12s24 16 46 27a536 536 0 00222 53c36 1 39 0 68-4a480 480 0 00181-65l8-5 12 21 13 19 7-19 17-48 10-32-99-7z"/>

layouts/partials/menu.html

@@ -1,5 +1,4 @@
-<nav class="main-menu layout__navigation">
-<h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
+<nav class="main-menu layout__navigation" aria-label="{{ i18n "menu_title" }}">
 <ul class="navbar">
 {{ if site.Menus.main -}}
 

layouts/partials/mobilemenu.html

@@ -1,12 +1,18 @@
 <div class="mobile-nav" dir="ltr">
   <div class="mobile-nav__cover"></div>
-  <a href="#navigation" class="mobile-nav__toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
-  <div class="mobile-nav__sheet">
+  <button class="mobile-nav__toggle" aria-expanded="false" aria-controls="sheet">
+    {{ i18n "menu_mobile" }}
+    <svg class="mobile-nav__hamburger" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
+      <rect width="80" height="12" x="10" y="20" rx="5"></rect>
+      <rect width="80" height="12" x="10" y="45" rx="5"></rect>
+      <rect width="80" height="12" x="10" y="70" rx="5"></rect>
+    </svg>
+  </button>
+  <div class="mobile-nav__sheet" id="sheet" aria-hidden="true">
     <div class="mobile-nav__region">
     {{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}
     </div>
-    <nav class="mobile-nav__main-menu">
-    <h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
+    <nav class="mobile-nav__main-menu" aria-label="{{ i18n "menu_title" }}">
     <ul class="mobile-nav__navbar">
     {{ if site.Menus.main -}}