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

This commit is contained in:
Dmitry Kolosov 2020-04-26 15:18:55 +03:00
parent f796d328e5
commit e05d86f6fe
5 changed files with 41 additions and 4 deletions

View File

@ -33,3 +33,6 @@ toAllTags:
toAllCategories:
other: "to all categories"
skipToContent:
other: "skip to main content"

View File

@ -33,3 +33,6 @@ toAllTags:
toAllCategories:
other: "vers toutes les catégories"
skipToContent:
other: "passer au contenu principal"

View File

@ -33,3 +33,6 @@ toAllTags:
toAllCategories:
other: "ко списку всех категорий"
skipToContent:
other: "перейти к основному контенту"

View File

@ -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>

View File

@ -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;