Include a skip to main content mechanism

Applicable Role(s): Developer

Overview

Users that navigate by keyboard need a way to quickly jump over repeated sections of the content like headers and navigation. Adding a skip to main content link helps users get to the main content quicker, with less fatigue and frustration.

Best Practices

  • The skip to main content link should be the first focusable element on the page.
  • The skip link should either be always visible, or visible on keyboard focus.

Pattern Examples

On Western sites, the skip link is visible on focus:

Skip to main content on focus above the Western logo

Code

The skip link goes to the element with the matching ID, in this case the main content.

Version 1

<body>
<a href="#main-content" 
class="visually-hidden focusable">
Skip to main content
</a>
...
<main id="main-content">
...
</body>

Version 2

<body>
<header>
<a href="#main-content" 
class="visually-hidden focusable">
Skip to main content
</a>
...
</header>
...
<main id="main-content">
...
</body>

Putting the skip link within the header will nest it in a landmark, which makes it detectable to people navigating by landmark.

Styles for skip link visible on focus

These styles are based on the visually-hidden class.

.focusable:focus {
  position: absolute !important;
  z-index: 3;
  top: 0;
  left: 12px;
  clip: initial;
  width: inherit;
  height: inherit;
  /* other styles as needed */
}