/ ↲
    Расширенный поиск

    Доступность

    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.

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