Improve accessibility

This commit is contained in:
BBaoVanC 2021-11-23 19:06:26 -06:00
parent 1380558384
commit 43d406c4fe
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
18 changed files with 90 additions and 30 deletions

View File

@ -39,3 +39,67 @@ older_post:
newer_post: newer_post:
other: "Newer" 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"

View File

@ -1,7 +1,7 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="section-header"> <h{{ .Level }} id="{{ .Anchor | safeURL }}" class="section-header">
{{ .Text | safeHTML }} {{ .Text | safeHTML }}
<a href="#{{ .Anchor | safeURL }}"> <a href="#{{ .Anchor | safeURL }}">
<span class="section-header-link"> <span class="section-header-link" aria-label="{{ i18n "aria_header_link" }}">
{{ partial "icon.html" "link" }} {{ partial "icon.html" "link" }}
</span> </span>
</a> </a>

View File

@ -4,7 +4,7 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
<a id="top"></a> <a id="top" aria-hidden="true"></a>
<div class="top"> <div class="top">
{{ partial "top.html" . }} {{ partial "top.html" . }}
@ -29,7 +29,7 @@
</footer> </footer>
{{ end }} {{ 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" }} {{ partial "icon.html" "chevron-up" }}
</a> </a>
<noscript> <noscript>

View File

@ -2,11 +2,7 @@
<h1> <h1>
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }} {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }} {{ .Title | markdownify }}
<span class="rss-link"> {{ partial "rss-link.html" . }}
{{ with .OutputFormats.Get "rss" }}
<a href="{{ .Permalink }}" target="_blank" rel="noopener">{{ partial "icon.html" "rss-feed" }}</a>
{{ end }}
</span>
</h1> </h1>
<div class="list-page-content"> <div class="list-page-content">

View File

@ -28,7 +28,7 @@
{{ if .Params.Toc }} {{ if .Params.Toc }}
<div class="table-of-contents"> <div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
<details> <details>
<summary>{{ i18n "table_of_contents" }}</summary> <summary>{{ i18n "table_of_contents" }}</summary>
{{ .TableOfContents }} {{ .TableOfContents }}

View File

