«Перейти к основному содержимому» – это распространенная функция специальных возможностей, реализованная на веб-сайтах, которая помогает пользователям клавиатуры быстро перемещаться по повторяющимся элементам, таким как панели навигации, и напрямую получать доступ к основному содержимому веб-страницы. Вот несколько способов добиться этого:

1. Якорные ссылки HTML. Включив якорную ссылку в начале раздела основного контента и предоставив соответствующую ссылку «Перейти к основному содержимому» вверху страницы, пользователи могут щелкнуть ссылку, чтобы перейти напрямую. в нужный раздел.

Пример:

<a href="#main-content">Skip to main content</a>
...
<main id="main-content">
   <!-- Main content goes here -->
</main>

2. Атрибут tabindex: используйте атрибут tabindex, чтобы сделать основной контент доступным для фокусировки и позволить пользователям переходить к нему с помощью клавиатуры. Это можно сделать, установив tabindex="0"в основном элементе контента.

Пример:

<a href="#main-content" tabindex="0">Skip to main content</a>
...
<main id="main-content" tabindex="0">
   <!-- Main content goes here -->
</main>

3. JavaScript/jQuery: вы можете использовать JavaScript или jQuery, чтобы добавить прослушиватели событий к ссылке «Перейти к основному содержимому», что позволит плавно прокручивать ее до раздела основного содержимого при нажатии. Этот метод обеспечивает более интерактивный опыт.

Пример (jQuery):

<a href="#" id="skip-link">Skip to main content</a>
...
<main id="main-content">
   <!-- Main content goes here -->
</main>
<script>
   $(document).ready(function() {
      $('#skip-link').click(function(e) {
         e.preventDefault();
         $('html, body').animate({
            scrollTop: $('#main-content').offset().top
         }, 500);
      });
   });
</script>