diff options
| -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"> |