City of Ghent Style Guide

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.

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. */
  • Content: 
    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');
  }
}
  • URL: /components/raw/skiplink/_skiplink.scss
  • Filesystem Path: components/21-atoms/skiplink/_skiplink.scss
  • Size: 268 Bytes