How to add a Skip to content link

Short answer

Put a link to the main content first on the page and show it only on focus. Click the example and press Tab:

<style>
  .skip { position: absolute; left: 8px; top: -40px; padding: 6px 12px; background: black; color: white; }
  .skip:focus { top: 8px; }
</style>
 
<a class="skip" href="#main">Skip to content</a>
<nav><a href="#">Home</a> · <a href="#">Catalog</a> · <a href="#">Blog</a> · <a href="#">Contacts</a></nav>
<main id="main" tabindex="-1">
  <h1>Main content</h1>
</main>

Why it is needed

A keyboard user tabs through the logo, the menu and the search on every page before reaching the text. A skip link takes them straight to the main part. Nobody uses it with a mouse, so it is hidden until it gets focus.

tabindex on main

tabindex="-1" lets focus move to <main> after following the link. Then the next Tab press continues from the main content rather than from the start of the menu.

Common mistake

The link is hidden with display: none or visibility: hidden. That removes it from the Tab order too — it can no longer get focus and appear. Hide it by moving it off the screen edge, as in the example, or with a visually-hidden class that is removed on :focus.