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

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

## Основные данные&#x20;

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

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

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

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

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

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

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

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

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

### Screenreader

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

## Код

Элемент:

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

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

Стиль:

```scss

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

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

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