syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
i18n/en.yaml
View File

@ -32,4 +32,7 @@ toAllTags:
other: "to all tags" other: "to all tags"
toAllCategories: toAllCategories:
other: "to all categories" other: "to all categories"
skipToContent:
other: "skip to main content"

3
i18n/fr.yaml
View File

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

5
i18n/ru.yaml
View File

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

5
layouts/_default/baseof.html
View File

@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="{{ .Site.LanguageCode }}">
<head> <head>
{{ block "head" . }} {{ block "head" . }}
{{ partial "head.html" . }} {{ partial "head.html" . }}
{{ end }} {{ end }}
</head> </head>
<body> <body>
<a class="skip-main" href="#main">{{ i18n "skipToContent" | humanize }}</a>
<div class="container"> <div class="container">
<header> <header>
{{ block "header" . }} {{ block "header" . }}
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ end }} {{ end }}
</header> </header>
<main> <main id="main" tabindex="-1">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
<footer> <footer>

27
static/css/style.css
View File

@ -39,6 +39,10 @@ summary {
margin: 0 auto; margin: 0 auto;
} }
main {
outline:none;
}
/* Headers */ /* Headers */
h1 { h1 {
font-size: 1.35em; font-size: 1.35em;
@ -76,6 +80,29 @@ a:active {
border-bottom: 1px solid rgba(163, 29, 29, .5); 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 */
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: auto;