Use the skip link component to help keyboard-only users skip to the main content on a page.
All pages must include a skip link in the header.
Some people rely on keyboards to access a web page and to navigate through the links and elements on a web page.
Including the skip link component gives those users the option to bypass the top-level navigation links and jump to the main content on a page.
The skip link component is visually hidden until a keyboard press activates it.
Including a skip link on every page is a requirement for web accessibility:
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple web pages. (Level A)
The skiplink:
<a href="#main-content" class="skiplink">
Skip to main content
</a>
<a href="#main-content" class="skiplink">
Skip to main content
</a>
/* No context defined for this component. */
a.skiplink {
@include reset-link-background;
position: absolute;
bottom: 100%;
left: 0;
padding: .5rem 2rem;
background-color: color('white');
z-index: z('skiplink');
&:focus {
top: 0;
bottom: auto;
background-color: color('white');
}
}