Improve Web Vitals: SEO and Accessibility

assets/css/itix.css

@@ -2,7 +2,7 @@
   /*
    * Theme colors 
    */
-  --main-color: #1975d2; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */
+  --main-color: #1870c9; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */
   --main-background-color: #fcfcfc;
   --alternate-text-color: #145ca4;
   --main-text-color: #092949; /* 50% darker than main-color */

i18n/en.yaml

@@ -34,3 +34,5 @@
   translation: Speaking
 - id: type_page
   translation: Misc.
+- id: show_menu
+  translation: Show the menu

i18n/fr.yaml

@@ -34,3 +34,5 @@
   translation: Conférence
 - id: type_page
   translation: Divers
+- id: show_menu
+  translation: Afficher le menu

layouts/partials/head.html

@@ -26,10 +26,22 @@
 <link rel="preload" href="/icons/en.svg" as="image" type="image/svg+xml">
 <link rel="preload" href="/icons/fr.svg" as="image" type="image/svg+xml">
 
-{{ if .IsHome -}}
+<!--
-<meta name="description" content="{{ .Site.Params.description }}">
+  -- Ensure the <meta name=description> tag is never empty since it is used
-{{- else -}}
+  -- in the SEO score.
-<meta name="description" content="{{ .Params.description }}">
+  -->
+{{- if .IsHome }}
+{{- with .Site.Params.description }}
+<meta name="description" content="{{ . }}">
+{{- else }}
+<meta name="description" content="{{ .Title }}">
+{{- end }}
+{{- else }}
+{{- with .Params.description }}
+<meta name="description" content="{{ . }}">
+{{- else }}
+<meta name="description" content="{{ .Title }}">
+{{- end }}
 {{- end }}
 
 <!-- Tell IE to use the Edge engine -->

layouts/partials/menu.html

@@ -4,8 +4,10 @@
       -- A fake / hidden checkbox is used as click reciever,
       -- so you can use the :checked selector on it.
       -->
-    <input type="checkbox" class="hamburger-menu" />
+    <input type="checkbox" class="hamburger-menu" id="show-menu" />
-    
+    <!-- Add a label for accessibility -->
+    <label class="hamburger-menu" for="show-menu" style="display: none;" >{{ i18n "show_menu" }}</label>
+
     <!-- Some spans to draw a hamburger. -->
     <div class="hamburger-menu"></div>
     <div class="hamburger-menu"></div>