Skip Link

Use the skip link component to help keyboard-only users skip to the main content on a page.

When to use this component

All pages must include a skip link in the header.

How it works

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.

Web accessibility

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:

  • Must be the first focusable element.
  • Redirects to the main content.
<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. */
  • Content:
    a.skiplink {
      @include reset-link-background;
      position: absolute;
      top: -100%;
      left: 0;
      padding: .5rem 2rem;
      background-color: color('white');
      z-index: 999;
    
      &:focus {
        top: 0;
        background-color: color('white');
      }
    }
    
  • URL: /components/raw/skiplink/_skiplink.scss
  • Filesystem Path: components/21-atoms/skiplink/_skiplink.scss
  • Size: 238 Bytes