banner

ARIA-роль ориентира, которая определяет область хедера или «шапки» сайта. Обычно в хедере размещается название компании, логотип, навигация по сайту, поиск и другой похожий контент.

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

        
          
          <div role="banner">  <img src="logo.svg" alt="Подушколандия">  <nav>    <ul>      <li>        <a href="/history/">История подушек</a>      </li>      <li>        <a href="/catalog/">Каталог подушек</a>      </li>    </ul>  </nav></div>
          <div role="banner">
  <img src="logo.svg" alt="Подушколандия">
  <nav>
    <ul>
      <li>
        <a href="/history/">История подушек</a>
      </li>
      <li>
        <a href="/catalog/">Каталог подушек</a>
      </li>
    </ul>
  </nav>
</div>

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

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

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

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

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