banner

Как добавить ориентир для хедера страницы.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

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 создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню с ориентирами.