Пропустить навигацию

Ссылка, которая позволяет пользователям клавиатуры пропускать длинные блоки навигации.

Основные данные

Основной ресурс откуда взята информация - https://ebay.gitbook.io/mindpatterns/navigation/skip-navigation

Шаблон пропуска навигации чаще всего используется, чтобы пропустить основную навигацию по сайту и перейти к основному содержимому. Его можно использовать и в других сценариях; например, пропуская все ссылки внутри карусели.

Лучшая практика

Ссылка должна установить фокус клавиатуры на целевом элементе при активации.

Ссылка должна быть скрыта от просмотра до тех пор, пока она не будет сфокусирована с помощью клавиатуры.

Интерактивный дизайн

Управление клавиатурой

Активация ссылки пропуска перемещает фокус клавиатуры на основное содержимое.

После активации ссылки пропуска нажатие клавиши TAB перемещает фокус клавиатуры на первый интерактивный элемент после основного содержимого и восстанавливает индикатор фокуса. Как правило это основная навигация.

Screenreader

Активация ссылки пропуска перемещает виртуальный курсор к основному содержимому, и программа чтения с экрана объявит содержимое этого элемента. После активации ссылки пропуска перемещение виртуального курсора программы чтения с экрана вперед приведет к перемещению виртуального курсора к следующему элементу после основного содержимого.

Код

Элемент:

<a class="skip-nav-link" href="#main-content">Пропустить навигацию</a>

Так же необходимо установить "якорь" на элемент к которому будет осуществлен переход.

Стиль:

.skip-nav-link {
   position: absolute;
   transform: translateY(-120%);
   left: rem(5);
   transition: transform 300ms ease-in;

   &:focus {
      transform: translateY(0);
   }
}

Основная идея заключается в том, чтобы скрыть этот элемент со страницы и показывать только в случае, когда на него переходят с клавиатуры.