From 8333eceb0d6c804300e475dd03bcbb9cd3aa2dfd Mon Sep 17 00:00:00 2001 From: Jeremy Prevost Date: Sat, 10 Sep 2022 19:51:18 -0400 Subject: [PATCH] Provide ability to skip to main content (#949) 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/ --- _layouts/default.html | 1 + _sass/modules.scss | 1 + _sass/skiptomain.scss | 30 ++++++++++++++++++++++++++++++ 3 files changed, 32 insertions(+) create mode 100644 _sass/skiptomain.scss diff --git a/_layouts/default.html b/_layouts/default.html index 6cebe98..2fb293e 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -7,6 +7,7 @@ layout: table_wrappers {% include head.html %} + Skip to main content Link diff --git a/_sass/modules.scss b/_sass/modules.scss index f3ffb61..ee282e7 100644 --- a/_sass/modules.scss +++ b/_sass/modules.scss @@ -14,3 +14,4 @@ @import "./code"; @import "./utilities/utilities"; @import "./print"; +@import "./skiptomain"; diff --git a/_sass/skiptomain.scss b/_sass/skiptomain.scss new file mode 100644 index 0000000..7c14f05 --- /dev/null +++ b/_sass/skiptomain.scss @@ -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; +}