diff options
| author | prudhvikrishna <prudhvikrishna@google.com> | 2023-07-11 14:29:35 -0700 |
|---|---|---|
| committer | Gopher Robot <gobot@golang.org> | 2023-07-17 21:18:10 +0000 |
| commit | 3335334ecbb3f577d02eb646eb05bfbbb1ae9fc2 (patch) | |
| tree | 30f1503a84011c4d81b03c627c31993f163e5072 /_content | |
| parent | 647c4b2c5ac6204d03a40c19f7ec23ccd272caea (diff) | |
| download | go-x-website-3335334ecbb3f577d02eb646eb05bfbbb1ae9fc2.tar.xz | |
_content: provide skiplink to go website
added skiplink to skip over the navigation and header elements of the
page and go directly to the main content.
https://screencast.googleplex.com/cast/NjUzMzAxNTk2MzQzNTAwOHxmYjc5NGE4OS1iMQ
Change-Id: I58271abacfcd80a2e996e83c6ad7611711989e92
Reviewed-on: https://go-review.googlesource.com/c/website/+/508975
Auto-Submit: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>
Diffstat (limited to '_content')
| -rw-r--r-- | _content/css/styles.css | 15 | ||||
| -rw-r--r-- | _content/site.tmpl | 5 |
2 files changed, 19 insertions, 1 deletions
diff --git a/_content/css/styles.css b/_content/css/styles.css index 71f49c38..90f5acbd 100644 --- a/_content/css/styles.css +++ b/_content/css/styles.css @@ -563,6 +563,21 @@ a.Footer-link--primary { .Header-navOpen--white { background: no-repeat center/2rem url('/images/menu-24px-white.svg'); } +.skip-to-content-link { + background: var(--color-background); + border-radius: 6px; + color: var(--color-text); + font-weight: 500; + margin: 5px; + position: absolute; + overflow: hidden; + top: 12px; + clip: rect(0 0 0 0); + left: 8%; +} +.skip-to-content-link:focus { + clip: unset; +} .NavigationDrawer { background: var(--color-background); height: 100%; diff --git a/_content/site.tmpl b/_content/site.tmpl index 975faf89..fd9643ab 100644 --- a/_content/site.tmpl +++ b/_content/site.tmpl @@ -60,6 +60,9 @@ src="/images/go-logo-white.svg" alt="Go"> </a> + <div class="skip-navigation-wrapper"> + <a class="skip-to-content-link" aria-label="Skip to main content" href="#main-content"> Skip to Main Content </a> + </div> <div class="Header-rightContent"> <ul class="Header-menu"> {{- $currentPage := .}} @@ -173,7 +176,7 @@ </nav> </aside> <div class="NavigationDrawer-scrim js-scrim" role="presentation"></div> -<main class="SiteContent SiteContent--default"> +<main class="SiteContent SiteContent--default" id="main-content"> {{block "layout" .}}{{.Content}}{{end}} </main> <footer class="Site-footer"> |