bbaovanc
/
bobatheme
mirror of https://github.com/BBaoVanC/bobatheme.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add "Skip to main content" tab-focusable button 

- https://webaim.org/techniques/skipnav/
- https://css-tricks.com/how-to-create-a-skip-to-content-link/
This commit is contained in:
BBaoVanC 2023-10-21 20:21:26 -05:00
parent 0e930f7ae1
commit 12c6efc0fe
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/bobastyle.css
View File

@ -378,6 +378,22 @@ h1 svg.icon {
}
/* }}} */
/* Skip to main content {{{ */
#skip-to-main {
position: absolute;
padding: 8px;
background-color: var(--text-0);
color: var(--background-0);
transform: translateY(-100%);
}
#skip-to-main:focus {
transform: translateY(0%);
}
#main-content:target {
animation: none; /* prevent it from turning yellow */
}
/* }}} */
/* Breadcrumb navigation {{{ */
.breadcrumb {

3
layouts/_default/baseof.html
View File

@ -5,6 +5,7 @@
<body>
<a id="top" aria-hidden="true"></a>
<a id="skip-to-main" href="#main-content">Skip to main content</a>
<a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
{{ partial "icon.html" "chevron-up" }}
@ -24,7 +25,7 @@
{{ partial "breadcrumb.html" . }}
{{ end }}
<main>
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }}