Rola Punkt orientacyjny

`banner`

Punkt orientacyjny nagłówka całej witryny — zazwyczaj zawiera logo, główną nawigację i wyszukiwarkę. Element <header> na najwyższym poziomie automatycznie przyjmuje tę rolę. Na jednej stronie może być tylko jeden banner.

Kiedy używać

Używaj <header> jako bezpośredniego potomka <body> (lub <html> w górnopoziomowym fragmencie). Gdy <header> jest na najwyższym poziomie, przeglądarka automatycznie eksponuje go jako punkt orientacyjny banner. Gdy <header> jest zagnieżdżony wewnątrz <article>, <section>, <main> lub <aside>, jest jedynie zwykłą grupą, a nie punktem orientacyjnym.

role="banner" na <div> jest właściwe tylko wtedy, gdy nie możesz użyć <header> — na przykład w CMS-ie, który usuwa tagi punktów orientacyjnych.

Na stronie może być co najwyżej jeden banner. Jeśli masz drugi nagłówek, który nie jest banerem witryny (nagłówek sekcji, nagłówek wątku komentarzy), użyj zwykłego <header> zagnieżdżonego wewnątrz swojej sekcji, a nie na najwyższym poziomie.

Kiedy dodawać etykietę

Jeśli strona ma wiele punktów orientacyjnych tego samego typu (rzadkie w przypadku bannera, częstsze w przypadku nawigacji), dodaj aria-label, aby je rozróżnić. Pojedynczy banner nie potrzebuje etykiety — czytniki ekranu ogłaszają go jako „banner”.

Typowe błędy

Wiele elementów <header> na górze strony, każdy awansowany do punktu orientacyjnego banner. Użytkownicy czytników ekranu widzą dwa wpisy „banner” w menu punktów orientacyjnych i nie mogą stwierdzić, który jest prawdziwym nagłówkiem.
role="banner" na <header> zagnieżdżonym wewnątrz <main> lub <article>. Rola nadpisuje domyślne zachowanie bez punktu orientacyjnego i zanieczyszcza nawigację punktami orientacyjnymi.
Logo witryny umieszczone poza <header>, przez co wypada poza punkt orientacyjny banner.
Przyklejona nawigacja wyrenderowana jako oddzielny <div role="banner"> obok oryginalnego <header> — dwa bannery.
Banner z pustą zawartością (tylko dekoracyjne obramowania) — punkt orientacyjny nadal pojawia się w nawigacji czytnika ekranu, ale nic w sobie nie zawiera.

Przykład

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