Improve the accessibility of the theme

Along with some improved formatting of some modules. The changelog
should be enough to make what changes have occured.

CHANGELOG.adoc

@@ -7,7 +7,7 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 
 
 
-== [2.0.0] - 2020-10-21
+== [2.0.0] - 2020-10-24
 
 
 === Changed
@@ -20,6 +20,12 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 ** Replaces with numbers instead of the horrible phrases (which I didn't realize is horrible) so the i18n options for those are also gone.
 ** The pagination is also smarter when applying the ellipses, making sure to only skip if the difference between pages is more than one.
 
+* Improve the web accessibility of the site.
+For future reference, refer to the https://html.spec.whatwg.org/[HTML spec] and https://www.w3.org/TR/wai-aria-1.1/[ARIA specs and practices].
+** Starting with the pagination, `rel` attributes have been added.
+** The content template (`layouts/_default/single.html`) has been updated with the appropriate semantic elements.
+** Apparently, the `<date>` element is non-existent (as of 2020-10-24) and replaced with the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time[`<time>`] element.
+
 * Update the documentation with additional installations with Hugo Module.
 
 
@@ -27,8 +33,10 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 
 * Web feed templates as they have been moved into its https://github.com/foo-dogsquared/hugo-web-feeds[own theme component].
 The removal of the web feed templates marks this update as a breaking change (I think).
+
 * In effect to the removal of the feed templates, `$.Site.Params.feedLimit` is also removed.
 But really, I removed it because I recognized https://gohugo.io/templates/rss/#configure-rss[it is a built-in option] in Hugo with `$.Site.Config.Services.RSS.Limit`.
+
 * The recipe section in the README as it is getting too big and also I would argue it should be in its own folder or something.
 For now, I'll be putting them in the demo branch as its own section which is better for first-time users.
 
@@ -36,6 +44,7 @@ For now, I'll be putting them in the demo branch as its own section which is bet
 === Fixed
 
 * Relative links for multilingual mode.
+
 * Table of contents have conditional rendering made possible with simple CSS (surprisingly).
 
 

assets/css/main.css

@@ -104,8 +104,8 @@ tr:nth-child(even) {
 }
 
 pre {
-    background: var(--background-light);
-    border: var(--background) solid 1px;
+    background: var(--foreground);
+    color: var(--background);
     font-family: var(--mono-family);
     font-size: 1rem;
     line-height: 1.5;
@@ -268,6 +268,11 @@ footer {
     margin: 0 auto;
 }
 
+.post__meta {
+    margin: 0.5rem auto;
+    font-size: 0.9em;
+}
+
 .post__meta > * {
     margin: 0.5rem auto;
 }
@@ -278,12 +283,6 @@ footer {
     html:root {
         --font-size: 17px;
     }
-
-    .post {
-        align-items: unset;
-        flex-flow: column;
-        margin-bottom: 1rem;
-    }
 }
 
 /* Automatic color scheme detection */

layouts/_default/list.html

@@ -11,8 +11,13 @@ Otherwise, we take the pages of a section. */ -}}
 
 {{ range (where (.Paginate $pages).Pages "Params.hidden" "!=" true) }}
 <article class="post">
-    <a href="{{ .Permalink }}" aria-label="{{ .Title }}"><h1>{{ .Title }}</h1></a>
-    <date datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</date>
+    <h1><a href="{{ .Permalink }}" aria-label="{{ .Title }}">{{ .Title }}</a></h1>
+    <div class="post__meta">
+        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>
+        {{- if ne .Date .Lastmod }}
+        (Modified on <time datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</time>)
+        {{- end }}
+    </div>
 </article>
 {{ end }}
 

layouts/_default/single.html

@@ -1,51 +1,56 @@
 {{ define "main" }}
 
-<header>
-    <h1>{{ .Title }}</h1>
-
+<article>
+    <header>
+        <h1>{{ .Title }}</h1>
+    </header>
     <div class="post__meta">
         <!-- List the author(s) of the article. -->
         {{- with .Params.author }}
         {{- $names := slice }}
         {{- range . }}{{ $names = $names | append .name }}{{ end }}
-        <p class="author">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
+        <p data-content-author="{{ jsonify $names }}">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
         {{- end }}
 
         <!-- Only show the creation date if the `date` field is valid. -->
-        {{- if ne (.Date.Format "2006") "0001" }}
+        {{- if ne (.Date.Format "2006") "0001" -}}
         <!-- Publication date. -->
-        <p class="created-date">{{ i18n "published_on" }}: <date datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</date></p>
+        <p data-content-publication-date="{{ .Date }}">{{ i18n "published_on" }}: <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time></p>
         {{- end }}
