Основная и дополнительная навигация на сайте

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

Основная и дополнительные навигации служат для перехода по страницам сайта или на внешний ресурс.

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

Навигация должна передавать информацию что вы находитесь на этой странице.

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

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

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

Взаимодействие с хлебными крошками похоже на простой список упорядоченных ссылок.

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

Клавиша TABпозволяет перейти от навигационной крошки к навигационной крошке.

Символы-разделители не должны фокусироваться с клавиатуры.

Screenreader

Каждая навигационная цепочка будет объявлена ​​как «ссылка», за которой следует текст ссылки.

Программа чтения с экрана должна игнорировать каждый значок разделителя.

Код

Пример основной навигации:

<nav class="main-nav" aria-label="Главная навигация">
   <ul class="nav__box" role="list" id="navigation" >
      <li><a class="nav__item" href="#" aria-current="page">Cсылка 1</a></li>
      <li><a class="nav__item" href="#">Cсылка 2</a></li>
      <li><a class="nav__item" href="#">Cсылка 3</a></li>
      <li><a class="nav__item" href="#">Cсылка 4</a></li>
   </ul>
</nav>

Пример дополнительной навигации:

<nav class="main-nav"  aria-label="Дополнительная навигация">
   <dt>Краткое описание к блоку 1</dt>
   <dd>
      <ul class="nav__box" role="list">
         <li><a class="nav__item" href="#">Twitter</a></li>
         <li><a class="nav__item" href="#">VK</a></li>
         <li><a class="nav__item" href="#">Instagram</a></li>
      </ul>
   </dd>
   <dt>Краткое описание к блоку 2</dt>
   <dd>
      <ul class="nav__box" role="list">
         <li><a class="nav__item" href="#">Twitter</a></li>
         <li><a class="nav__item" href="#">VK</a></li>
         <li><a class="nav__item" href="#">Instagram</a></li>
      </ul>
   </dd>
</nav>

ARIA

• aria-label: создает описание, которое будет озвучено АТ;

• aria-current="page": указывает что пользователь находится на текущей странице.

• role=list: создает ориентир для AT, что это группа записей объединённая в список.