Скип-линк (Skip link)

Скип линк — элемент навигации, который позволяет перейти к контенту с помощью клавиатуры.

Пользователи иногда перемещаются по сайту через нажатие Tab, и с помощью скип-линка можно сразу переместиться к контенту.

Скип-линк обычно скрыта от пользователей, и становится активной только тогда, когда она попадает в фокус после нажатия Tab.

Добавляется скип-линк в самом начале страницы:

<a class="skip-link" href="#main">Перейти к контенту</a>

И оформить через CSS:

.skip-link {
  transform: translateY(-100%);
}

.skip-link {
  transform: translateY(20%);
}

Здесь стоит обратить внимание, что скип-линк скрывается через translateY. Это из-за того, что если скрыть скип-линк через display: none, то скинридеры будут её игнорировать.