Как сделать ссылку «Перейти к содержимому»

Короткий ответ

Первой на странице поставьте ссылку на основное содержимое и показывайте её только при фокусе. Щёлкните по примеру и нажмите 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>

Зачем это нужно

Человек, который пользуется клавиатурой, на каждой странице проходит Tab'ом через логотип, меню и поиск, прежде чем добраться до текста. Ссылка-пропуск сразу переносит его к главному. Мышью ею никто не пользуется, поэтому она спрятана, пока не получит фокус.

tabindex у main

tabindex="-1" позволяет переместить фокус на <main> после перехода по ссылке. Тогда следующее нажатие Tab продолжит обход с основного содержимого, а не с начала меню.

Частая ошибка

Ссылку прячут через display: none или visibility: hidden. Так она пропадает и из порядка Tab — получить фокус и появиться уже не может. Прячьте её сдвигом за край экрана, как в примере, или классом для визуального скрытия, который снимается при :focus.