-
+    
         <!-- Modification date (will only appear if the publication date is less than the modified date.) -->
         {{- if ne .Date .Lastmod }}
-        <p class="updated-date">{{ i18n "updated_on" }}: <date datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</date></p>
+        <p data-content-modification-date="{{ .Lastmod }}">{{ i18n "updated_on" }}: <time datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</time></p>
         {{- end }}
-
+    
         <!-- Link the translated versions if the article has at least one translated page. -->
         {{- if .IsTranslated }}
-        {{ $langs := slice }}
-        {{ range .Translations }}{{ $langs = $langs | append (printf "<a href=%s>%s</a>" .Permalink (cond (ne .Language.LanguageName nil) .Language.LanguageName .Lang)) }}{{ end }}
-        <p>{{ i18n "available_translations" }}: {{ delimit $langs "," (printf " %s " (i18n "and")) }}</p>
+        {{- $lang_links := slice }}
+        {{- $langs := slice }}
+        {{- range .Translations }}
+          {{- $lang := cond (ne .Language.LanguageName nil) .Language.LanguageName .Lang }}
+          {{ $lang_links = $lang_links | append (printf "<a href=%s>%s</a>" .Permalink $lang) }}
+          {{ $langs = $langs | append $lang }}
+        {{- end }}
+        <p data-content-translations="{{ jsonify $langs }}">{{ i18n "available_translations" }}: {{ delimit $lang_links "," (printf " %s " (i18n "and")) }}</p>
         {{- end }}
     </div>
-</header>
+    <hr>
 
-<hr>
-
-{{ $is_toc := cond (ne .Params.toc nil) .Params.toc $.Site.Params.toc }}
-{{ if $is_toc }}
-<style>
-#TableOfContents:not(:empty)::before {
-  content: "{{ i18n "table_of_contents" }}";
-  font-weight: bold;
-}
-</style>
-{{ .TableOfContents }}
+    {{ $is_toc := cond (ne .Params.toc nil) .Params.toc $.Site.Params.toc }}
+    {{ if $is_toc }}
+    <style>
+    #TableOfContents:not(:empty)::before {
+      content: "{{ i18n "table_of_contents" }}";
+      font-weight: bold;
+    }
+    </style>
+    {{ .TableOfContents }}
 {{ end }}
 
-<article>
-{{ .Content }}
+    <main>
+    {{ .Content }}
+    </main>
 </article>
 
 {{ end }}

layouts/partials/head.html

@@ -1,6 +1,10 @@
 <title>{{ if .IsHome }}{{ $.Site.Title | safeHTML }}{{ else }}{{ .Title | safeHTML }}{{ end }}</title>
 
-{{- $style := resources.Get "css/main.css" | resources.Minify | resources.Fingerprint -}}
+{{- /* Only enable asset bundling in production */ -}}
+{{- $style := resources.Get "css/main.css" -}}
+{{- if hugo.IsProduction }}
+  {{- $style = $style | resources.Minify | resources.Fingerprint -}}
+{{- end }}
 <link rel="stylesheet" href="{{ $style.Permalink }}" />
 
 {{- /* Some sane <meta> tags default */ -}}
@@ -20,7 +24,7 @@
 {{- end }}
 
 
-{{- if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production")  }}
+{{- if hugo.IsProduction }}
     {{ template "_internal/google_analytics_async.html" . }}
     {{ template "_internal/disqus.html" . }}
 {{- end }}

layouts/partials/header.html

@@ -1,4 +1,4 @@
-<nav aria-labelledby="primary-navigation">
+<nav aria-label="Primary navigation">
     <a class="site__title" href="{{ "" | absLangURL }}">{{ $.Site.Title }}</a>
     <div class="site__links">
         |
@@ -6,5 +6,9 @@
         <a href="{{ .URL | absLangURL }}">{{ .Name }}</a> |
         {{ end }}
     </div>
-    <button class="site__theme-btn" aria-label="theme-toggle" onclick="const theme = window.localStorage.getItem('theme') == 'dark' ? 'light' : 'dark'; window.localStorage.setItem('theme', theme); document.documentElement.dataset.theme = theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm2 0c0-5.514 4.486-10 10-10v20c-5.514 0-10-4.486-10-10z"></path></svg></button>
+    <button class="site__theme-btn" aria-label="theme-toggle" onclick="const theme = window.localStorage.getItem('theme') == 'dark' ? 'light' : 'dark'; window.localStorage.setItem('theme', theme); document.documentElement.dataset.theme = theme">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm2 0c0-5.514 4.486-10 10-10v20c-5.514 0-10-4.486-10-10z"></path>
+        </svg>
+    </button>
 </nav>