Improve accessibility

2024-11-17 13:25:57 -06:00 · 2021-11-23 19:06:26 -06:00 · 2021-11-23 19:06:26 -06:00 · 43d406c4fe
commit 43d406c4fe
parent 1380558384
18 changed files with 90 additions and 30 deletions
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -39,3 +39,67 @@ older_post:

 newer_post:
  other: "Newer"
+
+# ARIA labels
+aria_header_link:
+  other: "header link"
+
+aria_back_to_top_button:
+  other: "back to top button"
+
+aria_rss_link:
+  other: "RSS feed link"
+
+aria_post_meta_view_source:
+  other: "link to page source"
+
+aria_post_meta_translations:
+  other: "translations"
+
+aria_post_meta_tags:
+  other: "tags"
+
+aria_post_meta_reading_time:
+  other: "reading time"
+
+aria_post_meta_authors:
+  other: "authors"
+
+aria_post_meta_series:
+  other: "series"
+
+aria_breadcrumbnav:
+  other: "breadcrumb navigation bar"
+
+aria_post_metadata:
+  other: "post metadata"
+
+aria_author_metadata:
+  other: "author metadata"
+
+aria_post_meta_date:
+  other: "date"
+
+aria_post_meta_modified_date:
+  other: "last modified date"
+
+aria_author_post_count:
+  other: "post count"
+
+aria_author_word_count:
+  other: "word count"
+
+aria_series_metadata:
+  other: "series metadata"
+
+aria_navbar:
+  other: "navigation bar"
+
+aria_langpicker:
+  other: "language picker"
+
+aria_langpicker_list:
+  other: "language list"
+
+aria_table_of_contents:
+  other: "table of contents"
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@ -1,7 +1,7 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}" class="section-header">
    {{ .Text | safeHTML }}
    <a href="#{{ .Anchor | safeURL }}">
-        <span class="section-header-link">
+        <span class="section-header-link" aria-label="{{ i18n "aria_header_link" }}">
            {{ partial "icon.html" "link" }}
        </span>
    </a>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -4,7 +4,7 @@
    {{ partial "head.html" . }}

    <body>
-        <a id="top"></a>
+        <a id="top" aria-hidden="true"></a>

        <div class="top">
            {{ partial "top.html" . }}
@ -29,7 +29,7 @@
            </footer>
        {{ end }}

