Ссылка пропуска меню: быстрый переход к статье

Назначение

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

Как это работает

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

Пример

<style>.skip{position:absolute;left:8px;top:-100px;background:white;color:#123;padding:12px;z-index:10}.skip:focus{top:8px}</style>
<a class="skip" href="#content">К содержанию</a><nav aria-label="Основное меню">Разделы сайта</nav><main id="content" tabindex="-1"><h2>Основная статья</h2><p>Начало материала.</p></main>

Что должно получиться

Первая ссылка становится видимой при фокусе и ведёт в основную область. Проверять окончательный перенос фокуса нужно в используемых браузерах и вспомогательных технологиях.

Граница применения и частая ошибка

Не скрывайте ссылку через display:none: она исчезнет из навигации. И не направляйте её на отсутствующий id, иначе первый же полезный переход окажется нерабочим.

Самостоятельная проверка

Нажмите Tab сразу после загрузки собственной страницы. Убедитесь, что ссылка видна, Enter ведёт к main, а дальнейшая навигация продолжает работу с основной областью.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• CSS Grid
• Flexbox
• Адаптивная проверка