_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>
This commit is contained in:
Родитель
647c4b2c5a
Коммит
3335334ecb
|
@ -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%;
|
||||
|
|
|
@ -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">
|
||||
|
|
Загрузка…
Ссылка в новой задаче