navigation

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

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

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

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

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

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

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

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

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

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