_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 <[email protected]>
Reviewed-by: Jamal Carvalho <[email protected]>
Run-TryBot: Jamal Carvalho <[email protected]>
TryBot-Result: Gopher Robot <[email protected]>

Author: prudhvikrishna

_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%;

_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">