steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-24 03:52:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Provide ability to skip to main content (#949)

Browse Source 
Why are these changes being introduced:

* The current tab order requires keyboard or screenreader users to tab
  though all of the navigation links before they get to the main content
  of the page

Relevant ticket(s):

* Discussed as part of larger WCAG ticket https://github.com/just-the-docs/just-the-docs/issues/566

How does this address that need:

* Introduces an off screen link as the first element in the tab order
  that will display when it has focus but remain off screen for users
  not using tab to navigate the document.
* Introduces a new scss file with the required style elements and uses
  colors variables to ensure both light and dark mode are respected.

Background information on this technique:

- https://www.w3.org/TR/WCAG20-TECHS/G1.html
- https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
This commit is contained in:
Jeremy Prevost 2022-09-10 19:51:18 -04:00 committed by GitHub
parent 9d720eb092
commit 8333eceb0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_layouts/default.html
View File

@ -7,6 +7,7 @@ layout: table_wrappers
<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-link" viewBox="0 0 24 24">
<title>Link</title>

1
_sass/modules.scss
View File

@ -14,3 +14,4 @@
@import "./code";
@import "./utilities/utilities";
@import "./print";
@import "./skiptomain";

30
_sass/skiptomain.scss Normal file
View File

@ -0,0 +1,30 @@
// Skipnav
// Skip to main content
a.skip-to-main {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -999;
}
a.skip-to-main:focus,
a.skip-to-main:active {
color: $link-color;
background-color: $body-background-color;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow: auto;
margin: 10px 35%;
padding: 5px;
border-radius: 15px;
border: 4px solid $btn-primary-color;
text-align: center;
font-size: 1.2em;
z-index: 999;
}