Роля Ориентир

`banner`

Ориентирът за хедъра на целия сайт — обикновено съдържа логото, основната навигация и търсачката. Елементът <header> от най-горно ниво носи тази роля автоматично. На една страница може да има само един banner.

Кога да се използва

Използвайте <header> като пряк наследник на <body> (или <html> в откъслечен фрагмент от най-горно ниво). Когато <header> е на най-горно ниво, браузърът го представя автоматично като ориентир banner. Когато <header> е вложен в <article>, <section>, <main> или <aside>, той е просто обща група, а не ориентир.

role="banner" върху <div> е уместно само когато <header> не може да се използва — например в CMS, който премахва тагове за ориентири.

На една страница не трябва да има повече от един banner. Ако имате втори хедър, който не е банерът на сайта (заглавие на раздел, заглавие на нишка с коментари), използвайте обикновен <header>, вложен в съответния раздел, а не на най-горно ниво.

Кога да се добавя етикет

Ако страницата има множество ориентири от един и същ тип (рядко при banner, по-често при навигация), добавете aria-label, за да ги разграничите. Единичен banner не се нуждае от етикет — екранните четци го обявяват като „banner”.

Чести грешки

Множество елементи <header> в горната част на страницата, всеки от които се превръща в ориентир banner. Потребителите на екранни четци виждат два записа „banner” в менюто с ориентири и не могат да разберат кой е истинският хедър.
role="banner" върху <header>, вложен в <main> или <article>. Ролята замества поведението по подразбиране (без ориентир) и замърсява навигацията по ориентири.
Лого на сайта, поставено извън <header>, така че остава извън ориентира banner.
Залепена навигация, изобразена като отделен <div role="banner"> до оригиналния <header> — два банера.
Banner с празно съдържание (само декоративни рамки) — ориентирът все пак се появява в навигацията на екранния четец, но не съдържа нищо.

Пример

<body>
  <header>
    <a href="/" aria-label="Disability World home">
      <img src="/logo.svg" alt="">
    </a>
    <nav aria-label="Primary">
      <a href="/bg/toolkit/">Toolkit</a>
      <a href="/library/">Library</a>
    </nav>
  </header>
  <main>…</main>
</body>