Skip to main content

Show link to main content on first tab to allow keyboard users to skip to main content quickly.

<a class="skip-to-content" href="#skip-to-content">Skip to main content</a>
<main id="skip-to-content" tabindex="-1"></main>

a.skip-to-content {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  transform: translateY(-50px);
}
a.skip-to-content:active, 
a.skip-to-content:focus, 
a.skip-to-content:hover {
  transform: translateY(0);
}

More links

• Explanation
• More with JS