@ -1,4 +1,4 @@
<nav class="breadcrumb"> <nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
<ul> <ul>
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }} {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ul> </ul>

View File

@ -1,5 +1,5 @@
{{ with .Params.authors }} {{ 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" }} {{ partial "icon.html" "user-circle" }}
{{ if index $.Site.Taxonomies "authors" }} {{ if index $.Site.Taxonomies "authors" }}

View File

@ -1,5 +1,5 @@
{{ if ne .Site.Params.readingtime false }} {{ 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" }} {{ partial "icon.html" "clock" }}
{{ i18n "readingtime" .ReadingTime }} {{ i18n "readingtime" .ReadingTime }}
</span> </span>

View File

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

View File

@ -4,7 +4,7 @@
{{ $tags = $tags | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }} {{ $tags = $tags | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
{{ end }} {{ end }}
<div class="tags"> <div class="tags" aria-label="{{ i18n "aria_post_meta_tags" }}">
{{ partial "icon.html" "tag" }} {{ partial "icon.html" "tag" }}
{{ delimit $tags ", " }} {{ delimit $tags ", " }}
</div> </div>

View File

@ -1,5 +1,5 @@
{{ if .IsTranslated }} {{ if .IsTranslated }}
<span class="post-meta-item"> <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_translations" }}">
{{ partial "icon.html" "world" }} {{ partial "icon.html" "world" }}
{{ range .Translations }} {{ range .Translations }}
<a href="{{ .Permalink }}">{{ .Language }}</a> <a href="{{ .Permalink }}">{{ .Language }}</a>

View File

@ -1,5 +1,5 @@
{{ if and .Site.Params.gitFileURL .File.Path }} {{ 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 }} {{ with .Site.Params.gitFileIcon }}
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
{{ else }} {{ else }}

View File

@ -1,16 +1,16 @@
<div class="post-metadata"> <div class="post-metadata" aria-label="{{ i18n "aria_author_metadata" }}">
{{/* Calculate the total word count */}} {{/* Calculate the total word count */}}
{{ $total_words := 0 }} {{ $total_words := 0 }}
{{ range .Data.Pages }} {{ range .Data.Pages }}
{{ $total_words = add $total_words .WordCount }} {{ $total_words = add $total_words .WordCount }}
{{ end }} {{ end }}
<span class="post-meta-item"> <span class="post-meta-item" aria-label="{{ i18n "aria_author_post_count" }}">
{{ partial "icon.html" "newspaper" }} {{ partial "icon.html" "newspaper" }}
{{ i18n "post_count" (len .Data.Pages) }} {{ i18n "post_count" (len .Data.Pages) }}
</span> </span>
<span class="post-meta-item"> <span class="post-meta-item" aria-label="{{ i18n "aria_author_word_count" }}">
{{ partial "icon.html" "align-left" }} {{ partial "icon.html" "align-left" }}
{{ i18n "wordcount" $total_words }} {{ i18n "wordcount" $total_words }}
</span> </span>

View File

@ -1,7 +1,7 @@
{{ if or .Date .Params.authors .IsTranslated .Site.Params.readingtime .Site.Params.gitFileURL }} {{ 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 }} {{ if .Date }}
<span class="post-meta-item"> <span class="post-meta-item" aria-label="{{ i18n "aria_post_meta_date" }}">
{{ partial "icon.html" "calendar" }} {{ partial "icon.html" "calendar" }}
<time datetime="{{ .Date.Format "2006-01-02" }}" pubdate> <time datetime="{{ .Date.Format "2006-01-02" }}" pubdate>
{{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }} {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}
@ -10,7 +10,7 @@
{{/* TODO: make this be a tooltip */}} {{/* TODO: make this be a tooltip */}}
{{ if ne (time.Format "2006-01-02" .Lastmod) (time.Format "2006-01-02" .Date) }} {{ 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" }} {{ partial "icon.html" "pencil" }}
<time datetime="{{ .Lastmod.Format "2006-01-02" }}" pubdate> <time datetime="{{ .Lastmod.Format "2006-01-02" }}" pubdate>
{{ i18n "long_date" (dict "Date" .Lastmod "Data" .Site.Data) }} {{ i18n "long_date" (dict "Date" .Lastmod "Data" .Site.Data) }}

View File

@ -1,4 +1,4 @@
<div class="post-metadata"> <div class="post-metadata" aria-label="{{ i18n "aria_series_metadata" }}">
<span class="post-meta-item"> <span class="post-meta-item">
{{ partial "icon.html" "newspaper" }} {{ partial "icon.html" "newspaper" }}
{{ i18n "post_count" (len .Data.Pages) }} {{ i18n "post_count" (len .Data.Pages) }}

View File

@ -1,7 +1,7 @@
{{ if or .Date .Params.authors .IsTranslated .Site.Params.readingtime }} {{ 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 }} {{ if .Date }}
<span class="post-meta-item"> <span class="post-meta-item" aria-label="date">
{{ partial "icon.html" "calendar" }} {{ partial "icon.html" "calendar" }}
<time datetime="{{ .Date.Format "2006-01-02" }}" pubdate> <time datetime="{{ .Date.Format "2006-01-02" }}" pubdate>
{{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }} {{ i18n "long_date" (dict "Date" .Date "Data" .Site.Data) }}

View File

@ -1,5 +1,5 @@
<span class="rss-link"> <span class="rss-link">
{{ with .OutputFormats.Get "rss" }} {{ 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 }} {{ end }}
</span> </span>

View File

@ -3,7 +3,7 @@
</h2> </h2>
<div class="topbar"> <div class="topbar">
<nav class="navbar"> <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
{{ with .Site.Home }} {{ with .Site.Home }}
<a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a> <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
{{ end }} {{ end }}
@ -18,11 +18,11 @@
</nav> </nav>
{{ if .Site.IsMultiLingual }} {{ if .Site.IsMultiLingual }}
<details class="langpicker"> <details class="langpicker" aria-label="{{ i18n "aria_langpicker" }}">
<summary> <summary>
{{- partial "icon.html" "world" -}} {{- partial "icon.html" "world" -}}
</summary> </summary>
<ul class="languages"> <ul class="languages" aria-label="{{ i18n "aria_langpicker_list" }}">
{{ range .AllTranslations }} {{ range .AllTranslations }}
<li> <li>
<a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a> <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) }} {{ range (.Site.Languages | complement $translation_codes) }}
<li> <li>
<a class="langpicker-item unavailable">{{ .LanguageName }}</a> <a class="langpicker-item unavailable" aria-disabled="true">{{ .LanguageName }}</a>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>