Add skip to main content link (accessibility). Close #24

2020-04-26 15:18:55 +03:00 · 2020-04-26 15:18:55 +03:00 · e05d86f6fe
commit e05d86f6fe
parent f796d328e5
5 changed files with 41 additions and 4 deletions
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -33,3 +33,6 @@ toAllTags:

 toAllCategories:
  other: "to all categories"
+
+skipToContent:
+  other: "skip to main content"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -33,3 +33,6 @@ toAllTags:

 toAllCategories:
  other: "vers toutes les catégories"
+
+skipToContent:
+  other: "passer au contenu principal"
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@ -33,3 +33,6 @@ toAllTags:

 toAllCategories:
  other: "ко списку всех категорий"
+
+skipToContent:
+  other: "перейти к основному контенту"
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,18 +1,19 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ .Site.LanguageCode }}">
 <head>
    {{ block "head" . }}
        {{ partial "head.html" . }}
    {{ end }}
 </head>
 <body>
+    <a class="skip-main" href="#main">{{ i18n "skipToContent" | humanize }}</a>
    <div class="container">
        <header> 
            {{ block "header" . }}
                {{ partial "header.html" . }}
            {{ end }}
        </header>
-        <main>
+        <main id="main" tabindex="-1"> 
            {{ block "main" . }}{{ end }}
        </main>
        <footer>
--- a/static/css/style.css
+++ b/static/css/style.css
@ -39,6 +39,10 @@ summary {
    margin: 0 auto;
 }

+main {
+    outline:none;
+}
+
 /* Headers */
 h1 {
    font-size: 1.35em;
@ -76,6 +80,29 @@ a:active {
    border-bottom: 1px solid rgba(163, 29, 29, .5);
 }

+a.skip-main {
+    left:-999px;
+    position:absolute;
+    top:auto;
+    width:1px;
+    height:1px;
+    overflow:hidden;
+    z-index:-999;
+}
+
+a.skip-main:focus, 
+a.skip-main:active {
+    left: auto;
+    top: 0px;
+    width: auto;
+    height: auto;
+    overflow:auto;
+    z-index:999;
+    padding: 4px 6px 4px 6px;
+    text-decoration: underline;
+    border: none;
+}
+
 /* Table */
 .table-wrapper {
    overflow-x: auto;