From be8552ef29fc7b3aa2a2d9de541afe3ce9c24ec0 Mon Sep 17 00:00:00 2001
From: Alan Pearce
Date: Wed, 29 May 2024 16:03:14 +0200
Subject: improve accessibility and HTML validity

---
 config.toml                      |  4 ++++
 templates/header.html            |  2 +-
 templates/language_switcher.html |  6 +++---
 templates/page.html              |  2 +-
 templates/section.html           | 14 ++++++--------
 templates/seo_tags.html          |  2 +-
 templates/style.css.html         |  6 +++++-
 templates/taxonomy_list.html     | 14 ++++++--------
 templates/taxonomy_single.html   |  2 +-
 9 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/config.toml b/config.toml
index 147f75f..fd1eff1 100644
--- a/config.toml
+++ b/config.toml
@@ -21,6 +21,8 @@ remove_filter = "Remove filter"
 filtering_for = "Filtering for"
 made_with = "Made with"
 table_of_contents = "Table of contents"
+language = "language"
+site = "site"
 
 [languages.de]
 title = "Zola ʕ•ᴥ•ʔ Bear Blog"
@@ -37,6 +39,8 @@ remove_filter = "Filter entfernen"
 filtering_for = "Filtern nach"
 made_with = "Erstellt mit"
 table_of_contents = "Inhaltsverzeichnis"
+language = "Sprache"
+site = "Site"
 
 [markdown]
 # Whether to do syntax highlighting
diff --git a/templates/header.html b/templates/header.html
index 54106ea..acdf8f8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -3,7 +3,7 @@
   <a href="{{ get_url(path="@/_index.md", lang=lang) }}" class="title">
     <h1>{{ config.title }}</h1>
   </a>
-  <nav>
+  <nav aria-label="{{ trans(key="site", lang=lang)}}">
     {%- include "nav.html" %}
   </nav>
 </header>
diff --git a/templates/language_switcher.html b/templates/language_switcher.html
index 04ce9a5..11e2637 100644
--- a/templates/language_switcher.html
+++ b/templates/language_switcher.html
@@ -1,11 +1,11 @@
 {%- if config.extra.language_switcher %}
-  <nav class="lang">
+  <nav class="lang" aria-label="{{ trans(key="language", lang=lang) }}">
     {%- set language_agnostic_path = current_path | default(value="/") | replace(from='/' ~ lang ~ '/', to = '/') | trim_start_matches(pat = '/') %}
     {%- for tr in config.extra.translations %}
       {%- if tr.code == lang %}
-        <active>{{ tr.name }}</active>
+        <span class="active">{{ tr.name }}</span>
       {%- else %}
-          <a href="{{ get_url(path=language_agnostic_path, lang=tr.code) ~ "/" }}" hreflang="{{ tr.code }}">{{ tr.name }}</a>
+        <a href="{{ get_url(path=language_agnostic_path, lang=tr.code) ~ "/" }}" hreflang="{{ tr.code }}" lang="{{ tr.code }}">{{ tr.name }}</a>
       {%- endif %}
     {%- endfor %}
   </nav>
diff --git a/templates/page.html b/templates/page.html
index a51d965..336529a 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -9,7 +9,7 @@
     {%- if page.date %}
       <p>
         <i>
-          <time datetime='{{ page.date | date(format='%+') }}' pubdate>
+          <time datetime="{{ page.date | date(format='%+') }}" pubdate>
             {{- page.date | date(format=config.extra.date_format) -}}
           </time>
         </i>
diff --git a/templates/section.html b/templates/section.html
index a389c93..a3520b5 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -13,7 +13,7 @@
         <li>
           <span>
             <i>
-              <time datetime='{{ page.date | date(format='%+') }}' pubdate>
+              <time datetime="{{ page.date | date(format='%+') }}" pubdate>
                 {{ page.date | date(format=config.extra.date_format) }}
               </time>
             </i>
@@ -24,13 +24,11 @@
         <li>{{ trans(key="no_posts", lang=lang) }}</li>
       {%- endfor -%}
     </ul>
-    <small>
-      <div>
-        {%- set tags = get_taxonomy(kind="tags", lang=lang) %}
-        {%- for post in tags.items %}
+    <div class="tags">
+      {%- set tags = get_taxonomy(kind="tags", lang=lang) %}
+      {%- for post in tags.items %}
         <a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
-        {%- endfor %}
-      </div>
-    </small>
+      {%- endfor %}
+    </div>
   </main>
 {% endblock %}
diff --git a/templates/seo_tags.html b/templates/seo_tags.html
index 4eb2bc8..b9a9e84 100644
--- a/templates/seo_tags.html
+++ b/templates/seo_tags.html
@@ -1,2 +1,2 @@
 <meta name="title" content="{% if page.title %}{{ page.title }}{% else %}{{ config.title }}{% endif %}">
-<meta name="description" content="{{ config.description }}" />
+<meta name="description" content="{{ config.description }}">
diff --git a/templates/style.css.html b/templates/style.css.html
index 2196ce5..bb7915c 100644
--- a/templates/style.css.html
+++ b/templates/style.css.html
@@ -64,7 +64,7 @@
     margin-right: 8px;
   }
 
-  nav active {
+  nav span.active {
     font-weight: bold;
     margin-right: 10px;
   }
@@ -165,3 +165,7 @@
   ul.blog-posts li a:visited {
     color: var(--visited-color);
   }
+
+  .tags {
+    font-size: smaller;
+  }
diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html
index f11519d..7ccb4a5 100644
--- a/templates/taxonomy_list.html
+++ b/templates/taxonomy_list.html
@@ -3,13 +3,11 @@
 {% block main %}
   <main>
     <h1>{{ taxonomy.name | capitalize }}</h1>
-    <small>
-      <div>
-        {%- set tags = get_taxonomy(kind="tags", lang=lang) %}
-        {%- for post in tags.items %}
-          <a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
-        {%- endfor %}
-      </div>
-    </small>
+    <div class="tags">
+      {%- set tags = get_taxonomy(kind="tags", lang=lang) %}
+      {%- for post in tags.items %}
+        <a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
+      {%- endfor %}
+    </div>
   </main>
 {% endblock %}
diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html
index ea58c99..2e5533b 100644
--- a/templates/taxonomy_single.html
+++ b/templates/taxonomy_single.html
@@ -13,7 +13,7 @@
         <li>
           <span>
             <i>
-              <time datetime='{{ page.date | date(format='%+') }}' pubdate>
+              <time datetime="{{ page.date | date(format='%+') }}" pubdate>
                 {{ page.date | date(format=config.extra.date_format) }}
               </time>
             </i>
-- 
cgit 1.4.1