`banner`

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

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

Кратко

Скопировано

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

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

Пример

Скопировано

        
          
          <div class="header" role="banner">  <span>Мир тапиров</span></div><main>  <h1>Сайт о тапирах</h1>  <p>Полотно текста о тапирах.</p></main>
          <div class="header" role="banner">
  <span>Мир тапиров</span>
</div>
<main>
  <h1>Сайт о тапирах</h1>
  <p>Полотно текста о тапирах.</p>
</main>

Открыть демо в новой вкладке

Скринридер не расскажет о роли такой области, но у пользователя появится возможность быстро перейти к хедеру с помощью специальных клавиш.

Как пишется

Скопировано

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

Хедер может быть как у страницы, так и у отдельных элементов на ней — <article> и <main>. Когда внутрь этих тегов вложен <header>, скринридер не считает их ориентирами. Так что роль banner есть только у хедера, который напрямую вложен в <body>.

У страницы может быть только один ориентир banner. При этом хедер из <iframe>, если встраиваете на текущую страницу другую, не попадает в список ориентиров.

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

aria-label для невидимой подписи (краткого названия) к области хедера;
aria-labelledby, когда у banner есть видимая подпись.

Пример с хедером, который назван через aria-label:

        
          
          <header aria-label="Главный">  <!-- Содержимое хедера сайта --></header>
          <header aria-label="Главный">
  <!-- Содержимое хедера сайта -->
</header>

Пример хедера с aria-labelledby:

        
          
          <header aria-labelledby="label">  <span id="label">Каталог товаров</span>  <!-- Остальное содержимое хедера --></header>
          <header aria-labelledby="label">
  <span id="label">Каталог товаров</span>
  <!-- Остальное содержимое хедера -->
</header>

Как понять

Скопировано

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

На практике

Скопировано

Татьяна Фокина советует

Скопировано

В Safari до 17 версии был баг, из-за которого у всех элементов <header> со страницы вычислялась роль banner.

        
          
          <header>  <!-- Элементы хедера сайта --></header><main>  <article>    <header>      <!-- Содержимое хедера article -->    </header>    <!-- Какой-то текст -->  </article></main>
          <header>
  <!-- Элементы хедера сайта -->
</header>
<main>
  <article>
    <header>
      <!-- Содержимое хедера article -->
    </header>
    <!-- Какой-то текст -->
  </article>
</main>

Из-за этого в списке ориентиров накапливалось приличное количество banner.

Кратко

Пример

Как пишется

Как понять

На практике

Татьяна Фокина советует

Читайте также

contentinfo

ARIA-роли

<header>

`contentinfo`

`<header>`