_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>
diff --git a/_content/css/styles.css b/_content/css/styles.css
index 71f49c3..90f5acb 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -563,6 +563,21 @@
.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 975faf8..fd9643a 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">
