Создание действительно работающей ссылки пропуска

Рабочая ссылка для пропуска состоит из двух частей: якоря, который куда-то ведёт, и цели, на которую действительно можно перейти. Нужны обе части.

Якорь — это обычная ссылка, у которой href содержит фрагмент, например решётку и следующий за ней идентификатор. При нажатии браузер понимает, куда перейти.

Цель — это элемент, к которому нужно перейти. Задайте ему соответствующий id, чтобы фрагмент в href указывал на существующий элемент.

Направьте ссылку для пропуска на ориентир main. Это единственная область, содержащая уникальное содержимое страницы, — именно туда пользователи хотят перейти.

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

Решение — позволить фокусу действительно перемещаться туда. Добавьте tabindex, равный минус единице, чтобы цель могла получать фокус от ссылки для пропуска.

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

Сегодня большинство браузеров автоматически переводит фокус на цель фрагмента. Но добавление tabindex минус один гарантирует работу везде, поэтому оставьте его.

Перезагрузите страницу, один раз нажмите Tab, затем Enter. Индикатор фокуса должен перейти к содержимому, а следующее нажатие Tab — продолжить перемещение внутри него. ✅

Назовите ссылку прямо. Перейти к основному содержимому точно сообщает пользователю, что произойдёт, и гораздо лучше расплывчатого «Пропустить» или значка.

Разместите якорь как первый дочерний элемент body, перед заголовком, чтобы Tab достигал его раньше всего остального на странице.

Свяжите якорь с соответствующим id у main, добавьте tabindex минус один и проверьте результат переходами по Tab. Так выглядит действительно рабочая ссылка для пропуска. 🎯