navigation

ARIA-роль ориентира, которая определяет область с навигацией по сайту.

Роль navigation есть у <nav> по умолчанию.

        
          
          <div role="navigation">  <ul>    <li>      <a href="#tapirs-life">Где обитают тапиры</a>    </li>    <li>      <a href="#tapirs-food">Как питаются тапиры</a>    </li>  </ul></div>
          <div role="navigation">
  <ul>
    <li>
      <a href="#tapirs-life">Где обитают тапиры</a>
    </li>
    <li>
      <a href="#tapirs-food">Как питаются тапиры</a>
    </li>
  </ul>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридеры прочитают демку примерно так: «Навигация, ориентир. Список, три пункта». Также пользователи смогут переместиться к навигации через специальный список со всеми ориентирами.

Добавьте к тегу role="navigation". Лучше, чтобы это были семантически нейтральные <div> или <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

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

В большинстве случаев лучше использовать <nav> вместо роли navigation.

Если на странице несколько <nav> или элементов с ролью navigation, каждому стоит задать своё уникальное имя с помощью aria-label. Однако, когда на странице несколько навигаций с одинаковым набором ссылок, задайте им одинаковое имя. Когда на странице две навигации с одинаковым именем, пользователь поймёт, что в них одинаковые ссылки и можно выбрать любую.

Для элемента с ролью navigation можно использовать все глобальные ARIA-атрибуты.

Роль navigation создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню с ориентирами.