-        <a id="back-to-top" href="#top">
+        <a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
            {{ partial "icon.html" "chevron-up" }}
        </a>
        <noscript>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -2,11 +2,7 @@
    <h1>
        {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
        {{ .Title | markdownify }}
-        <span class="rss-link">
-            {{ with .OutputFormats.Get "rss" }}
-            <a href="{{ .Permalink }}" target="_blank" rel="noopener">{{ partial "icon.html" "rss-feed" }}</a>
-            {{ end }}
-        </span>
+        {{ partial "rss-link.html" . }}
    </h1>

    <div class="list-page-content">
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -28,7 +28,7 @@


    {{ if .Params.Toc }}
-        <div class="table-of-contents">
+        <div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
            <details>
                <summary>{{ i18n "table_of_contents" }}</summary>
                {{ .TableOfContents }}
--- a/layouts/partials/breadcrumb.html
+++ b/layouts/partials/breadcrumb.html
@ -1,4 +1,4 @@
-<nav class="breadcrumb">
+<nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
    <ul>
        {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
    </ul>
--- a/layouts/partials/post-meta-item/authors.html
+++ b/layouts/partials/post-meta-item/authors.html
@ -1,5 +1,5 @@
 {{ with .Params.authors }}
-    <span class="post-meta-item">
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_authors" }}">
        {{ partial "icon.html" "user-circle" }}

        {{ if index $.Site.Taxonomies "authors" }}
--- a/layouts/partials/post-meta-item/readingtime.html
+++ b/layouts/partials/post-meta-item/readingtime.html
@ -1,5 +1,5 @@
 {{ if ne .Site.Params.readingtime false }}
-    <span class="post-meta-item">
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_reading_time" }}">
        {{ partial "icon.html" "clock" }}
        {{ i18n "readingtime" .ReadingTime }}
    </span>
--- a/layouts/partials/post-meta-item/series.html
+++ b/layouts/partials/post-meta-item/series.html
@ -4,7 +4,7 @@
        {{ $series = $series | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
    {{ end }}

-    <div class="series">
+    <div class="series" aria-label="{{ i18n "aria_post_meta_series" }}">
        {{ partial "icon.html" "files" }}
        {{ delimit $series ", " }}
    </div>
--- a/layouts/partials/post-meta-item/tags.html
+++ b/layouts/partials/post-meta-item/tags.html
@ -4,7 +4,7 @@
        {{ $tags = $tags | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
    {{ end }}

-    <div class="tags">
+    <div class="tags" aria-label="{{ i18n "aria_post_meta_tags" }}">
        {{ partial "icon.html" "tag" }}
        {{ delimit $tags ", " }}
    </div>
--- a/layouts/partials/post-meta-item/translations.html
+++ b/layouts/partials/post-meta-item/translations.html
@ -1,5 +1,5 @@
 {{ if .IsTranslated }}
-    <span class="post-meta-item">
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_translations" }}">
        {{ partial "icon.html" "world" }}
        {{ range .Translations }}
            <a href="{{ .Permalink }}">{{ .Language }}</a>
--- a/layouts/partials/post-meta-item/viewsource.html
+++ b/layouts/partials/post-meta-item/viewsource.html
@ -1,5 +1,5 @@
 {{ if and .Site.Params.gitFileURL .File.Path }}
-    <span class="post-meta-item">
+    <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_view_source" }}">
        {{ with .Site.Params.gitFileIcon }}
            {{ partial "icon.html" . }}
        {{ else }}
--- a/layouts/partials/post-metadata/author.html
+++ b/layouts/partials/post-metadata/author.html
@ -1,16 +1,16 @@
-<div class="post-metadata">
+<div class="post-metadata" aria-label="{{ i18n "aria_author_metadata" }}">
    {{/* Calculate the total word count */}}
    {{ $total_words := 0 }}
    {{ range .Data.Pages }}
        {{ $total_words = add $total_words .WordCount }}
    {{ end }}

-    <span class="post-meta-item">
+    <span class="post-meta-item" aria-label="{{ i18n "aria_author_post_count" }}">
        {{ partial "icon.html" "newspaper" }}
        {{ i18n "post_count" (len .Data.Pages) }}
    </span>

-    <span class="post-meta-item">
+    <span class="post-meta-item" aria-label="{{ i18n "aria_author_word_count" }}">
        {{ partial "icon.html" "align-left" }}
        {{ i18n "wordcount" $total_words }}
    </span>
--- a/layouts/partials/post-metadata/full.html
+++ b/layouts/partials/post-metadata/full.html
@ -1,7 +1,7 @@
 {{ if or .Date .Params.authors .IsTranslated .Site.Params.readingtime .Site.Params.gitFileURL }}
-    <div class="post-metadata">
+    <div class="post-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
        {{ if .Date }}
-            <span class="post-meta-item">
+            <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_date" }}">
                {{ partial "icon.html" "calendar" }}
                <time datetime="{{ .Date.Format "2006-01-02" }}" pubdate>
                    {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}
@ -10,7 +10,7 @@

            {{/* TODO: make this be a tooltip */}}
            {{ if ne (time.Format "2006-01-02" .Lastmod) (time.Format "2006-01-02" .Date) }}
-                <span class="post-meta-item">
+                <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_modified_date" }}">
                    {{ partial "icon.html" "pencil" }}
                    <time datetime="{{ .Lastmod.Format "2006-01-02" }}" pubdate>
                        {{ i18n "long_date" (dict "Date" .Lastmod "Data" .Site.Data) }}
--- a/layouts/partials/post-metadata/series.html
+++ b/layouts/partials/post-metadata/series.html
@ -1,4 +1,4 @@
-<div class="post-metadata">
+<div class="post-metadata" aria-label="{{ i18n "aria_series_metadata" }}">
    <span class="post-meta-item">
        {{ partial "icon.html" "newspaper" }}
        {{ i18n "post_count" (len .Data.Pages) }}
--- a/layouts/partials/post-metadata/short.html
+++ b/layouts/partials/post-metadata/short.html
@ -1,7 +1,7 @@
 {{ if or .Date .Params.authors .IsTranslated .Site.Params.readingtime }}
-    <div class="post-metadata">
+    <div class="post-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
        {{ if .Date }}
-            <span class="post-meta-item">
+            <span class="post-meta-item" aria-label="date">
                {{ partial "icon.html" "calendar" }}
                <time datetime="{{ .Date.Format "2006-01-02" }}" pubdate>
                    {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}
--- a/layouts/partials/rss-link.html
+++ b/layouts/partials/rss-link.html
@ -1,5 +1,5 @@
 <span class="rss-link">
    {{ with .OutputFormats.Get "rss" }}
-        <a href="{{ .Permalink }}" target="_blank" rel="noopener">{{ partial "icon.html" "rss-feed" }}</a>
+        <a href="{{ .Permalink }}" target="_blank" rel="noopener" aria-label="{{ i18n "aria_rss_link" }}">{{ partial "icon.html" "rss-feed" }}</a>
    {{ end }}
 </span>
--- a/layouts/partials/top.html
+++ b/layouts/partials/top.html
@ -3,7 +3,7 @@
 </h2>

 <div class="topbar">
-    <nav class="navbar">
+    <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
        {{ with .Site.Home }}
            <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
        {{ end }}
@ -18,11 +18,11 @@
    </nav>

    {{ if .Site.IsMultiLingual }}
-        <details class="langpicker">
+        <details class="langpicker" aria-label="{{ i18n "aria_langpicker" }}">
            <summary>
                {{- partial "icon.html" "world" -}}
            </summary>
-            <ul class="languages">
+            <ul class="languages" aria-label="{{ i18n "aria_langpicker_list" }}">
                {{ range .AllTranslations }}
                    <li>
                        <a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
@ -41,7 +41,7 @@

                {{ range (.Site.Languages | complement $translation_codes) }}
                    <li>
-                        <a class="langpicker-item unavailable">{{ .LanguageName }}</a>
+                        <a class="langpicker-item unavailable" aria-disabled="true">{{ .LanguageName }}</a>
                    </li>
                {{ end }}
            </ul>